使用Shopify寻找一些有趣情况的建议。我正在为一个客户建立一个网站，该网站的产品可以免费更换零件。每个替换零件都有不同的颜色选项。
到目前为止，我已经让公司的用户在商店中添加所有替换零件作为产品。我已经过滤了搜索结果和目录结果，因此不会显示替换部分。
他们希望更换零件展示的唯一地方是当用户访问PRODUCT时，他们可以点击一个按钮，说明订购更换零件。然后将显示该产品的所有替换零件的屏幕。
单个替换零件可能属于多个产品，可能有不同的颜色变体。
所以我到目前为止所做的是让客户端标记至少有两个标签的所有部分。称为“部件”的标签，用于将产品标识为零件。还有一个或多个标签，例如“链接：SKU123”，用于将零件链接到一个或多个产品。然后在我的产品页面上，我使用液体循环所有部件并显示与产品SKU匹配的部件。然后我发现for循环有一个50项限制......
所以我查看了产品API，这没关系，除非它无法按标签过滤。标签似乎很方便，但我没有看到很多方法来使用它们......所以最终我正在寻找一种方法来显示特定产品的所有替换零件。它不必涉及标签，虽然客户已经标记了所有部件，我不想告诉他们这是浪费时间。但是，对于如何实现这一点的任何想法都将非常感激。
我能想到的唯一方法是返回所有替换部件，然后在页面上过滤掉它们。我看到API仅限于250种产品，但我想我可以进行多次通话，直到我得到它们。我不确定有多少替换部分，但我怀疑可能有超过1000个。似乎浪费了网络资源，必须将它们全部拉下来然后过滤它们......
P.S。 - 更换零件是免费的，它们可以以零美元金额结账吗？
答案 0 :(得分：0)
我会将这些零件创建为独立产品。然后每个部分都有变体（颜色）。然后，您为此部件（产品）创建元数据，这些部件的字段包含所有产品ID的列表，这些产品ID是此部件的“母亲”。通过这种方式，您不需要使用奇怪的标签，并且可以使概念更加分离，并且一切都清洁。根据零金额，是的，您可以以零金额结账（如果您的送货设置允许您这样做）。
答案 1 :(得分：0)
好的，我对这个问题有几个不同的答案。不确定我还会使用哪一个。
第一个是Shawn Rudolph在Shopify论坛上提供的。它涉及使用URL按标签过滤集合。 Shawn的帖子在这里解释得很好：https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174
这种方法非常酷。是的，这比方法一更多，但这在很多场景中都很有用。开箱即用Shopify不允许您使用 AJAX API检索给定集合中的所有产品。根据我的知识，可以使用admin 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，其中包含一个＆＃34; clone-node＆＃34;这是非常重要的。我还为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网址。我们还给这个＆＃34;克隆节点＆＃34;我们加上一个＆＃34; next＆＃34;类。我将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>
这将基本上做的是从div的title属性中获取下一页产品的URL，其中包含paginate.next.url。然后使用jQuery ajax函数，我们调用该URL，它返回一个HTML页面，使用格式，就像我们现有的页面一样，使用相同的＆＃34; clone-node＆＃34;我们分配的课程，只有它嵌入了下50个产品。
在davecap的例子中，他在他的Ajax调用中使用了HTML的dataType，但这给了我一些麻烦。因此，我使用了dataType文本并使用jQuery创建的虚拟div将文本转换为HTML。然后jQuery用＆＃34; clone-node＆＃34;抓取所有div。对它们进行分类并在插入点之前将它们插入到页面上。请记住克隆节点现在拥有接下来的50个产品，因此我们只是将下50个产品添加到我们的页面中。
最后，我们检查先前的URL是否不等于当前的URL。如果它不相等，那意味着它是一个新的URL，因此必须有更多的产品要提取，所以我们递归调用我们的getParts（）函数，它启动该过程并抓取下一个50。继续，直到最后URL匹配，这意味着没有更多的产品要提取，并且该过程停止。
你有它！当然，如果你需要获取成千上万的产品，这可能不那么理想了，因为你一次呼叫它们50个。但对于较小的数字（可能数百和数百......）它应该可以正常工作。