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 的数据：

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 - 这些组件在页面上呈现并显示在导航树中的每个点。