Shopify自定义主题：标签筛选逻辑从AND改为OR的适配需求

问题根源 #

当前系统通过?constraint=history+philosophy传递多标签参数，Liquid端默认校验产品是否同时包含所有选中标签（AND逻辑），导致筛选结果仅展示交集而非并集。直接替换分隔符为|无效，因为核心逻辑未修改，且|在URL中会被编码，Liquid拆分逻辑也未适配。

解决方案：分两步修改代码 #

1. 修正JavaScript参数传递逻辑

将标签拼接的分隔符从+改为逗号（,），确保参数格式变为?constraint=history,philosophy：

// 替换原DELIMITER定义
const DELIMITER = ',';

// 收集选中标签并拼接参数
const selectedTags = $('.filter-tag:checked').map(function() {
  return $(this).val();
}).get();

// 生成查询参数（无选中标签时清空参数）
const queryParam = selectedTags.length 
  ? `constraint=${selectedTags.join(DELIMITER)}` 
  : '';

// 更新URL触发筛选
window.location.search = queryParam;

2. 修正Liquid产品筛选逻辑

修改集合页的产品循环代码，将“校验所有标签匹配”改为“校验任意标签匹配”：

{% assign constraints = request.params.constraint | default: '' | split: ',' %}
{% assign has_active_filters = constraints.size > 0 and constraints[0] != '' %}

{% for product in collection.products %}
  {% if has_active_filters %}
    {% assign is_match = false %}
    {% for tag in constraints %}
      {% if product.tags contains tag %}
        {% assign is_match = true %}
        {% break %} <!-- 找到匹配标签后立即跳出循环，提升性能 -->
      {% endif %}
    {% endfor %}
    {% if is_match %}
      <!-- 渲染产品卡片（替换为你的产品模板片段） -->
      {% include 'product-card', product: product %}
    {% endif %}
  {% else %}
    <!-- 无筛选条件时渲染全部产品 -->
    {% include 'product-card', product: product %}
  {% endif %}
{% endfor %}

关键说明 #

• 选择逗号作为分隔符：逗号是URL安全字符，无需额外编码，Liquid拆分逻辑更稳定。
• 逻辑反转：默认设置is_match = false，只要产品包含任意一个选中标签就设为true，并通过{% break %}终止循环减少不必要的计算。
• 空值处理：当无选中标签时，直接渲染全部产品，避免出现空白页面。

内容的提问来源于stack exchange，提问作者Yusuf Ali Bozkır