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

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

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



selector: cx-category-navigation


Component name:CategoryNavigationComponent


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


根据 Componentdata 拿到 navigation node 的数据:




根据 Componentdata 拿到 navigation node 的数据:



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



navigation UI 的 design 是数据驱动的:



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



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




四次打印,两组。


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


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



答案是这个 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





取这些 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:




Cameras 下面的 6 个子节点:



Accessories 下面的四个子节点:



在 Backoffice,Navigation Node 的名称:Electronics Site


类型:CMSNavigationNode




id:ElectronicsNavNode



有三个子 navigation node:




分配到一个 Link Component 上:



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




categories 的子节点:





以 sony link 为例:




他也是一个 navigation entry:




其 entry 在另一个模型里:



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



关联到一个 Sony Link Component 上:



这个 Component 有 url 和 category 属性:




它是一个 CMSLinkComponent:



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


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


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


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


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


相关文章
|
4月前
|
JavaScript
Spartacus 中的 navigation item reducer 实现
Spartacus 中的 navigation item reducer 实现
38 0
|
1月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
25 0
|
4月前
|
JSON 前端开发 API
SAP Spartacus UI 中的 CmsTicketInterceptor
SAP Spartacus UI 中的 CmsTicketInterceptor
31 0
|
4月前
|
Web App开发 JavaScript Java
SAP 电商云 Spartacus UI External Route 的模块实现概述
SAP 电商云 Spartacus UI External Route 的模块实现概述
47 0
|
4月前
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试(二)
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试
28 0
|
4月前
|
网络架构
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试(一)
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试
32 0
|
4月前
|
缓存 Java C++
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
Spartacus 在技术和架构( library 发布方式 vs 模板发布方式,headless vs embedded,Angular vs JSP 技术栈)等各方面,都是一种全面的从 Accelerator 的完整范式转变。因此,对于 Commerce Cloud 已经使用 Accelerator 的客户来说,并没有直接的方法可以从基于 Accelerator 的 Storefront 迁移到使用 Spartacus library 的店面。
40 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