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

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

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

1638cc326f63a2213e6442fc27cb18aa (2).png

selector: cx-category-navigation


Component name:CategoryNavigationComponent


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

e2fe6dad811dc282671c99d3aa1b600c.png

根据 Componentdata 拿到 navigation node 的数据:

23e253cfd577dd5b77bcd93dc79f3b0c.png

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

03a5b7bfff818c4cd9c74bf2cebaa0cd.png

navigation UI 的 design 是数据驱动的:

489c5ce636b61999eb469d962d66d9e8.png

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

a0cec7d4e9d1752504afba826672ff09.png

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

07e0452b15e797a01584956ed3187975.png

678188671c9056b4359f5dae957957e4.png

四次打印,两组。


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

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

b5acd8727a3ee84546161bf6af1b51ec.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

0030f620e17eaac7ff7f763aaeadf3fa.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:

7583b841f9c0860f49267969fda9817e.png

Cameras 下面的 6 个子节点:

74a04349708eff1dd803967c3be9cc60.png

Accessories 下面的四个子节点:

c083a09f3ca73c7f98b21dcdfb57a650.png

在 Backoffice,Navigation Node 的名称:Electronics Site


类型:CMSNavigationNode

551eb5c1c4d5b7ec892039bc1a81dc71.png

id:ElectronicsNavNode

8a8aa438408d7724708aafd3e3fcfe67.png

有三个子 navigation node:

43cd7c71fbd3d4a56e327e17f7e7d717.png

分配到一个 Link Component 上:

00dd6a3469780734b031a0191d74e8f0.png

三个子节点的信息能够看见:

0af79cbc2ce74ac08282ea5d32b71997.png

categories 的子节点:

564df96baa461b562af5d935f0b71a3f.png

以 sony link 为例:

c312cd65b953a2607d28de31ad6cd124.png

他也是一个 navigation entry:

b8da00608dbeb42b5066b49bd91e4a49.png

其 entry 在另一个模型里:

8a8aa438408d7724708aafd3e3fcfe67.png

c7361f6b588f423742b0f0c58919e3d0 (1).png

这个模型的类型就是 navigation node entry:

b8da00608dbeb42b5066b49bd91e4a49.png

关联到一个 Sony Link Component 上:

8a8aa438408d7724708aafd3e3fcfe67.png

这个 Component 有 url 和 category 属性:

2ae9c4128220c9634ccf652f2b9dd33c.png

它是一个 CMSLinkComponent:

d529e6ce684c6bcfbe5c29388c7d21d7.png

这些 Component 的用途在 SAP 官网能够找到。


站点上的顶部导航菜单通过以下 CMS 组件的配置进行控制:


NavigationComponents - 这些组件代表导航栏的各个部分。 每个部分可以有一个 CMSLinkComponent 对象和一个 CMSNavigationNode 对象,被认为是根节点。


CMSNavigationNodes - 这些组件代表导航树的结构,并具有在下拉菜单中呈现的标题。 每个结构可以有许多 CMSLinkComponent 对象和许多子 CMSNavigationNodes 对象。


CMSLinkComponents - 这些组件在页面上呈现并显示在导航树中的每个点。


目录
相关文章
|
4月前
|
JavaScript
Spartacus 中的 navigation item reducer 实现
Spartacus 中的 navigation item reducer 实现
38 0
|
1月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
16 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
|
1月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
15 0
|
4月前
|
存储 设计模式 前端开发
什么是 SAP 的 BSP UI 技术
什么是 SAP 的 BSP UI 技术
39 0
|
4月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
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
|
4月前
|
JavaScript 前端开发
SAP UI5 应用里 /sap/ui/thirdparty/datajs.js 的作用
SAP UI5 应用里 /sap/ui/thirdparty/datajs.js 的作用
61 0