本文钻研 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 个子节点:
...