店面筛选
店面筛选是 theme 中推荐的商品筛选方式,它允许商家 轻松创建 filters,用于筛选合集和搜索结果页面。
Filters 可以基于以下商品和 variant 数据:
- 库存状态
- 价格
- 供应商
- Variant 选项
- 商品 tags
Filters 使用 AND 逻辑,filter 值使用 OR 逻辑。例如,您可以返回特定颜色和特定尺码的商品,或者返回某种颜色或另一种颜色的商品。
应用 filters 后,它们会通过 URL 参数反映在合集 URL 中。
实现店面筛选
使用以下资源了解如何在 theme 中实现店面筛选。
Filter URL 参数
已应用的 filters 会根据 filter 类型通过 URL 参数反映在页面 URL 中,这些 URL 参数有特定结构。
📘 注意
在应用 filters 之前,需要先在 Shoplazza 管理后台中创建。前往在线商店 > 导航。
URL 参数结构
Filter URL 参数由以下组件组成:
| 组件 | 必填 | 说明 |
|---|---|---|
filter |
是 | filter URL 参数的默认命名空间。 |
filter_scope |
是 |
filter 的范围,可以是以下之一:
|
attribute |
是 | filter 所基于的属性。如需了解可用属性,请参阅 Filter 类型。 |
attribute_scope |
否 | option 和 price 属性的属性范围。如需了解更多,请参阅 Variant 专属 filters |
value |
是 | filter 值。如需了解值格式,请参阅 Filter 类型。 |
根据 filter 的 attribute,URL 参数的格式可以是以下之一:
filter.filter_scope.attribute=vale
filter.filter_scope.attribute.attribute_scope=value
例如,如果有以下 filters:
- 基于供应商商品选项的 filter,值为
nero - 基于颜色 variant 选项的 filter,值为
orange
则各自的 URL 参数如下:
filter.p.vendor=nero
filter.v.option.color=orange
多个 filters
您可以组合多个 filters,如下所示:
filter.p.vendor=nero&filter.v.option.color=orange
您也可以对同一 filter 筛选多个值,有两种方式:
- 在单个参数中包含多个值
- 为每个值分别设置参数
filter.v.option.color=orange,deeppink <!-- AND -->
filter.v.option.color=orange&filter.v.option.color=deeppink <!-- OR -->
Filter 类型
Filters 可以在两个级别应用:
商品专属 filters
以下概述了商品专属 filters 及其作为 URL 参数的表现形式:
名称 | 说明 | 参数名称 | 接受的参数值 |
|---|---|---|---|
商品 tags | 基于特定商品 tags 进行筛选 |
| 单个商品 tag 或以 & 符号分隔的商品 tag 列表。 例如: |
供应商 | 基于特定供应商进行筛选。 |
| 单个供应商或以 & 符号分隔的供应商列表。 |
以下是商品专属 filters 完整 URL 参数结构示例:
<!-- 商品 tags -->
filter.p.tag=hot
filter.p.tag=hot&filter.p.tag=flash
<!-- 商品供应商 -->
filter.p.vendor=vendor1
filter.p.vendor=vendor1&filter.p.vendor=vendor2
Variant 专属 filters
以下概述了 variant 专属 filters 及其作为 URL 参数的表现形式:
| 名称 | 说明 | 参数名称 | 接受的参数值 |
|---|---|---|---|
| 库存状态 | 基于 variant 库存状态进行筛选。 | availability |
以下任一值:
|
| Variant 选项 |
基于 variant 选项(如尺码或颜色)进行筛选。
Variant 选项 filters 还需要在 URL 参数结构的
attribute_scope 组件中指定选项名称。例如:`option.color`。
|
option |
单个 variant 选项值或以 & 符号分隔的 variant 选项值列表。
例如:
orange 或 orange&deeppink。 |
| 价格 |
基于 variant 价格进行筛选。
价格 filters 还需要在 URL 参数结构的
attribute_scope 组件中指定价格条件,接受以下值:
|
price |
店铺默认货币格式的单个货币金额。
例如:
12 或 98.98。 |
以下是 variant 专属 filters 完整 URL 参数结构示例:
<!-- Variant 库存状态 -->
filter.v.availability=0
filter.v.availability=0&filter.v.availability=1
<!-- Variant 选项 -->
filter.v.option.color=orange
<!-- Variant 价格 -->
filter.v.price.lte=228