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