3

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 响应比其他响应更快地返回 - 并且以错误的顺序出现在页面上）。

4

0 回答 0