自定义 Ajax 页面加载 Shopify 收藏页面？答案

【问题标题】：Custom Ajax Page Loading Shopify Collection Page?自定义 Ajax 页面加载 Shopify 收藏页面？
【发布时间】：2015-08-15 11:05:39
【问题描述】：

我正在尝试在 shopify 上构建一个简单的解决方案，在其中单击“查看更多”链接，我的 ajax 将从下一页提取数据并将其显示在我当前的集合页面上，而无需更改页面。

我在下面最简单的方法中使用了这个方法，但是我正在尝试更改它，因此在每个页面之后它将为下一个请求添加另一个 div。应该是这样的：

用户滚动到底部并点击查看更多链接。
数据显示在提供的第一个 div 中。
用户再次点击查看更多
数据显示在上一页之后的下一页

我希望这是有道理的。我想我需要实现某种计数器并将该计数器用作我的 ajax 查询中的页码，但我不确定如何做到这一点以及在每次查询后创建一个新的 div 将插入下一个数据。

到目前为止，这是我的代码：

$(document).ready(function() {
$('#more p a').click(function(e) {
  e.preventDefault();
  $.ajax({
     url: 'https://url.myshopify.com/collections/all?page=2',
     type:'GET',
     success: function(data){
         $('#ajax-content-2').html($(data).find('.collection-wrapper').html());
     }
  });
});
});

【问题讨论】：

我知道这是一个老话题，但这里有一些东西可以像它对我一样真正帮助你：Infinite Scroll for Shopify Collections

标签： jquery ajax shopify

【解决方案1】：

好吧，因为我没有真正得到任何回应，我只是自己写的，它非常基本，但它有效。

jquery：

$(document).ready(function() {
    var counter = 2
    var pages = Math.ceil('{{ collection.all_products_count }}' / {{ settings.products_per_page }});
    var maxCount = pages + 1;
    console.log("Pages Found: " + pages);

    console.log("Collection Title: {{ collection.handle }}");

    $('#more p a').click(function(e) {

        e.preventDefault();
        var getUrl = "site.myshopify.com/collections/{{ collection.handle }}?page="+counter;

        $.ajax({
             url: getUrl,
             type:'GET',
             success: function(data){
                $("#ajax-content-"+counter).html($(data).find('.collection-wrapper').html());
                counter++;
                var oldCount = counter - 1;
                $("#ajax-content-"+oldCount).append("<div id='ajax-content-"+counter+"'></div>");

                if(counter == maxCount ) {
                    $('#more').empty();
                }

             }
        });
    });
});

如果您在这里看到任何可以改进的地方，请告诉我:)

【讨论】：