SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现(1)

简介: SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现

本文研究 SAP 电商云 Spartacus UI Product Category Navigation UI 的实现明细。

image.png

selector: cx-category-navigation


Component name:CategoryNavigationComponent


navigation node 的数据,从 service 里获取的:


image.png


根据 Componentdata 拿到 navigation node 的数据:


image.png


navigation UI 下面是不同的 nav 子节点:


image.png


navigation UI 的 design 是数据驱动的:


image.png


nav 节点上有很多 click 事件注册:


image.png


在这里加上一行打印信息:


image.png


image.png


四次打印,两组。


看 /Brands/all/c/brands 包含在哪个 CMS response 里:

/Open-Catalogue/Cameras/Digital-Cameras/c/575



image.png


答案是这个 url:


https://spartacus:9002/occ/v2/electronics-spa/cms/components?fields=DEFAULT¤tPage=0&pageSize=26&componentIds=AllBrandsCategoryLink%2CCanonBrandCategoryLink%2CSonyBrandCategoryLink%2CKodakBrandCategoryLink%2CSamsungBrandCategoryLink%2CToshibaBrandCategoryLink%2CFujifilmBrandCategoryLink%2CKingstonBrandCategoryLink%2CIciduBrandCategoryLink%2CTDKBrandCategoryLink%2CSweexBrandCategoryLink%2CDigitalCamerasCategoryLink%2CDigitalCompactsCategoryLink%2CDigitalSLRCategoryLink%2CFilmCamerasCategoryLink%2CHandheldCamcordersCategoryLink%2CWebcamsCategoryLink%2CCameraAccessoriesCategoryLink%2CCamerasFlashesCategoryLink%2CTripodsCategoryLink%2CCameraLensesCategoryLink%2CFlashMemoryCategoryLink%2CPowerSuppliesCategoryLink%2CColourFilmsCategoryLink%2CBlackAndWhiteFilmsCategoryLink%2CBlankVideotapesCategoryLink&lang=en&curr=USD


image.png


取这些 ComponentID:


componentIds: AllBrandsCategoryLink,CanonBrandCategoryLink,SonyBrandCategoryLink,KodakBrandCategoryLink,SamsungBrandCategoryLink,ToshibaBrandCategoryLink,FujifilmBrandCategoryLink,KingstonBrandCategoryLink,IciduBrandCategoryLink,TDKBrandCategoryLink,SweexBrandCategoryLink,DigitalCamerasCategoryLink,DigitalCompactsCategoryLink,DigitalSLRCategoryLink,FilmCamerasCategoryLink,HandheldCamcordersCategoryLink,WebcamsCategoryLink,CameraAccessoriesCategoryLink,CamerasFlashesCategoryLink,TripodsCategoryLink,CameraLensesCategoryLink,FlashMemoryCategoryLink,PowerSuppliesCategoryLink,ColourFilmsCategoryLink,BlackAndWhiteFilmsCategoryLink,BlankVideotapesCategoryLink


Brand 下面又有两个子节点:camera 和 accessories:



image.png

image.png



Cameras 下面的 6 个子节点:


image.png


Accessories 下面的四个子节点:


image.png



相关文章
|
4月前
|
JavaScript
Spartacus 中的 navigation item reducer 实现
Spartacus 中的 navigation item reducer 实现
38 0
|
4月前
|
移动开发 开发框架 JavaScript
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
45 0
|
4月前
|
中间件 开发工具
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
77 0
|
1月前
|
开发框架 JSON 开发者
SAP Fiori Tools 的 Application Information 视图里的 Min UI5 Version
SAP Fiori Tools 的 Application Information 视图里的 Min UI5 Version
9 0
|
1月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
25 0
|
4月前
|
存储 设计模式 前端开发
什么是 SAP 的 BSP UI 技术
什么是 SAP 的 BSP UI 技术
39 0
|
4月前
|
JavaScript 前端开发
SAP UI5 应用里 /sap/ui/thirdparty/datajs.js 的作用
SAP UI5 应用里 /sap/ui/thirdparty/datajs.js 的作用
61 0
|
4月前
|
自然语言处理 测试技术 API
关于 SAP Commerce Cloud UI 的混合部署模式
关于 SAP Commerce Cloud UI 的混合部署模式
35 0
|
4月前
|
JSON 前端开发 API
SAP Spartacus UI 中的 CmsTicketInterceptor
SAP Spartacus UI 中的 CmsTicketInterceptor
31 0
|
4月前
|
运维 监控 Kubernetes
SAP MTA 里定义 SAP UI5 module 的一个例子
SAP MTA 里定义 SAP UI5 module 的一个例子
62 0