页面模块 · 指南
集合浏览与筛选模块：结果、筛选、排序与翻页
集合浏览与筛选模块如何在集合页与搜索结果页中组织大批量商品结果、筛选条件、排序口径与翻页位置，让筛选状态可由 URL 重建、可分享、可返回，并处理空结果、结果计数与可抓取边界。
集合浏览与筛选模块让顾客在一个较大的商品集合（集合页或搜索结果页）里，用筛选、排序和翻页逐步缩小并遍历结果。它回答“这一批里有哪些”；把候选缩小成“哪一个适合我”是商品选型模块的任务，两者可以先后出现，但对象和退出条件不同。
模块 = 信息来源 × 展现或交互 × 页面语境：集合浏览与筛选 = 结果集合与筛选定义 × 筛选、排序、翻页交互 × 集合页或搜索结果页
先确定模块在完成什么任务
顾客的问题是“这个范围里有什么”“能不能按我的条件排除”“刚才看到哪里了”。浏览对象通常是商品；启用变体级筛选后，卡片展示的是匹配条件的变体，价格、图片和链接必须与之一致。
| 维度 | 集合浏览与筛选 | 商品选型 |
|---|---|---|
| 候选规模 | 从几十到成千，需要分页或加载更多 | 已缩小到少量，可以并排比较 |
| 退出条件 | 找到值得细看的商品，进入详情页 | 在共同维度上做出一个选择 |
| 主要交互 | 筛选、排序、翻页 | 比较、推荐、选择状态 |
| 状态载体 | URL（结果必须能被重建） | 页面内的比较对象与高亮项 |
进入前已知的信息决定起点：从导航进入的是一个商品分类对应的集合；从搜索进入的是查询词（见站内搜索模块）；从外部链接进入的可能已带筛选参数，模块必须能读出并如实显示这些条件。
信息来源与输入
| 输入 | 来源 | 最低要求 |
|---|---|---|
| 结果集合 | 集合成员或搜索查询（资源数据） | 只含当前渠道、市场下可见的商品；成员关系问题见集合与发布 |
| 筛选项定义 | 商品属性（类型、品牌、标签）、变体选项、价格、库存状态、自定义字段 | 名称、类型（多选、范围、布尔）、组合逻辑、显示顺序；名称使用顾客语言 |
| 筛选值与计数 | 运行时，由当前结果计算 | 只显示对当前结果有意义的值；计数不手写、不长期缓存 |
| 排序选项 | 平台或后台配置 | 显示名称与实际口径一致，声明默认排序 |
| 当前状态 | URL 参数 | 筛选、排序、页码、搜索词都能由 URL 重建 |
| 商品卡数据 | 商品与变体（价格、可售状态、主图） | 随所选变体更新，不显示另一变体的状态 |
| 空结果出口 | 内容类型与页面 | 清除条件、上级分类、搜索或客服入口 |
筛选项只应来自可靠、可枚举的数据。“适合送礼”这类主观标签若没有明确的维护规则，不应做成硬筛选；推荐与主推见特色商品。
筛选状态、URL 与可抓取
- URL 是唯一的状态来源：复制地址给他人得到同一结果，浏览器后退回到上一个筛选状态，刷新不丢条件。滚动位置的恢复是本站的验收目标，不来自任何官方要求。
- Google 对分面导航的说明（Managing crawling of faceted navigation URLs，核验于 2026-09-29）：每种筛选组合通常产生独立 URL，可能造成过度抓取。不需要索引筛选 URL 时，页面给出的做法包括用 robots.txt 禁止抓取，或使用 URL 片段（
#）承载筛选，页面称片段方式对抓取没有影响。需要索引时，页面要求使用标准的&分隔参数，保持筛选的逻辑顺序固定且不出现重复条件，并对没有结果的组合返回 HTTP 404。 - 分页与加载更多（分页与增量加载）：页面写明每一页应有独立 URL，不用片段标识页码，每页使用自己的 canonical，页与页之间使用
<a href>链接，并说明 Google 已不再使用rel=next/prev。无限滚动与“加载更多”若没有对应的可访问分页 URL，后续商品对抓取和分享都不可见。 - 决策点：哪些筛选组合值得成为可被索引的落地页（例如“品类 + 材质”）应按真实搜索需求逐个决定；未决定前默认不开放索引。Google 建议无结果组合返回 404，而空状态又需要给顾客出口，两者可以并存（状态码 404 加带出口的页面），但这是本文的设计推论，Google 页面没有讨论，Shopify 主题能否做到未核验。
- 主题实际输出的 robots、canonical 与 noindex 未核验，见 Shopify 店面 SEO 框架。
状态与退化
| 状态 | 处理 |
|---|---|
| 零项（无结果） | 说明当前条件下没有商品，列出已选条件并可逐项移除，提供“清除全部”、上级分类和搜索或客服入口；不用无关商品冒充结果 |
| 一项 | 直接显示该商品，保留条件与清除入口，不显示“第 1 页，共 1 页” |
| 多项 | 显示结果总数；数量较大时分页或加载更多，并保持排序稳定 |
| 加载 | 筛选更新期间保留旧结果与焦点，标记忙碌状态；取消过期请求，较早的响应不得覆盖较新条件 |
| 错误 | 保留当前条件与上一次成功的结果，说明未更新并提供重试；不显示空结果 |
| 过期 | 商品在浏览期间售罄或下架时，刷新后结果与计数同步变化；不在前端长期缓存库存 |
| 不可用 | 筛选值对应结果为 0 的处理需统一：隐藏，或显示为不可选并说明；不允许显示可点击但必然无结果的值 |
| 跨市场差异 | 结果集合、价格与可售状态随市场变化，筛选值与计数必须按当前市场计算 |
| 无 JavaScript | 筛选与翻页仍可通过普通链接或表单提交完成，用 URL 表达状态 |
可选展现与交互
- 筛选面板：桌面常用侧栏，配合 Accordion 收纳多个筛选组；移动端用 Drawer 承载完整筛选，并在页面上保留已选条件与结果数。筛选组很少（三组以内）时直接展开，不必折叠。
- 已选条件：以可逐项移除的标签显示在结果上方，移除按钮的名称写明移除哪一个条件。
- 结果布局：默认用 Grid；参数密集、需要逐行扫读的品类可提供 List。布局切换不能改变结果集合。
- 翻页方式：需要可预期位置与可分享时用分页；连续浏览更适合加载更多。选择判据见 Pagination。
- 禁用条件：结果少于一页时不显示分页与排序；没有可靠数据支撑的筛选项不显示；不在筛选控件里放促销弹窗。
页面组合中的位置
主要出现在集合页与搜索结果页。集合页前面是集合标题与说明，后面是分页和相关内容；搜索结果页前面是搜索框与词的回显。首页、商品页购买区和活动落地页不应出现完整的筛选面板；活动页的少量商品用普通网格即可。同一页上不要并存两套排序或两个结果计数。页面组合规则见页面组合。
无障碍与性能
- 筛选控件使用带可见标签的原生表单元素；同一筛选组用
fieldset与legend表达分组。 - 自动应用与提交：WCAG 2.2 SC 3.2.2 On Input（A）规定改变控件设置不应自动引起上下文变化，除非事先告知用户。勾选后立即刷新结果若会改变页面上下文，应提供“应用”按钮或在使用前说明该行为（依据 Understanding SC 3.2.2，核验于 2026-09-29）。
- 结果数量通知：WCAG 2.2 SC 4.1.3 Status Messages（AA）要求状态消息可通过角色或属性被辅助技术识别而不获得焦点；该页面举例“18 results returned”这类不抢焦点的完成提示属于状态消息（Understanding SC 4.1.3）。结果列表本身不是状态消息，应另设简短的结果数量文字。
- 焦点留在用户正在操作的控件上，不因刷新回到页首；这是本站的验收要求，不是官方条文。
- 价格区间若用双滑块，需要同时提供数字输入等不依赖拖拽的方式（对应 WCAG 2.2 SC 2.5.7 Dragging Movements，本文只核对了编号与名称，未展开判定细则）。
- 商品图使用固定比例预留空间，首屏以外的图片延迟加载；筛选更新只请求结果区域所需的数据。
映射到 Shopify
以下核验于 2026-09-29，来源为 shopify.dev 与 help.shopify.com 官方页面。
- 筛选来源：帮助中心说明筛选在 Search & Discovery 应用的 Filters 中配置。标准筛选包括 Availability、Category、Price、Product type、Tags、Vendor；自定义筛选包括商品选项、商品 metafield、分类 metafield、变体 metafield 与标准商品属性。同一页写明只显示适用于当前集合或搜索结果的筛选值，且需要兼容的主题或使用筛选 Liquid API、Storefront API 的自定义店面。
- 组合逻辑：shopify.dev 说明不同筛选之间为 AND，同一筛选内的多个值为 OR。
- 数值限制（来源页与核验日期见上）：帮助中心写明每店最多 25 个筛选，向顾客最多显示 100 个筛选值，一个筛选组最多 200 个不同值、每店最多 1,000 个筛选组；含超过 5,000 个商品的集合不显示筛选；产生超过 100,000 条结果的搜索不显示筛选。Liquid 文档另写
collection.filters在商品超过 5,000 时为空，search.filters在结果超过 1,000 个商品时为空。搜索侧两页数值不一致（100,000 与 1,000），未核实原因，需以真实店铺实测为准。 - URL 参数：格式为
filter.filter_scope.attribute[.attribute_scope]=value，范围p（商品）或v（变体），例如filter.p.product_type=shoes、filter.v.option.color=red、filter.v.price.lte=5。多个值既可用逗号，也可重复参数。应用筛选后地址栏反映筛选；应用变体级筛选时，商品的featured_media与url会更新为第一个匹配变体。 - 筛选对象：Liquid
filter对象提供label、param_name、type（boolean、list、price_range）、operator、presentation（image、swatch、text）、active_values、inactive_values、url_to_remove等属性，可用于渲染已选条件与移除链接。 - 排序：
collection.sort_by取自 URL 参数sort_by，无参数时为nil；可选项在collection.sort_options，默认排序在后台集合页设置；sort_option的显示名称可在语言编辑器修改，value用于设置排序参数。搜索结果的sort_by取值页面列出relevance（默认）、price-ascending、price-descending。集合sort_by的完整取值列表未在所读页面中找到，未核验。 - 结果计数：
collection.products_count为当前视图的商品总数，all_products_count为集合总数，含被筛掉的商品。 - 分页：
paginate标签每页数量范围 1 到 250，最多分页到第 25,000 项，可用default_pagination过滤器生成导航。集合模板页与collection.products说明则写每页上限 50。两处上限不一致，未核实原因，实施前需实测。Storefront API 使用游标分页，单次最多取 250 项（GraphQL 分页）。 - Storefront API 筛选：
ProductFilter覆盖商品类型、品牌、变体选项、价格、可售状态、分类与 metafield；不同筛选以 AND 组合，同一筛选的多个值以 OR 组合；页面说明价格筛选不支持传入多个区间。 - 主题层面：Horizon 4.2.0 的集合与搜索结果实现见Horizon 集合与搜索，该文为固定版本源码解读，未运行验证。
- 固定版本实现：见Dawn 筛选与分页、Horizon 筛选与分页；页面级组成见品类集合页配方。
- 未核验：各主题输出的 robots、canonical、空结果状态码；筛选 URL 在不同 Markets 下的行为；筛选值计数的刷新时延。
验证一次集合浏览与筛选
- 在一个含数百商品的集合上依次选择两个不同筛选与同一筛选的两个值，核对结果符合 AND / OR 逻辑，结果数与计数一致。
- 复制地址在无痕窗口打开，确认结果、已选条件、排序与页码相同；使用后退与前进，确认状态逐步回退。
- 选出零结果的组合，确认空状态说明条件、可逐项移除并有出口；记录该 URL 的 HTTP 状态码。
- 更换市场与语言、把某商品设为售罄或不可见，确认结果、计数与价格同步。
- 只用键盘操作全部筛选与移除，并用读屏软件确认结果数量被播报且焦点未跳走；关闭 JavaScript 再测一次。
- 翻到第二页与最后一页，确认每页有独立可访问 URL，商品不重复、不遗漏。
平台正文
该机制的权威平台说明见 Search & Discovery；本文只写在当前内容或页面语境下的用法。
待继续完善
- 缺少真实店铺中的空结果状态码、筛选 URL 抓取表现与两处数值差异的实测；
- 尚未结合真实搜索词与筛选使用日志，决定哪些筛选组合应开放索引。