如何在Shopify原生筛选器中实现AND逻辑？

• 原生URL参数限制：Shopify的filter.p.tag参数默认用逗号分隔是OR逻辑，重复参数或者+号都无法实现AND匹配，这是平台原生筛选的设计限制。

• 可行解决方案：

  1. 使用智能集合（Smart Collections）：
     在Shopify后台创建智能集合，设置条件为「标签包含gold」并且「标签包含diamond」，访问该集合的URL即可直接获取同时带有两个标签的产品。
  2. 自定义前端代码筛选：
     在主题的集合页面模板中添加自定义JS逻辑，当用户选中多个标签时，通过JS过滤DOM中同时匹配所有选中标签的产品：

     // 示例逻辑：假设标签选择器类为.tag-filter，产品项类为.product-item，产品标签类为.product-tag
     document.querySelectorAll('.tag-filter').forEach(checkbox => {
       checkbox.addEventListener('change', () => {
         const selectedTags = Array.from(document.querySelectorAll('.tag-filter:checked')).map(el => el.value);
         document.querySelectorAll('.product-item').forEach(item => {
           const productTags = Array.from(item.querySelectorAll('.product-tag')).map(tag => tag.textContent.trim());
           const matchesAll = selectedTags.every(tag => productTags.includes(tag));
           item.style.display = matchesAll ? 'block' : 'none';
         });
       });
     });
     

  3. 借助第三方筛选工具：
     可在Shopify应用商店内选择支持AND逻辑标签筛选的第三方应用，这类工具通常能直接实现多标签的精准匹配，无需自行开发代码。

注意：目前Shopify原生的URL参数方式无法实现标签的AND逻辑筛选，上述方案是当前可行的替代方法。

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