Jquery 自定义Ajax页面加载Shopify集合页面？

我正在尝试在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());
     }
  });
});
});

---

好吧，既然我没有收到任何回复，我只写了我自己的，这很基本，但很有效

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();
                }

             }
        });
    });
});

$（文档）.ready（函数（）{
变量计数器=2
var pages=Math.ceil（{{collection.all_products_count}}}/{{settings.products_per_page}}）；
var maxCount=pages+1；
console.log（“找到的页面：+页面”）；
log（“集合标题：{{Collection.handle}}”）；
$（“#更多p a”）。单击（函数（e）{
e、 预防默认值（）；
var getUrl=“site.myshopify.com/collections/{{collection.handle}}”page=“+counter；
$.ajax({
url:getUrl，
类型：'GET'，
成功：功能（数据）{
$（“#ajax内容-”+计数器）.html（$（数据）.find（'.collection wrapper'）.html（））；
计数器++；
var oldCount=计数器-1；
$（“#ajax内容-”+oldCount）；
如果（计数器==最大计数）{
$（“#更多”）.empty（）；
}
}
});
});
});

---

如果您在这里看到任何可以改进的地方，请让我知道：）

我知道这是一个老话题，但这里有一些东西确实可以帮助您，就像它对我一样：