Shopify 产品更换部件
Shopify Product Replacement Parts
正在寻找有关使用 Shopify 的有趣情况的建议。我正在为客户建立一个网站，该网站的产品可以免费更换零件。每个替换零件都有不同的颜色选项。
到目前为止，我已经让公司的用户将所有更换零件添加为商店中的产品。我已经过滤了搜索结果和目录结果，因此没有显示更换部件。
他们唯一希望显示替换零件的地方是当用户访问产品时，他们可以单击一个显示订购替换零件的按钮。然后屏幕将显示该产品的所有更换部件。
单个替换零件可能属于多个产品，并且可能有不同的颜色变体。
到目前为止，我所做的是让客户用至少两个标签标记所有部分。名为 "part" 的标签，将产品标识为部件。以及一个或多个标签，如 "link:SKU123"，将零件链接到一个或多个产品。然后在我的产品页面上，我使用液体循环所有部件并显示与产品 SKU 匹配的部件。然后我发现for循环有50项限制...
所以我看了一下产品API，应该还可以，就是没办法按标签过滤。标签看起来很方便，但我没有看到很多使用它们的方法……所以最终我正在寻找一种方法来显示特定产品的所有替换部件。它不必涉及标签，尽管客户已经标记了所有部分，我不想告诉他们这是浪费时间。但如果真的有任何关于如何实现这一点的想法，我们将不胜感激。
我能想到的唯一方法是 return 所有替换部件，然后在页面上过滤它们。我看到 API 仅限于 250 种产品，但我想我可以多次调用，直到我获得所有产品。我不确定总共有多少替换部件，但我怀疑可能超过 1000 个。似乎浪费网络资源必须将它们全部拉下来然后过滤它们...
P.S。 - 更换零件是免费的，可以 运行 通过零美元金额结账吗？
我会将零件创建为独立产品。然后每个部分都会有变体（颜色）。然后你为这个部分（产品）创建元字段，它有一个字段，其中包含所有产品 ID 的列表，对于这个部分，这些 ID 是 'mother'。这样您就不需要有奇怪的标签，并且可以使概念更加分离，并且一切都更清晰。根据零金额，是的，您可以使用零金额去结账（如果您的运输设置允许您这样做）。
好的，所以我对这个问题有几个不同的答案。还不确定我会用哪一个。
方法 1：使用 URL
按标签过滤 Collection
第一个是由 Shawn Rudolph 在 Shopify 论坛上提供的。它涉及使用 URL 按标签过滤 collection。 Shawn 的 post 在这里解释得很好：https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174
方法 2：使用分页从 collection 使用 AJAX API
获取所有产品
这个方法很酷。是的，它比方法一更有效，但这可能在很多情况下都有用。开箱即用的 Shopify 不允许您使用 AJAX API 从给定的 collection 检索所有产品。据我所知，这可以通过管理员 API 来完成，但不能通过 AJAX 来完成。但是，您可以使用 for 循环访问 collection 中的所有产品，但 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，class 为“clone-node”，这一点非常重要。我还为 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。我们还给它一个“clone-node”class 并添加一个“下一个”class。我将 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 的标题属性中获取下一页产品的 URL paginate.next。url .然后使用 jQuery ajax 函数我们调用 URL 并且它 returns 一个 HTML 的页面使用格式化就像我们现有的页面一样，具有相同的“ clone-node" class我们分配的是，只有它嵌入了接下来的 50 个产品。
在 davecap 的示例中，他在 Ajax 调用中使用了 HTML 的数据类型，但这给我带来了一些麻烦。因此，我使用数据类型文本并使用由 jQuery 创建的虚拟 div 将文本转换为 HTML。然后 jQuery 抓取所有带有“clone-node” class 的 div 并将它们插入页面上我们的 insertion-point 之前。请记住，clone-nodes 现在包含接下来的 50 种产品，所以我们刚刚将接下来的 50 种产品添加到我们的页面。
最后，我们检查前一个 URL 是否不等于当前的。如果它不相等，那就意味着它是一个新的 URL 并且因此必须有更多的产品要获取，所以我们递归调用我们的 getParts() 函数，它重新开始这个过程并获取下一个 50。这一直持续到最后URLs 匹配，这意味着没有更多的产品可以获取，进程停止。
给你！当然，如果您必须获取成千上万的产品，这可能不太理想，因为您一次调用它们 50 个。但对于较小的数字（可能成百上千......）它应该工作得很好。
正在寻找有关使用 Shopify 的有趣情况的建议。我正在为客户建立一个网站，该网站的产品可以免费更换零件。每个替换零件都有不同的颜色选项。
到目前为止，我已经让公司的用户将所有更换零件添加为商店中的产品。我已经过滤了搜索结果和目录结果，因此没有显示更换部件。
他们唯一希望显示替换零件的地方是当用户访问产品时，他们可以单击一个显示订购替换零件的按钮。然后屏幕将显示该产品的所有更换部件。
单个替换零件可能属于多个产品，并且可能有不同的颜色变体。
到目前为止，我所做的是让客户用至少两个标签标记所有部分。名为 "part" 的标签，将产品标识为部件。以及一个或多个标签，如 "link:SKU123"，将零件链接到一个或多个产品。然后在我的产品页面上，我使用液体循环所有部件并显示与产品 SKU 匹配的部件。然后我发现for循环有50项限制...
所以我看了一下产品API，应该还可以，就是没办法按标签过滤。标签看起来很方便，但我没有看到很多使用它们的方法……所以最终我正在寻找一种方法来显示特定产品的所有替换部件。它不必涉及标签，尽管客户已经标记了所有部分，我不想告诉他们这是浪费时间。但如果真的有任何关于如何实现这一点的想法，我们将不胜感激。
我能想到的唯一方法是 return 所有替换部件，然后在页面上过滤它们。我看到 API 仅限于 250 种产品，但我想我可以多次调用，直到我获得所有产品。我不确定总共有多少替换部件，但我怀疑可能超过 1000 个。似乎浪费网络资源必须将它们全部拉下来然后过滤它们...
P.S。 - 更换零件是免费的，可以 运行 通过零美元金额结账吗？
我会将零件创建为独立产品。然后每个部分都会有变体（颜色）。然后你为这个部分（产品）创建元字段，它有一个字段，其中包含所有产品 ID 的列表，对于这个部分，这些 ID 是 'mother'。这样您就不需要有奇怪的标签，并且可以使概念更加分离，并且一切都更清晰。根据零金额，是的，您可以使用零金额去结账（如果您的运输设置允许您这样做）。
好的，所以我对这个问题有几个不同的答案。还不确定我会用哪一个。
方法 1：使用 URL
按标签过滤 Collection第一个是由 Shawn Rudolph 在 Shopify 论坛上提供的。它涉及使用 URL 按标签过滤 collection。 Shawn 的 post 在这里解释得很好：https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174
方法 2：使用分页从 collection 使用 AJAX API
获取所有产品这个方法很酷。是的，它比方法一更有效，但这可能在很多情况下都有用。开箱即用的 Shopify 不允许您使用 AJAX API 从给定的 collection 检索所有产品。据我所知，这可以通过管理员 API 来完成，但不能通过 AJAX 来完成。但是，您可以使用 for 循环访问 collection 中的所有产品，但 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，class 为“clone-node”，这一点非常重要。我还为 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。我们还给它一个“clone-node”class 并添加一个“下一个”class。我将 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 的标题属性中获取下一页产品的 URL paginate.next。url .然后使用 jQuery ajax 函数我们调用 URL 并且它 returns 一个 HTML 的页面使用格式化就像我们现有的页面一样，具有相同的“ clone-node" class我们分配的是，只有它嵌入了接下来的 50 个产品。
在 davecap 的示例中，他在 Ajax 调用中使用了 HTML 的数据类型，但这给我带来了一些麻烦。因此，我使用数据类型文本并使用由 jQuery 创建的虚拟 div 将文本转换为 HTML。然后 jQuery 抓取所有带有“clone-node” class 的 div 并将它们插入页面上我们的 insertion-point 之前。请记住，clone-nodes 现在包含接下来的 50 种产品，所以我们刚刚将接下来的 50 种产品添加到我们的页面。
最后，我们检查前一个 URL 是否不等于当前的。如果它不相等，那就意味着它是一个新的 URL 并且因此必须有更多的产品要获取，所以我们递归调用我们的 getParts() 函数，它重新开始这个过程并获取下一个 50。这一直持续到最后URLs 匹配，这意味着没有更多的产品可以获取，进程停止。
给你！当然，如果您必须获取成千上万的产品，这可能不太理想，因为您一次调用它们 50 个。但对于较小的数字（可能成百上千......）它应该工作得很好。