关于sap:SAP-Spartacus-产品搜索页面结果里的-filter-设计明细

43次阅读

共计 1058 个字符,预计需要花费 3 分钟才能阅读完成。

咱们关上 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 中配置产品和类别页面路由。

正文完
 0