好的，所以我对这个问题有几个不同的答案。不确定我会使用哪一个。
方法一：使用 URL 按标签过滤集合
第一个由 Shawn Rudolph 在 Shopify 论坛上提供。它涉及使用 URL 按标签过滤集合。肖恩的帖子很好地解释了这一点：https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174
方法 2：使用 paginate 通过 AJAX API 从集合中获取所有产品
这个方法很酷。是的，它比方法一更有效，但这在很多情况下可能很有用。开箱即用 Shopify 不允许您使用 AJAX API 从给定集合中检索所有产品。据我所知，它可以使用管理 API 但不是 AJAX 来完成。但是，您可以使用 for 循环访问集合中的所有产品，但 for 循环一次最多允许循环 50 个项目。这就是分页技巧的用武之地。基本上我在这里采用了 davecap 概述的技术：http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections
所以首先你需要你的 HTML/Liquid 布局：
{% paginate collections.mycollectionname.products by 50 %}
{% for product in collections.mycollectionname.products %}
<div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}">
{{ product.title }}
</div>
{% endfor %}
{% if paginate.next %}
<div class="clone-node next" title="{{ paginate.next.url }}"></div>
{% endif %}
<div id="insertion-point"></div>
{% endpaginate %}
所以让我们把它分解一下。首先，我们将产品按 50 分页。这是 for 循环允许的最大数量，所以这就是我们要使用的：
{% paginate collections.mycollectionname.products by 50 %}
接下来我们开始循环我们的产品。每个产品都有一个带有“克隆节点”类的包装 div，这非常重要。我还为 div 分配了一个唯一的 ID，这对于它的工作不是必需的，但在尝试识别产品以供以后操作时可能会派上用场。
{% for product in collections.mycollectionname.products %}
<div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}">
{{ product.title }}
</div>
{% endfor %}
我们必须确保包含 paginate.next URL。我们还给它一个“克隆节点”类，并添加一个“下一个”类。我将 paginate.next.url 分配给 title 属性，但您可以将它分配给任意数量的属性。您只需要能够使用 jQuery 获取它。
{% if paginate.next %}
<div class="clone-node next" title="{{ paginate.next.url }}"></div>
{% endif %}
最后我们分配一个插入点。这是我们希望在获取它们后插入下一组 50 个产品的位置：
<div id="insertion-point"></div>
好的，现在让我们看看JS代码：
<script>
var prevUrl = ""; //this helps us know when we are done receiving products
function getParts() {
//get the last instance of the .next node. This will give us the next URL to query
var nextNode= $(".next").last(),
url = nextNode.attr("title"); //nab the URL
//send a get request to our next URL
$.ajax({
type: 'GET',
url: url,
dataType:'text',
success: function (data) {
//use a dummy div to convert the text to HTML, then find all of our clone-nodes, including our new "next" div which contains our next URL
var cloneNodes = $("<div>").html(data).find(".clone-node");
//insert our new clone-nodes on the page
cloneNodes.insertBefore("#insertion-point");
//if the URL's don't match let's grab the next 50!
if (prevUrl != url) {
prevUrl = url;
getParts();
}
}
});
}
//Call getParts for the first time to get the party started.
getParts();
</script>
这基本上会做的是，从包含 paginate.next.url 的 div 的 title 属性中获取产品下一页的 URL。然后使用 jQuery ajax 函数，我们调用该 URL，它返回一个 HTML 页面，以使用与我们现有页面一样的格式，使用我们分配的相同“克隆节点”类，只是它嵌入了接下来的 50 个产品。
在 davecap 的示例中，他在 Ajax 调用中使用了 HTML 的 dataType，但这给我带来了一些麻烦。因此，我使用 dataType text 并使用 jQuery 创建的虚拟 div 将文本转换为 HTML。然后 jQuery 抓取所有带有“clone-node”类的 div，并将它们插入到我们插入点之前的页面上。请记住，克隆节点现在包含接下来的 50 个产品，因此我们刚刚将接下来的 50 个产品添加到我们的页面中。
最后，我们检查前一个 URL 是否不等于当前 URL。如果不相等，则意味着它是一个新 URL，因此必须要获取更多产品，因此我们递归调用 getParts() 函数，该函数重新开始该过程并获取下一个 50。这一直持续到最终 URL 匹配，这意味着没有更多的产品可供提取，并且该过程停止。
你有它！当然，如果您必须获取成千上万的产品，这可能不太理想，因为您一次调用它们 50 个。但是对于较小的数字（可能是成百上千......），它应该可以正常工作。