Shopify如何让集合页筛选标签显示顺序与后台手动排序的商品顺序一致

解决方案 #

核心逻辑：collection.all_tags 天生按字母顺序排序，和你后台手动调整的商品排序没有关联。我们可以先遍历当前集合已排序的商品列表，按商品出现的顺序收集所有size-前缀的标签并自动去重，再基于这个自定义顺序的标签列表生成下拉选项即可，完全不需要硬编码标签。

修改后的代码如下：

<div class="four-columns">
    Package size:
    <select class="coll-filter" id="sizeFilter">
      <option class="size-all" value="">All</option>
      {% comment %} 第一步：先按商品排序收集size标签，自动去重 {% endcomment %}
      {% assign sorted_size_tags = '' | split: '' %}
      {% for product in collection.products %}
        {% for tag in product.tags %}
          {% if tag contains 'size-' %}
            {% unless sorted_size_tags contains tag %}
              {% assign sorted_size_tags = sorted_size_tags | push: tag %}
            {% endunless %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% comment %} 第二步：遍历自定义排序的标签生成选项 {% endcomment %}
      {% for tag in sorted_size_tags %}
        {% assign tagName = tag | remove: 'size-' %}         
        {% if current_tags contains tag %}
        <option class="{{tag}}" value="{{ tag | handle }}" selected>{{ tagName }}</option>
        {% else %}
        <option class="{{tag}}" value="{{ tag | handle }}">{{ tagName }}</option>
        {% endif %}                     
      {% endfor %}
    </select>
  </div>

适配优化说明 #

• 标签顺序完全和商品出现顺序保持一致，同一个标签多次出现在后续商品中时，只会保留第一次出现的排序位置
• 自动适配不同集合的商品排序与对应尺寸标签，无需手动修改标签列表
• 如果需要过滤掉无库存商品的标签，只需把{% for product in collection.products %}修改为{% for product in collection.products | where: 'available', true %}即可

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