Shopify中无对应标签时如何隐藏筛选列表？

我一眼就看出问题出在哪了——你现在用来判断是否隐藏筛选区域的变量，比如colour、material，都是直接计算你预设的标签列表的长度，而不是集合中实际存在的对应标签数量！比如你定义的Colour标签有9个，tags | size永远返回9，colour <= 0这个条件永远不会成立，筛选区域当然不会隐藏。

修正思路 #

对于每个筛选组，我们需要：

1. 给预设标签列表单独命名，避免变量覆盖；
2. 筛选出集合中实际包含的、属于这个预设列表的标签；
3. 用筛选后的标签数组长度来判断是否隐藏该筛选区域；
4. 注意Liquid变量名不能有横线，所以price-range这种命名要改成合法格式，比如price_count。

修正后的完整代码 #

{% comment %} 颜色筛选组 {% endcomment %}
{% assign colour_tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
{% assign existing_colour_tags = colour_tags | where_exp: "tag", "collection.tags contains tag | strip" %}
{% assign colour_count = existing_colour_tags | size %}
<ul class="subnav clearfix" {% if colour_count <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
    <label>Colour</label>
    <hr class="hr--sidebar">
    {% for t in colour_tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
        <li class="selection{% unless current_tag %} active{% endunless%}">
          <span>{{ tag | link_to_remove_tag: tag }}</span>
        </li>
      {% elsif collection.tags contains tag %}
        <li class="selection{% unless current_tag %} active{% endunless%}">
          <div id="swatch-{{ tag }}" class="colour-filter">&nbsp;</div>
          <span> {{ tag | link_to_tag: tag }}</span>
        </li>
      {% endif %}
    {% endfor %}
  </li>
</ul>

{% comment %} 材质筛选组 {% endcomment %}
{% assign material_tags = 'Egyptian Cotton, Silk, Satin, Salt' | split: ',' %}
{% assign existing_material_tags = material_tags | where_exp: "tag", "collection.tags contains tag | strip" %}
{% assign material_count = existing_material_tags | size %}
<ul class="subnav clearfix" {% if material_count <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
    <label>Material</label>
    <hr class="hr--sidebar">
    {% for t in material_tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
        <li {% unless current_tag %}class="active"{% endunless%}>
          {{ tag | link_to_remove_tag: tag }}
        </li>
      {% elsif collection.tags contains tag %}
        <li>
          {{ tag | link_to_tag: tag }}
        </li>
      {% endif %}
    {% endfor %}
  </li>
</ul>

{% comment %} 尺寸筛选组 {% endcomment %}
{% assign size_tags = 'Small, Medium, Large' | split: ',' %}
{% assign existing_size_tags = size_tags | where_exp: "tag", "collection.tags contains tag | strip" %}
{% assign size_count = existing_size_tags | size %}
<ul class="subnav clearfix" {% if size_count <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
    <label>Size</label>
    <hr class="hr--sidebar">
    {% for t in size_tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
        <li {% unless current_tag %}class="active"{% endunless%}>
          {{ tag | link_to_remove_tag: tag }}
        </li>
      {% elsif collection.tags contains tag %}
        <li>
          {{ tag | link_to_tag: tag }}
        </li>
      {% endif %}
    {% endfor %}
  </li>
</ul>

{% comment %} 价格区间筛选组（修正变量名，避免横线） {% endcomment %}
{% assign price_tags = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
{% assign existing_price_tags = price_tags | where_exp: "tag", "collection.tags contains tag | strip" %}
{% assign price_count = existing_price_tags | size %}
<ul class="subnav clearfix" {% if price_count <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
    <label>Price Range</label>
    <hr class="hr--sidebar">
    {% for t in price_tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
        <li {% unless current_tag %}class="active"{% endunless%}>
          {{ tag | link_to_remove_tag: tag }}
        </li>
      {% elsif collection.tags contains tag %}
        <li>
          {{ tag | link_to_tag: tag }}
        </li>
      {% endif %}
    {% endfor %}
  </li>
</ul>

关键修改点说明 #

• 给每个筛选组的标签列表单独命名（比如colour_tags），避免不同组之间的变量覆盖；
• 使用where_exp筛选出集合中实际存在的标签，得到existing_xxx_tags数组，确保我们统计的是真实存在的标签数量；
• 用existing_xxx_tags | size得到有效标签数量，作为判断隐藏的依据；
• 修正了价格区间的变量名（把price-range改成price_count），因为Liquid不允许变量名包含横线这类特殊字符。

这样修改后，当某个筛选组对应的标签在集合中一个都不存在时，对应的xxx_count就会是0，筛选区域就会自动隐藏啦。

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