SAP Spartacus 产品搜索页面结果里的 filter 设计明细

我们打开 Spartacus 主页，输入产品名称进行搜索之后，从结果页面能看到这种 filter：

默认有 9 个 filter，可以通过单击来展开或者折叠。

本文介绍其设计原理。

selector：cx-product-facet-navigation
Component 名称：ProductFacetNavigationComponent

我们可以在 @spartacus/storefront 里倒入这个 Component：

这个 Component 由 active facet 和 facet list 组成。

facet 的字面含义：多面事物的其中一面。

这个 Component 的 CMS Component 名称为：ProductRefinementComponent

提供了 FacetList 和 ActiveFacets 的 module 在这里也能看见：

看一下 facet list 的数据源，通过 facetList$ 提供：

Component 不操心数据的来源，通过 FacetService 读取：

FacetService 又通过 ProductFacetService 来获取：

这些 facet 都是后台返回的：

c:\Code\SPA\spartacus-release-4.3.x\projects\storefrontlib\cms-components\product\product-list\product-facet-navigation\product-facet-navigation.module.ts

SAP Commerce Cloud 中的 CMS 包括以下特殊页面类型：产品、类别和目录(catalog)。 还有一个通用的内容页面类型，用于所有其他类型的页面，例如登录、订单历史和常见问题页面。Spartacus 目前不支持目录页面类型。

Spartacus 默认定义了以下 Angular 路由：

• 包含 :productCode 参数的路由，用于产品页面

• 包含 :categoryCode 参数或 :brandCode 参数的路由，用于类别页面

• 包含 ** 通配符的路由用于内容页面（换句话说，通配符用于所有不是产品或类别页面的页面）

• 内容页面在 CMS 中有一个可配置的 URL，称为页面标签(page label)。 但是，产品、类别和品牌页面的 URL 只能在 Spartacus 中配置。

要添加新路由，您只需在 CMS 中添加一个新的内容页面，并为其指定一个以斜杠开头的页面标签，例如 /contact-us.

Spartacus 通配符路由 (**) 匹配它，无需任何配置。

只能在 Spartacus 中配置产品和类别页面路由。