faceted-navigation

多面导航

概述

构建一个可筛选的商品列表页（PLP），让购物者可以同时按多个属性缩小结果范围——尺码、颜色、品牌、价格区间、评分——并保持 URL 同步，以便分享筛选条件、添加书签，并让搜索引擎抓取。对于 SKU 超过 50 个的商品目录，良好的多面导航能显著提升转化率。

何时使用此技能

• 当商品目录超过约 50 个 SKU，且仅靠浏览导航会让购物者感到不便时
• 构建或重新设计品类／系列列表页时
• SEO 需要搜索引擎可抓取的多面 URL 时（例如，/shoes/running?color=black&size=10）
• 替换会导致后退按钮失效的旧版多面筛选实现时
• 实现 Algolia InstantSearch 或基于 Elasticsearch 的自定义多面筛选层时

核心说明

步骤 1：确定商家的平台并选择合适的方案

平台	推荐方案	原因
Shopify	启用原生系列筛选（Online Store 2.0 主题）+ 安装 Search & Discovery 应用（免费）	Dawn、Sense 和其他 OS2.0 主题支持通过 Storefront API 实现原生店面筛选；Search & Discovery 可在管理后台添加同义词、提升规则和筛选配置
WooCommerce	安装 FiboSearch（付费，$49/年）或 WooCommerce Product Filters（免费）插件	FiboSearch 提供 AJAX 驱动的多面筛选，包括价格滑块、颜色样本和库存筛选；免费的 Product Filters 插件支持带 URL 状态的基本属性筛选
BigCommerce	在 Storefront → Search 设置中启用 Faceted Search（Cornerstone 和大多数主题内置）	BigCommerce Faceted Search 是平台原生功能——在管理后台配置要显示为筛选项的商品属性；无需安装应用
Custom / Headless	使用 Algolia InstantSearch 或 Elasticsearch + URL 状态管理进行构建	可全面控制筛选逻辑、析取筛选和计数实时性；请参阅下方的实现详情

步骤 2：在平台上配置筛选项

---

Shopify

使用 Search & Discovery 应用（推荐）：

1. 从 Shopify App Store 安装 Search & Discovery（免费，由 Shopify 提供）
2. 前往 Apps → Search & Discovery → Filters
3. 点击 Add filter，选择要用作筛选项的商品属性（例如，Color、Size、Brand、Price）
4. 拖动以调整筛选项顺序——将最常用的放在前面
5. 将 Availability 和 Price 筛选设为默认显示；折叠特定变体的筛选项
6. 在 Online Store → Themes → Customize 中，确保主题的系列模板已在侧边栏或抽屉中启用 Filters 区块

主题级筛选配置（Dawn 主题）：

1. 前往 Online Store → Themes → Customize
2. 导航至系列页面模板
3. 在侧边栏中点击 Product grid，启用 Enable filtering 和 Enable sorting
4. 将 Filter layout 设为 Drawer（推荐用于移动设备）或 Sidebar（桌面设备）

对于 Shopify Plus： 使用 Shopify Flow，在添加新商品时自动为商品添加可筛选属性标签。

---

WooCommerce

方案 A：FiboSearch（推荐用于高级筛选）：

1. 从 WordPress.org 或插件市场安装 FiboSearch – AJAX Search for WooCommerce
2. 前往 FiboSearch → Settings → Filters 并启用筛选栏
3. 配置要显示为分面筛选的属性：产品类别、价格范围、自定义属性（例如 Color、Size）和库存状态
4. 为每个属性将 Filter style 设置为复选框列表或颜色色块
5. 启用 AJAX filtering，以便无需重新加载页面即可更新结果
6. 通过 Appearance → Widgets → Shop Sidebar 放置筛选小工具，或将其添加到 Gutenberg 区块中

方案 B：WooCommerce Product Filters（免费）：

1. 从 WordPress.org 安装
2. 前往 Products → Filters → Add New Filter Group
3. 添加以下筛选条件：类别、属性（例如 Color、Size）、价格范围、产品标签、库存状态
4. 在商店页面侧边栏或产品网格上方放置筛选短代码 [woof]

URL 状态： 两款插件都会将启用的筛选条件写入 URL 查询参数，使结果可以分享和加入书签。

---

BigCommerce

1. 在 BigCommerce 控制面板中前往 Storefront → Search
2. 在 Faceted Search 下将其切换为 On
3. 选择要显示为分面筛选的产品字段：Brand、Category、Price、Rating 以及任何自定义的 Product Custom Fields
4. 设置每个分面显示的值的最大数量，超过后会显示“Show more”链接
5. 对于价格分面，配置价格范围区间（例如，$0-$25、$25-$50、$50-$100）
6. 在主题设置中（Storefront → My Themes → Customize）配置筛选侧边栏布局和移动端抽屉行为

注意： 分面搜索需要基于 Stencil 的主题（Cornerstone 和大多数现代 BigCommerce 主题）。旧版 Blueprint 主题不支持此功能。

---

自定义 / 无头架构

对于无头商店，请使用搜索后端实现由 URL 状态驱动的筛选：

URL 状态架构 — 所有启用的筛选条件都存放在查询参数中：

/products/shoes?brand=Nike&brand=Adidas&color=black&size=10&price_min=50&price_max=150&sort=price_asc&page=1

