Shopify集合页面点击标签后标签计数自动变更问题

我完全懂你遇到的糟心情况——点了某个标签（比如Banana）筛选商品后，其他标签的计数全乱套了，要么显示0，要么数字完全不对。这其实是因为你当前的代码是基于筛选后的集合来统计数量，而不是原始集合的全部商品。

问题根源 #

当用户点击标签后，Shopify的collection对象已经被过滤成只包含该标签的商品了。这时候你再遍历collection.all_tags，然后在collection.products里统计每个标签的商品数，自然只能统计到当前筛选结果里的数量——其他标签的商品不在这个集合里，计数就会显示0或者错误数字。

修复方案 #

你需要基于原始集合的所有商品来统计每个标签的数量，不受当前筛选条件影响。我们可以用collection.all_products（这个对象包含集合里的全部商品，不会被筛选条件改变）来做统计，具体代码如下：

{% comment %} 先提前统计所有标签的商品数量，存在哈希表里 {% endcomment %}
{% assign tag_counts = {} %}
{% for product in collection.all_products %}
  {% for tag in product.tags %}
    {% comment %} 标签首次出现时初始化计数为0 {% endcomment %}
    {% unless tag_counts[tag] %}
      {% assign tag_counts[tag] = 0 %}
    {% endunless %}
    {% comment %} 给对应标签的计数加1 {% endcomment %}
    {% assign count = tag_counts[tag] | plus: 1 %}
    {% assign tag_counts[tag] = count %}
  {% endfor %}
{% endfor %}

{% comment %} 渲染标签筛选栏 {% endcomment %}
<div class="tag-filters">
  <a href="{{ collection.url }}" class="{% if current_tags == empty %}active{% endif %}">全部商品</a>
  {% for tag in collection.all_tags %}
    {% assign count = tag_counts[tag] | default: 0 %}
    <a href="{{ collection.url }}/{{ tag | handle }}" class="{% if current_tags contains tag %}active{% endif %}">
      {{ tag }}({{ count }})
    </a>
  {% endfor %}
</div>

代码说明 #

1. 提前统计全量标签计数：先遍历collection.all_products（集合所有商品），把每个标签对应的商品数存在tag_counts哈希表里。这个计数是基于原始全量商品的，不受后续筛选影响。
2. 渲染筛选标签：遍历标签时直接从tag_counts取对应数量，不用再去遍历当前筛选后的商品。
3. 活跃状态标记：用current_tags判断当前选中的标签，给对应标签加上active类，方便做样式区分。

注意事项 #

如果你的集合商品数量超过50个，collection.all_products默认只能获取前50个商品。这时候需要在Shopify后台的在线商店 > 偏好设置里，把「集合页面的商品数量」调大；如果商品数特别多，也可以考虑用Shopify元字段（Metafields）提前存储标签计数，避免每次页面加载都遍历商品统计。

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