如何在Liquid中实现产品多标签组合筛选功能？

现有代码问题 #

• 所有下拉选择器的id和name属性完全重复，不符合HTML规范，无法同时获取多个维度的选中值
• 每个选项的跳转链接仅携带单个标签参数，没有拼接其他维度的选中标签，因此只能生效单个筛选条件

实现逻辑 #

Shopify的多标签筛选URL规则为 /collections/[合集handle]/[标签1]+[标签2]+[标签3]，只需要把所有选中的标签用+拼接后跳转即可，具体修改如下：

1. 修改Liquid模板代码 #

把原来的三个下拉修改为以下结构，仅在option的value里存标签值，不直接放完整链接：

<!-- 颜色筛选 -->
<label>Shop by color</label>
<select class="tag-filter">
  {% assign tags = 'Red, Green, Blue' | split: ',' %}
  <option value="">All</option>
  {% for t in tags %}
    {% assign tag = t | strip %}
    <option value="{{ tag | handle }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
  {% endfor %}
</select>

<!-- 尺寸/形状筛选 -->
<label>Shop by size</label>
<select class="tag-filter">
  {% assign tags = 'Round, square, geometric' | split: ',' %}
  <option value="">All</option>
  {% for t in tags %}
    {% assign tag = t | strip %}
    <option value="{{ tag | handle }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
  {% endfor %}
</select>

<!-- 材质筛选 -->
<label>Shop by material</label>
<select class="tag-filter">
  {% assign tags = 'White, leopard, Satin' | split: ',' %}
  <option value="">All</option>
  {% for t in tags %}
    {% assign tag = t | strip %}
    <option value="{{ tag | handle }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
  {% endfor %}
</select>

2. 添加JS拼接跳转逻辑 #

在页面底部添加以下JS代码，监听筛选器变化时自动拼接多标签URL跳转：

document.addEventListener('DOMContentLoaded', function() {
  const filterElements = document.querySelectorAll('.tag-filter');
  const collectionHandle = '{{ collection.handle }}';

  // 监听所有筛选器的变化事件
  filterElements.forEach(el => {
    el.addEventListener('change', updateFilterUrl);
  });

  function updateFilterUrl() {
    let selectedTags = [];
    // 收集所有非All的选中标签
    filterElements.forEach(el => {
      const selectedVal = el.value.trim();
      if (selectedVal) {
        selectedTags.push(selectedVal);
      }
    });

    let targetUrl = `/collections/${collectionHandle}`;
    // 有选中标签就拼接成多标签地址
    if (selectedTags.length > 0) {
      targetUrl += `/${selectedTags.join('+')}`;
    }
    // 跳转到目标地址
    window.location.href = targetUrl;
  }
});

修改完成后，同时选择多个维度的筛选条件时，会自动把所有选中的标签拼接到URL中，Shopify会自动返回同时符合所有标签条件的产品，实现多条件联合筛选。

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