Question

Shopify的最高显示限制为每页50个产品。

为了解决这个限制，我制作了一个jquery代码片段。该脚本从每个分页链接中获取URL，并执行ajax加载 - 将结果添加到主内容区域。

它对我来说很完美 - 但不适合我的朋友。他每次都错过了一页。所以我认为这可能是一个异步问题，他的连接比我的慢。所以我重写了几次脚本以更明确。但它仍然不适合他。

在拍摄很多麻烦之后，似乎如果以管理员身份登录 - 一切正常。如果未登录，则中间页面无法加载。

这是我最近的代码：

{% if template contains 'collection' %}
 <script>

$(document).ready(function() {

$('#viewFewerProducts').hide();


// when viewAllProducts is clicked
$("#viewAllProducts").click( function (e) {
e.preventDefault();
$("#viewAllProducts , #paginationMagic").hide(); // hide pagination buttons
// and clear out collectionThumbs - but add the ViewAllRow back in.
$("#collectionThumbs").empty().html('<div class="row" id="viewAllRow"></div>');

// see how many pagination links there are. Add 1 because of index 0
var numberOfPages = $('#paginateNumbers .item').length + 1
var path = window.location.pathname;
var pageURL;


// this bit adapted from blog post... but cant remember url
for (var i=1;i<numberOfPages;i++) { 
    $.ajax(
    {
        type: 'GET',
        url:  pageURL = path + "?page=" + i, // build pagination page url
        ajaxI: i, // Capture the current value of 'i'.
        success: function(data)
    {
        i = this.ajaxI; // Reinstate the correct value for 'i'.
    $(data).find('#collectionThumbs').each(function()
    {
      // Read data... and stick it in the page
     var importedCollection = $(data).find("#collectionThumbs a").unwrap();
     importedCollection.appendTo("#viewAllRow");
    });
    },
        error: function(data)
    {
    // Handle errors here.
    }
    });
}
///

    $("#viewFewerProducts").show();

});

// reload the window
$("#viewFewerProducts").click( function (e) {
    e.preventDefault();
    $("#viewFewerProducts").text('loading...').removeAttr('id');
    location.reload();
});


});

</script>
{% endif %}

我已经用其他几种不同的方式写了它。如果没有登录，它就无法工作？我已经检查过 - 并且在控制台中也没有出现任何错误。

所以我的问题是 - 有人知道为什么登录时会有效，但如果没有登录到管理员则不行？它真的很棒 - 因为它没有在任何管理页面上运行。

编辑：

{% if template contains 'collection' %}
 <script>

$(document).ready(function() {

$('#viewFewerProducts').hide();



$("#viewAllProducts").click( function (e) {
e.preventDefault();
    $("#viewAllProducts , #paginationMagic").hide();


    var numberOfPages = $('#paginateNumbers .item').length + 1
    var path = window.location.pathname;
    // console.log(path);
    var pageURL;

    //

    for (var i=1;i<numberOfPages;i++) {
    // console.log(i + 'a')
    $.ajax(
    {
    type: 'GET',
    url:  pageURL = path + "?page=" + i,
    beforeSend: function() {
    $("#collectionThumbs").empty();
    },
    ajaxI: i, // Capture the current value of 'i'.
    success: function(data)
    {
    i = this.ajaxI; // Reinstate the correct value for 'i'.

        $(data).find('#collectionThumbs').each(function() {
        // Read data from XML...
         $('<div class="row" id="viewAllRow' + i + '"></div>').appendTo("#collectionThumbs");
         var importedCollection = $(data).find("#collectionThumbs a").unwrap(); 
          importedCollection.appendTo("#viewAllRow" + i );

        // alert("now showing " +  ($("#viewAllRow" + i + " a").length)  + " products" );
        });

        var numberOfRows = $('#collectionThumbs .row').length + 1
        var viewAllRowItem = []

        for (var x=1;x<numberOfRows;x++) {
            //put each row into a variable
             viewAllRowItem[x] = $("#viewAllRow" + x ).clone();
             $("#viewAllRow" + x ).remove();
             // console.log(viewAllRowItem[x])
        }

        for (var x=1;x<numberOfRows;x++) {
                $(viewAllRowItem[x]).appendTo('#collectionThumbs');
        }

    },
    dataType: "html",
    error: function(data)
    {
    // Handle errors here.
    }
    });




}



$("#viewFewerProducts").show();


});


$("#viewFewerProducts").click( function (e) {
e.preventDefault();
$("#viewFewerProducts").text('loading...').removeAttr('id');
location.reload();

});

});

</script>
{% endif %}

以上代码似乎有效 - 不确定为什么......是一个消除过程。我确实必须添加一些代码来重新排序元素一旦加载（因为一些ajax响应比其他响应更快 - 并且以错误的顺序出现在页面上）。

Shopify“查看全部”按钮实施

0 个答案: