产品筛选和搜索

先判断问题出现在哪里

在过去，Shopify 的侧边栏筛选器（Filters）只能通过给产品打上一堆杂乱的 Tags（标签）来实现，不仅管理混乱，而且无法实现价格区间的滑动筛选。

核心逻辑是：拥抱原生的 Storefront Filtering API 与 Predictive Search API。

Shopify 官方推出了强大的原生筛选 API。它直接读取产品的标准属性（价格、库存、变体选项）和 Metafields，生成结构化的筛选数据。配合 Section Rendering API，我们可以用极少的 JS 代码，实现无需刷新页面的极速多条件交叉筛选（Ajax Filtering）和搜索下拉联想词（Predictive Search）。

实战步骤

步骤 1：在 Liquid 中渲染筛选表单 (Filter Form)

操作路径：在 sections/main-collection-product-grid.liquid 中编写

Shopify 将当前集合页可用的所有筛选条件，封装在 collection.filters 数组中。

遍历这个数组，渲染出一个包含 Checkbox（复选框）和 Price Range（价格滑动条）的 <form>。

<form id="CollectionFiltersForm">
  {% for filter in collection.filters %}
    <details>
      <summary>{{ filter.label }}</summary>
      {% case filter.type %}
        {% when 'list' %}
          <ul>
            {% for value in filter.values %}
              <li>
                <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" id="Filter-{{ filter.label }}-{{ forloop.index }}" {% if value.active %}checked{% endif %}>
                <label for="Filter-{{ filter.label }}-{{ forloop.index }}">{{ value.label }} ({{ value.count }})</label>
              </li>
            {% endfor %}
          </ul>
        {% when 'price_range' %}
          <!-- 渲染最低价和最高价的输入框 -->
          ...
      {% endcase %}
    </details>
  {% endfor %}
</form>

步骤 2：使用 JS 监听表单变化并拦截默认提交

操作路径：在 assets/facets.js 中编写监听逻辑

当用户勾选了一个“红色”的复选框，表单会触发 change 事件。
拦截表单的默认提交行为。
使用 new FormData(form) 将当前选中的所有条件，序列化为 URL 查询字符串（如 ?filter.v.option.color=Red&sort_by=price-ascending）。

步骤 3：利用 Section Rendering API 获取过滤后的 HTML

操作路径：发送 Fetch 请求并替换 DOM

将上一步生成的查询字符串，拼接到当前集合页的 URL 后面，并加上 &section_id=main-collection-product-grid。
发送 fetch 请求。Shopify 服务器会根据这些筛选条件，在后台执行过滤，并只返回这个 Section 的 HTML 代码（包含过滤后的商品网格和更新后的筛选器状态）。
前端拿到这段 HTML 字符串后，解析它，并将页面上原有的商品网格 innerHTML 替换为新的网格。整个过程无需刷新页面，极其丝滑。
关键一步：使用 history.pushState 将带有筛选参数的 URL 更新到浏览器的地址栏，确保用户刷新页面或分享链接时，筛选状态不会丢失。

步骤 4：实现 Predictive Search (预测性搜索)

操作路径：调用 /search/suggest.json 接口

当用户在顶部搜索框输入 "sh" 时，监听 input 事件（加入防抖 Debounce）。
向 /search/suggest.json?q=sh&resources[type]=product,query 发送请求。
Shopify 会返回匹配的产品列表和搜索建议词。用 JS 将这些数据渲染成一个下拉列表悬浮在搜索框下方。

常见误区与处理方法

误区一：依然使用老旧的 Tag 过滤机制

规避方法：很多老教程会教你通过 URL 拼接 Tag 来实现筛选（如 /collections/all/red+xl）。这在 2026 年是绝对的技术倒退！Tag 过滤不仅性能极差，无法实现“价格区间”筛选，而且当 Tag 数量庞大时，管理起来简直是噩梦。彻底抛弃基于 Tag 的筛选！必须全面拥抱基于 Storefront Filtering API 的原生筛选机制。商家只需在后台的“Search & Discovery”应用中，勾选需要作为筛选条件的变体选项（Options）或元字段（Metafields），前端就能自动渲染出完美的筛选器。

误区二：Ajax 筛选后，商品卡片上的 JS 交互失效

规避方法：这是一个极其经典的 Bug。你在商品卡片上写了一段 JS，用于实现“鼠标悬停切换图片”或“快速加购弹窗”。当页面首次加载时，这些功能完美运行。但当用户勾选了“红色”筛选条件，商品网格被 Ajax 局部替换后，新加载出来的商品卡片上的所有 JS 交互全部失效了！这是因为你最初绑定的事件监听器（Event Listeners）随着旧的 DOM 节点一起被销毁了。在执行完 DOM 替换后，必须重新初始化（Re-initialize）商品卡片上的所有 JS 脚本。或者，更高级的做法是使用“事件委托（Event Delegation）”，将事件监听器绑定在永远不会被替换的父级容器上。

误区三：Predictive Search 没有做防抖处理 (Debounce)

规避方法：用户在搜索框里快速打出 "shoes" 这 5 个字母。如果你没有做防抖处理，你的 JS 会在极短的时间内向 Shopify 服务器发送 5 次独立的 Ajax 请求（s, sh, sho, shoe, shoes）。这不仅极大地浪费了网络资源，而且由于网络延迟的不可控性，最后返回并渲染在下拉列表里的，可能是 "sho" 的结果，而不是 "shoes" 的结果，导致搜索联想错乱。在监听搜索框的 input 事件时，必须包裹一个至少 300 毫秒的防抖函数（Debounce）。只有当用户停止打字 300 毫秒后，才发送最后一次最准确的请求。

FAQ