Shopify店铺多标签过滤功能异常问题求助

开发者阿泽

2026-7-20

Shopify多标签筛选功能实现问题

问题背景

需要给Shopify店铺实现多标签筛选，产品标签分为脸型、镜框尺寸、镜框形状三类，要求三个筛选器可同时生效。但当前仅单个标签筛选有效，选择第二个标签时会覆盖第一个的筛选结果：

主题原生不支持筛选，已安装Search & Discovery应用但仅能添加一个标签筛选器，因此手动编写了另外两个筛选器的代码
当前浏览器URL结构：?filter.p.product_type=Acetate+Eyeglasses&filter.p.tag=FRAME+SHAPE_ROUND&filter.p.tag=SIZE_SMALL，无法实现多标签同时筛选
已尝试Shopify文档推荐的逗号分隔格式?filter.p.tag=FRAME+SHAPE_ROUND,SIZE_SMALL，以及AND连接、数组格式URL等方式，均未解决问题

当前代码

筛选器HTML片段

// 获取所有产品标签并去重
<details class="filter-group">
   // 筛选器标题
    <summary class="filter-group-summary">
        <div>
        <span>Frame Size</span>
        </div>
        <div>
        {% render 'armament-icon' with icon: 'arrow-right', classes: "w-10 custom-filter__right-icon" %}
        </div>
    </summary>

   // 镜框尺寸标签复选框
    <div class="filter-group-display">
        <ul class="filter-group-display__list">
        {% for tag in collection.all_tags %}
            {% if tag contains 'SIZE_' %}
                <li class="filter-group-display__list-item pb-2">
                <label for="Filter-{{ forloop.index }}">
                    // 表单提交时将name值放入URL

                    <input type="checkbox"
                        name="filter.p.tag"
                        value="{{ tag }}"
                        id="Filter-{{ forloop.index }}"
                        {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                        data-armada-selector="custom_filter_checkbox"
                    > 
                    {{ tag | remove: "SIZE_" }}
                </label>
                </li>
            {% endif %}
        {% endfor %}
        </ul>
    </div>
</details>

交互逻辑脚本

let collection_handle = '{{collection.handle}}';
 let custom_loader = document.querySelector('#custom_loader');
 let custom_checkbox = document.querySelectorAll('[data-armada-selector="custom_filter_checkbox"]');
 let custom_filter_form = document.querySelector('[data-armada-selector="custom_filter-form-container"]');
 let custom_active_filters = document.querySelector('[data-armada-selector="active-filters"]');

let queryString;

custom_checkbox.forEach(checkbox => 
      checkbox.addEventListener("change", (e) => {
        // 提取表单数据并转为查询参数
        queryString = new URLSearchParams(new FormData(custom_filter_form)).toString();
        custom_loader.classList.remove('hidden')

        let fetch_url;
        if(window.location.href.includes("?sort") || window.location.href.includes("&sort")) 
        {
          const querySortString = window.location.search;
          const urlParams = new URLSearchParams(querySortString);
          const sort_by_value = urlParams.get('sort_by')
        
          fetch_url = '/collections/{{ collection.handle }}?' + queryString + "&sort_by="+sort_by_value
        }
        else fetch_url = '/collections/{{ collection.handle }}?' + queryString;
        
        fetch(fetch_url)
          .then(response => response.text())
          .then(data => {
            let html_div = document.createElement('div');
            let active_filter_div = document.createElement('div');
            
            html_div.innerHTML = data;
            active_filter_div.innerHTML = data;
            
            let html_dom = html_div.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML;
            let active_filter_html_dom = html_div.querySelector('[data-armada-selector="active-filters"]').innerHTML;
            
            // 用接口返回的网格替换当前页面的网格区域
            document.querySelector('[data-armada-selector="collection-grid-main"]').innerHTML = html_dom;
            document.querySelector('[data-armada-selector="active-filters"]').innerHTML = active_filter_html_dom;
            
            // 不刷新页面更新URL
            history.replaceState(null, null, fetch_url);
            custom_loader.classList.add('hidden');
          })
          .catch(error => console.error('Error:', error))
          .finally(() => custom_loader.classList.add('hidden'));
      })
    )

解决方案

核心问题分析

问题出在URL参数构建逻辑：当多个复选框使用相同的name="filter.p.tag"时，URLSearchParams会自动生成重复的key参数（filter.p.tag=value1&filter.p.tag=value2），但Shopify集合筛选接口不支持这种格式，仅接受逗号分隔的单个filter.p.tag参数值。

代码修改步骤

区分不同类别标签的name属性
给三类筛选器的复选框设置不同的临时name，避免参数冲突：

<!-- 镜框尺寸复选框 -->
<input type="checkbox"
    name="size_tag"
    value="{{ tag }}"
    id="Filter-{{ forloop.index }}"
    {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
    data-armada-selector="custom_filter_checkbox"
>

<!-- 镜框形状复选框同理设置name="shape_tag"，脸型设置name="face_shape_tag" -->

重构URL参数生成逻辑
在脚本中手动收集所有选中的标签，合并为逗号分隔的字符串，生成符合Shopify要求的参数格式：

checkbox.addEventListener("change", (e) => {
  // 收集所有选中的标签
  const selectedTags = [];
  document.querySelectorAll('input[name="size_tag"]:checked').forEach(el => selectedTags.push(el.value));
  document.querySelectorAll('input[name="shape_tag"]:checked').forEach(el => selectedTags.push(el.value));
  document.querySelectorAll('input[name="face_shape_tag"]:checked').forEach(el => selectedTags.push(el.value));

  // 构建查询参数
  const params = new URLSearchParams();
  // 保留原有product_type参数
  const existingParams = new URLSearchParams(window.location.search);
  const productType = existingParams.get('filter.p.product_type');
  if(productType) params.append('filter.p.product_type', productType);

  // 添加合并后的标签参数
  if(selectedTags.length > 0) {
    params.append('filter.p.tag', selectedTags.join(','));
  }

  // 保留排序参数
  const sort_by_value = existingParams.get('sort_by');
  if(sort_by_value) params.append('sort_by', sort_by_value);

  queryString = params.toString();
  custom_loader.classList.remove('hidden')

  const fetch_url = `/collections/${collection_handle}?${queryString}`;
  // 后续fetch逻辑保持不变
})

恢复页面加载时的复选框选中状态
在HTML中根据URL的filter.p.tag参数，自动勾选对应复选框：

{% assign active_tags = filter.p.tag | split: ',' %}
<input type="checkbox"
    name="size_tag"
    value="{{ tag }}"
    id="Filter-{{ forloop.index }}"
    {% if tag in active_tags %}checked{% endif %}
    {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
    data-armada-selector="custom_filter_checkbox"
>

效果验证

修改后URL会变为?filter.p.product_type=Acetate+Eyeglasses&filter.p.tag=FRAME+SHAPE_ROUND,SIZE_SMALL，符合Shopify筛选接口要求，三个筛选器的标签将同时生效，实现多条件叠加筛选。

内容的提问来源于stack exchange，提问作者Hiba abdel karim

Shopify店铺多标签过滤功能异常问题求助

问题背景 #

当前代码 #

筛选器HTML片段 #

交互逻辑脚本 #

解决方案 #

核心问题分析 #

代码修改步骤 #

效果验证 #