解析并构建 URL 状态：

// lib/facetUrl.js
export function parseFiltersFromUrl(searchParams) {
  const filters = {};
  for (const [key, value] of searchParams.entries()) {
    if (['sort', 'page', 'q'].includes(key)) continue;
    if (!filters[key]) filters[key] = [];
    filters[key].push(value);
  }
  return filters;
}

export function buildUrlFromFilters(filters, sort, page) {
  const params = new URLSearchParams();
  for (const [facetKey, values] of Object.entries(filters)) {
    values.forEach(v => params.append(facetKey, v));
  }
  if (sort) params.set('sort', sort);
  if (page && page > 1) params.set('page', String(page));
  return `?${params.toString()}`;
}

使用析取分面筛选的 Algolia 查询（同一分面内为 OR，分面之间为 AND）：

const result = await index.search(query ?? '', {
  facets: ['brand', 'color', 'size', 'price_range'],
  // facetFilters = OR within a facet group, AND between groups
  facetFilters: Object.entries(filters)
    .filter(([k]) => !['price_min', 'price_max'].includes(k))
    .map(([key, values]) => values.map(v => `${key}:${v}`)),
  filters: [
    filters.price_min ? `price >= ${filters.price_min[0]}` : null,
    filters.price_max ? `price <= ${filters.price_max[0]}` : null,
  ].filter(Boolean).join(' AND '),
  hitsPerPage: 24,
  page: page - 1,
});

切换筛选条件并推送 URL 状态：

function toggleFilter(facetKey, value, currentFilters, sort) {
  const current = currentFilters[facetKey] ?? [];
  const next = current.includes(value)
    ? current.filter(v => v !== value)
    : [...current, value];
  const updated = next.length
    ? { ...currentFilters, [facetKey]: next }
    : (({ [facetKey]: _, ...rest }) => rest)(currentFilters);
  // Push new URL — each filter change gets its own history entry for back-button support
  window.history.pushState({}, '', buildUrlFromFilters(updated, sort, 1));
  return updated;
}

步骤 3：配置移动端筛选体验

在移动端，筛选面板应显示为由“Filter”按钮触发的底部抽屉，而不是占据半个屏幕的常驻侧边栏。

• Shopify（Dawn）： 在主题自定义工具中将 Filter layout 设置为 Drawer — 这已是移动端默认设置
• WooCommerce（FiboSearch）： 在 FiboSearch 设置中启用 Mobile filter button；插件会添加一个可折叠的筛选面板
• BigCommerce： 在主题设置中启用 Filter drawer on mobile；Cornerstone 原生支持此功能
• 自定义： 在 640px 以下的屏幕上，将筛选条件渲染到 position: fixed; bottom: 0 抽屉中；通过“Filter (N)”按钮触发，其中 N 为启用的筛选条件数量

步骤 4：添加启用的筛选条件标签和清除控件

所有平台都应在产品网格上方显示可关闭的已应用筛选条件标签：

• Shopify（Search & Discovery）： OS2.0 筛选区块内置启用的筛选条件标签 — 在主题自定义工具中启用它们
• WooCommerce： FiboSearch 默认显示启用的筛选标签；添加 [woof_active_filters] 短代码以单独显示它们
• BigCommerce： Cornerstone 会自动显示启用的细化条件；如果模板中缺少 Active Facets 区块，请添加它
• 自定义： 根据 URL 筛选状态渲染标签；每个标签都有一个 × 按钮，调用 toggleFilter 将其移除

最佳实践

• 将筛选状态编码到 URL 中 — 不要只将已启用的筛选条件存储在 JavaScript 状态中；URL 是分享、收藏书签和处理后退按钮行为的真实来源
• 在同一组内使用析取式分面 — 选择 Nike 和 Adidas 后，应显示任一品牌的商品，而不是空的交集
• 在每次响应中返回分面计数 — 计数必须反映当前筛选上下文，而非全局商品目录
• 将分面溢出限制为前 10 个值 — 显示“显示更多”切换项，避免让移动端用户应接不暇
• 对价格范围滑块使用防抖 — 仅在鼠标松开或触摸结束时提交范围，而不是每次滑动时都提交
• 提供“清除全部”选项 — 只要有任何筛选条件处于启用状态，就始终显示

常见问题

问题	解决方案
后退按钮会重新加载页面，而不是移除上一个筛选条件	每次筛选条件变更时使用 history.pushState（而非 replaceState）
首次选择筛选条件后，分面计数变得过时	每次筛选条件变更时重新获取分面计数，使用 Algolia 析取式分面或 Search & Discovery 内置的计数刷新功能
移动端筛选面板遮挡内容	在移动端使用抽屉式面板或模态框，并通过“筛选”按钮触发；屏幕宽度低于 640px 时，绝不要显示侧边栏
分面 URL 导致 SEO 重复内容	为非主要分面组合添加 rel="noindex" 或规范链接标签；此项可在 Shopify 的 Search & Discovery SEO 设置中配置
价格范围滑块的两个滑块重叠	每次变更时，将最大值滑块的最小值限制为当前最小值 + 步长，并将最小值滑块的最大值限制为当前最大值 - 步长

相关技能

• @search-autocomplete
• @product-categorization
• @accessibility-commerce
• @product-page-design