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 中配置产品和类别页面路由。
相关文章
- SAP UI5 BaseObject.extend 方法的单步调试
- SAP Web IDE本地环境搭建「建议收藏」
- SAP UI5 sap.ui.Device.media 的使用介绍
- SAP UI5 index.html 根节点的 css 类填充逻辑
- 通过一个具体的例子,深入了解 SAP UI5 控件数据双向绑定的工作原理和问题排查方法试读版
- SAP数据迁移规划:准备、工具和合作伙伴是关键
- SNP通过Rise with SAP迁移到Azure云实践自身转型
- 什么是 sap.ushell.Container
- SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
- 深入比较:SAP vs Oracle(sap和oracle)
- sap快捷搜索菜单栏详解编程语言
- SAP中的F4帮助详解编程语言
- SAP ABAP 特性相关表取数逻辑详解编程语言
- SAP用户权限控制设置及开发详解编程语言
- abap如何查找SAP示例程序详解编程语言
- SAP在Linux系统的安装与使用(sap安装linux)
- 对比:Oracle 与 SAP的优势(oracle 与 sap)
- 比拼Oracle与SAP的优劣对比(oracle与sap优劣)
- Oracle与SAP的技术潜力比较(oracle sap比较)