使用 Shopify 在 Collection 个页面上使用变体过滤器

Question

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

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

                <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>

但是，我希望有一个动态尺寸过滤器（使用变体）

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

<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 的限制，您尝试实现的目标无法通过 liquid 实现。

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

解决方法（有几个）

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

1) 最常见的一种是使用标签作为尺码并通过标签进行筛选，因为集合可以直接通过标签筛选产品。

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

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

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

祝你好运！

使用 Shopify 在 Collection 个页面上使用变体过滤器

Variant filter on Collection pages with Shopify

collections

product

filter

variant

shopify

集合没有变体

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

不好的部分

解决方法（有几个）