使用Shopify的收藏页上的变体过滤器

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的限制，使用液体不可能达到您想要达到的目标。

为了实现这一目标，您将需要循环所有产品并采用其变式选项并仅过滤唯一的选项，并且由于每个请求的产品限制为50个产品，因此这是一场失败的斗争。

解决方法（有一些方法）

所有变通办法都将要求您创建一个link_list ，其中将包含您必须手动输入的所有可用尺寸。

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

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

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

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

祝好运！