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请求，通过检查每个产品是否具有所选值并使用分页作为加载下一页的方式，根据您的过滤器提取产品。

这些是不使用App的主要选项。

祝你好运！

使用Shopify对Collection页面进行变体过滤

1 个答案:

集合没有变体

变体选项以不同方式存储

坏部分

解决方法（有一些）