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

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

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


image.png


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


image.png


本文介绍其设计原理。


selector:cx-product-facet-navigation

Component 名称:ProductFacetNavigationComponent



image.png

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


image.png


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


image.png


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


这个 Component 的 CMS Component 名称为:ProductRefinementComponent


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


image.png

看一下 facet list 的数据源,通过 facetList$ 提供:


image.png

Component 不操心数据的来源,通过 FacetService 读取:


image.png


FacetService 又通过 ProductFacetService 来获取:


image.pngimage.png

这些 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 中配置产品和类别页面路由。



相关文章
|
12月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
|
5月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
5月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
5月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
12月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
|
12月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
|
12月前
|
前端开发 JavaScript API
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
下一篇
无影云桌面