Shopify/Liquid 分离指定标签并嵌入select组件实现标签筛选

一、颜色标签归集逻辑错误修复 #

你原有代码返回无分隔符拼接字符串的核心原因有4个：

• 判断条件遗漏了Green标签，没有覆盖你列出的全部颜色值
• Liquid的concat过滤器仅支持两个数组之间的拼接，你直接传入逗号字符串属于无效参数，根本不会插入分隔符
• 循环中对标签执行split: '_'是无意义操作，你列出的颜色标签不存在下划线分隔结构，属于冗余逻辑
• Liquid直接输出数组时，默认会把所有元素无缝拼接，不会自动添加分隔符，这就是你看到连续字符串的直接原因

正确的颜色标签归集代码如下，用push往数组追加单个元素，需要分隔字符串时最后用join统一处理即可：

{% comment %} 定义需要提取的目标颜色标签列表 {% endcomment %}
{% assign target_color_list = 'Black,Blue,Colorless,Green,Red,White' | split: ',' %}
{% assign color_tags = '' | split: '' %}

{% for tag in collection.all_tags %}
  {% if target_color_list contains tag %}
    {% assign color_tags = color_tags | push: tag %}
  {% endif %}
{% endfor %}

{% comment %} 需要逗号分隔的字符串时直接调用join，不需要循环内手动拼接 {% endcomment %}
{% assign color_tag_string = color_tags | join: ',' %}

二、select下拉标签筛选实现 #

按照标签筛选的URL规则，只需要把原无序列表的渲染逻辑替换为下拉选项即可，通过onchange事件触发跳转，同时保留选中状态：

<select onchange="if(this.value) window.location.href = this.value">
  <option value="{{ collection.url }}" {% unless current_tags %}selected{% endunless %}>
    全部颜色
  </option>
  {% for tag in color_tags %}
    {% assign filter_url = tag | handleize | prepend: collection.url | append: '/' %}
    <option 
      value="{{ filter_url }}"
      {% if current_tags contains tag %}selected{% endif %}
    >
      {{ tag }}
    </option>
  {% endfor %}
</select>

注意事项 #

• handleize过滤器会把标签转换为URL兼容格式，避免特殊字符导致页面404
• 如果需要实现多标签叠加筛选，只需要在拼接filter_url时把当前已选中的其他标签按+拼接规则追加即可，逻辑和官方列表版筛选完全一致
• 下拉选项的默认文案、样式可以根据自身主题需求调整

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