# 店面筛选

店面筛选是 theme 中推荐的商品筛选方式，它允许商家 [轻松创建 filters](https://helpcenter.shoplazza.com/hc/zh-cn/articles/6087310877593-%E4%B8%93%E8%BE%91%E9%A1%B5%E9%9D%A2%E5%A2%9E%E5%8A%A0%E5%95%86%E5%93%81%E7%AD%9B%E9%80%89%E5%99%A8)，用于筛选合集和搜索结果页面。

Filters 可以基于以下商品和 variant 数据：

*   库存状态
*   价格
*   供应商
*   Variant 选项
*   [商品 tags](/zh-CN/docs/theme/references/liquid/objects/product)

Filters 使用 `AND` 逻辑，filter 值使用 `OR` 逻辑。例如，您可以返回特定颜色和特定尺码的商品，或者返回某种颜色或另一种颜色的商品。

应用 filters 后，它们会通过 [URL 参数](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-%E5%8F%82%E6%95%B0)反映在合集 URL 中。

## 实现店面筛选

使用以下资源了解如何在 theme 中实现店面筛选。

[

### 支持店面筛选

了解如何在 theme 中支持店面筛选。

](./support-storefront-filtering)[

### 店面筛选 UX

了解店面筛选的 UX 注意事项。

](./ux-guidelines)

## Filter URL 参数

已应用的 filters 会根据 filter 类型通过 URL 参数反映在页面 URL 中，这些 URL 参数有[特定结构](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#url-%E5%8F%82%E6%95%B0%E7%BB%93%E6%9E%84)。

**备注**

在应用 filters 之前，需要先在 Shoplazza 管理后台中创建。前往**在线商店** > **导航**。

### URL 参数结构

Filter URL 参数由以下组件组成：

| 组件 | 必填 | 说明 |
| --- | --- | --- |
| `filter` | 是 | filter URL 参数的默认命名空间。 |
| `filter_scope` | 是 |
filter 的范围，可以是以下之一：

*   `p` - 表示范围在商品级别。
*   `v` - 表示范围在 variant 级别。

 |
| `attribute` | 是 | filter 所基于的属性。如需了解可用属性，请参阅 [Filter 类型](./storefront-filtering#filter-类型)。 |
| `attribute_scope` | 否 | `option` 和 `price` 属性的属性范围。如需了解更多，请参阅 [Variant 专属 filters](./storefront-filtering#variant-专属-filters) |
| `value` | 是 | filter 值。如需了解值格式，请参阅 [Filter 类型](./storefront-filtering#filter-类型)。 |

根据 filter 的 `attribute`，URL 参数的格式可以是以下之一：

```liquid
filter.filter_scope.attribute=vale
filter.filter_scope.attribute.attribute_scope=value
```

例如，如果有以下 filters：

*   基于**供应商**商品选项的 filter，值为 `nero`
*   基于**颜色** variant 选项的 filter，值为 `orange`

则各自的 URL 参数如下：

```liquid
filter.p.vendor=nero
filter.v.option.color=orange
```

#### 多个 filters

您可以组合多个 filters，如下所示：

```liquid
filter.p.vendor=nero&filter.v.option.color=orange
```

您也可以对同一 filter 筛选多个值，有两种方式：

*   在单个参数中包含多个值
*   为每个值分别设置参数

**示例**

```liquid
filter.v.option.color=orange,deeppink <!-- AND -->
filter.v.option.color=orange&filter.v.option.color=deeppink <!-- OR -->
```

### Filter 类型

Filters 可以在两个级别应用：

*   [商品级别](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#%E5%95%86%E5%93%81%E4%B8%93%E5%B1%9E-filters)
*   [Variant 级别](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#variant-%E4%B8%93%E5%B1%9E-filters)

#### 商品专属 filters

以下概述了商品专属 filters 及其作为 [URL 参数](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-%E5%8F%82%E6%95%B0)的表现形式：

|
名称

 |

说明

 |

参数名称

 |

接受的参数值

 |
| --- | --- | --- | --- |
|

商品 tags

 |

基于特定商品 tags 进行筛选

 |

`tag`

 |

单个商品 tag 或以 & 符号分隔的商品 tag 列表。

例如：`hot` 或 `hot&flash`。

 |
|

供应商

 |

基于特定供应商进行筛选。

 |

`vendor`

 |

单个供应商或以 & 符号分隔的供应商列表。
例如：`vendor1` 或 `vendor1&vendor2`。

 |

以下是商品专属 filters 完整 URL 参数结构示例：

**示例**

```liquid
<!-- 商品 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 参数](/zh-CN/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-%E5%8F%82%E6%95%B0)的表现形式：

| 名称 | 说明 | 参数名称 | 接受的参数值 |
| --- | --- | --- | --- |
| 库存状态 | 基于 variant 库存状态进行筛选。 | `availability` | 以下任一值：
*   `0` - 缺货的 variants。
*   `1` - 有货的 variants。
*   `0&1` - 两种库存状态的 variants。

 |
| Variant 选项 |

基于 variant 选项（如**尺码**或**颜色**）进行筛选。

Variant 选项 filters 还需要在 [URL 参数结构](./storefront-filtering#filter-url-参数)的 `attribute_scope` 组件中指定选项名称。

例如：\`option.color\`。

 | `option` |

单个 variant 选项值或以 & 符号分隔的 variant 选项值列表。

例如：`orange` 或 `orange&deeppink`。

 |
| 价格 |

基于 variant 价格进行筛选。

价格 filters 还需要在 [URL 参数结构](./storefront-filtering#filter-url-参数)的 `attribute_scope` 组件中指定价格条件，接受以下值：

*   `gte` - 大于或等于输入值的价格。
*   `lte` - 小于或等于输入值的价格。

 | `price` |

店铺默认货币格式的单个货币金额。

例如：`12` 或 `98.98`。

 |

以下是 variant 专属 filters 完整 URL 参数结构示例：

**示例**

```liquid
<!-- 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
```