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

如果您发现任何可以改进的地方，请告诉我:)