使用 Shopify 在 Collection 页面上筛选变体

Question

我正在尝试在我的收藏页面中设置过滤器。

到目前为止，我设法设置了一个很棒的自定义标签过滤器，如下所示：

                <div class="collection-sort">

{% assign tags = 'Black, Slate, Military Green' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
<select id="FilterBy" class="collection-sort__input">
  <option value="/collections/{{ collection.handle }}">Choose Color</option>
  {% for tag in tags %}
  {% if current_tags contains tag %}
  <option value="/collections/{{ collection.handle }}/{{tag}} " selected>{{ tag }}</option>
  {% elsif collection.all_tags contains tag %}
  <option value="/collections/{{ collection.handle }}/{{tag}}">{{ tag }}</option>
  {% endif %}
  {% endfor %}
</select>
</div>

但是，我希望有一个动态大小过滤器（使用 Variant）

为此，我尝试了以下方法：

<div class="collection-sort">


  <span value="">Choose Size</span>

          {% for variant in collection.variants %}
         {% if variant.available %}
  <span value="{{ variant.id }}" >{{ variant.size}}</span>
{% else %}
  <span value="{{ variant.id }}" >{{ variant.size }}</span>
 {% endif %}
        {% endfor %}

</div>

但我的下拉列表中没有出现任何内容。 . .我所有的产品都输入了尺寸作为产品选项/变体。 . .

有人设法完成这项工作吗？这将非常有帮助！

非常感谢

Answer 1

您的代码存在太多问题，无法输出任何内容。

让我们一一剖析。

集合没有变体

有了这行代码：

{% for variant in collection.variants %}

您的目标是集合内的变体，但集合没有变体。产品确实有变体。

所以这里的逻辑是不正确的。

变体选项以不同的方式存储

使用以下代码：{{ variant.size }} 您正在尝试获取名为 size 的变体选项，但它不起作用。

您必须使用对象option1、option2 或option3 来获得选项。如果您的变体选项大小是第一个，您将通过以下方式获得它：variant.option1。

不好的部分

由于 Shopify 的限制，您尝试使用液体无法实现。

为了实现这一点，您需要循环所有产品并采用它们的变体选项并仅过滤独特的产品，并且由于每个请求的硬性限制 ot 50 产品，这是一场失败的战斗。

解决方法（有几个）

所有解决方法都需要您创建一个link_list，以保存您必须手动输入的所有可用尺寸。

1) 最常见的是使用标签作为尺寸并按标签过滤，因为集合可以直接按标签过滤产品。

2) 使用将根据尺寸存储产品并在过滤特定尺寸时重定向到它们的集合。

3) 创建一个无限的 AJAX 请求，通过检查每个产品是否具有选定的值并使用分页作为加载下一页的方式来根据您的过滤器提取产品。

这些是不使用应用程序的主要选项。

祝你好运！