如何让Shopify筛选器仅显示当前筛选产品可用的标签？

我明白你的困扰——当你筛选了某个标签（比如Oak颜色）后，其他筛选器（比如尺码）还是会显示整个集合里的所有标签，而不是当前筛选结果里产品实际有的标签。这是因为你现在的代码用的是collection.all_tags，它会返回整个集合的所有标签，不管当前有没有筛选。下面我来给你一步步解决这个问题：

问题根源 #

你的代码中判断标签是否显示的逻辑是：

{% elsif collection.all_tags contains tag %}

这里的collection.all_tags是整个集合的所有标签，不是当前筛选后产品的标签，所以即使你筛选了Oak，尺码筛选器还是会显示集合里其他产品带的Small/Medium/Large标签。

解决方案：动态获取当前筛选结果的标签 #

我们需要先收集当前页面显示的所有产品的标签，然后在渲染筛选器时只保留这些标签。

步骤1：在Liquid中收集当前筛选产品的标签 #

在collection.liquid的开头（筛选器代码之前）添加以下代码，用来获取当前筛选后所有产品的标签：

{% comment %} 收集当前筛选结果中所有产品的标签 {% endcomment %}
{% assign filtered_products = collection.products %}
{% assign current_filtered_tags = '' %}
{% for product in filtered_products %}
  {% assign current_filtered_tags = current_filtered_tags | append: ',' | append: product.tags | join: ',' %}
{% endfor %}
{% assign current_filtered_tags = current_filtered_tags | split: ',' | uniq | compact %}

步骤2：修改筛选器的显示逻辑 #

把每个筛选器里的判断逻辑修改为：当有筛选时，只显示当前筛选产品中存在的标签；没有筛选时，显示整个集合的标签。

比如，颜色筛选器的代码修改后如下，其他筛选器（材质、尺码、价格）同理：

<li class="clearfix filter">
  {% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahongany' | split: ',' %}
  <label>Colour</label>
  <hr class="hr--sidebar">
  <select class="coll-filter">
    <option value="">All</option>
    {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
        <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% else %}
        {% comment %} 如果有当前筛选标签，只显示当前筛选产品中的标签 {% endcomment %}
        {% if current_tags.size > 0 %}
          {% if current_filtered_tags contains tag %}
            <option value="{{ tag | handle }}">{{ tag }}</option>
          {% endif %}
        {% comment %} 没有筛选时，显示整个集合的标签 {% endcomment %}
        {% else %}
          {% if collection.all_tags contains tag %}
            <option value="{{ tag | handle }}">{{ tag }}</option>
          {% endif %}
        {% endif %}
      {% endif %}
    {% endfor %}
  </select>
</li>

步骤3：批量替换所有筛选器 #

把材质、尺码、价格这三个筛选器的循环逻辑都改成上面的样子，替换原来的{% elsif collection.all_tags contains tag %}部分。

额外注意点 #

• 如果你的集合产品数量超过50个，Shopify默认只会加载前50个产品，这时候collection.products只会包含50个产品的标签。你可以在Shopify后台的在线商店 > 偏好设置里调整“产品每页显示数量”，或者使用collection.all_products（最多加载200个产品）。
• 如果你的产品数量超过200个，可能需要结合AJAX或Shopify API来获取所有产品的标签，但对于大多数店铺来说，上面的方案已经足够。

这样修改后，当你筛选Oak颜色后，尺码筛选器只会显示当前筛选结果中产品实际有的尺码标签，不会再显示无关的选项了。

内容的提问来源于stack exchange，提问作者Allsops