本文研究 SAP 電商雲 Spartacus UI Product Category Navigation UI 的實現明細。

![](https://img-blog.csdnimg.cn/img_convert/1638cc326f63a2213e6442fc27cb18aa.png)

selector: cx-category-navigation

Component name：CategoryNavigationComponent

navigation node 的資料，從 service 裡獲取的：
![](https://img-blog.csdnimg.cn/img_convert/e2fe6dad811dc282671c99d3aa1b600c.png)

根據 Componentdata 拿到 navigation node 的資料：

![](https://img-blog.csdnimg.cn/img_convert/23e253cfd577dd5b77bcd93dc79f3b0c.png)

navigation UI 下面是不同的 nav 子節點：
![](https://img-blog.csdnimg.cn/img_convert/03a5b7bfff818c4cd9c74bf2cebaa0cd.png)

navigation UI 的 design 是資料驅動的：
![](https://img-blog.csdnimg.cn/img_convert/489c5ce636b61999eb469d962d66d9e8.png)

nav 節點上有很多 click 事件註冊：

![](https://img-blog.csdnimg.cn/img_convert/a0cec7d4e9d1752504afba826672ff09.png)

在這裡加上一行列印資訊：

![](https://img-blog.csdnimg.cn/img_convert/07e0452b15e797a01584956ed3187975.png)

![](https://img-blog.csdnimg.cn/img_convert/678188671c9056b4359f5dae957957e4.png)

四次列印，兩組。

看 `/Brands/all/c/brands` 包含在哪個 CMS response 裡：
`/Open-Catalogue/Cameras/Digital-Cameras/c/575`
![](https://img-blog.csdnimg.cn/img_convert/b5acd8727a3ee84546161bf6af1b51ec.png)

答案是這個 url：

https://spartacus:9002/occ/v2/electronics-spa/cms/components?fields=DEFAULT&currentPage=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

![](https://img-blog.csdnimg.cn/img_convert/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：

![](https://img-blog.csdnimg.cn/img_convert/7583b841f9c0860f49267969fda9817e.png)

![](https://img-blog.csdnimg.cn/img_convert/74a04349708eff1dd803967c3be9cc60.png)

Cameras 下面的 6 個子節點：
![](https://img-blog.csdnimg.cn/img_convert/c083a09f3ca73c7f98b21dcdfb57a650.png)

Accessories 下面的四個子節點：
![](https://img-blog.csdnimg.cn/img_convert/551eb5c1c4d5b7ec892039bc1a81dc71.png)

在 Backoffice，Navigation Node 的名稱：Electronics Site

型別：CMSNavigationNode

![](https://img-blog.csdnimg.cn/img_convert/8a8aa438408d7724708aafd3e3fcfe67.png)

id：ElectronicsNavNode

![](https://img-blog.csdnimg.cn/img_convert/423bbd271bdf2e09866e8b2b6521432e.png)

有三個子 navigation node：
![](https://img-blog.csdnimg.cn/img_convert/43cd7c71fbd3d4a56e327e17f7e7d717.png)

分配到一個 Link Component 上：

![](https://img-blog.csdnimg.cn/img_convert/00dd6a3469780734b031a0191d74e8f0.png)

三個子節點的資訊能夠看見：
![](https://img-blog.csdnimg.cn/img_convert/0af79cbc2ce74ac08282ea5d32b71997.png)

categories 的子節點：
![](https://img-blog.csdnimg.cn/img_convert/564df96baa461b562af5d935f0b71a3f.png)

![](https://img-blog.csdnimg.cn/img_convert/0e310467b97613da5d8b453473ed525b.png)

以 sony link 為例：
![](https://img-blog.csdnimg.cn/img_convert/c312cd65b953a2607d28de31ad6cd124.png)

![](https://img-blog.csdnimg.cn/img_convert/1f668f20347848a8a3f205a5a66906e2.png)

他也是一個 navigation entry：
![](https://img-blog.csdnimg.cn/img_convert/b8da00608dbeb42b5066b49bd91e4a49.png)

其 entry 在另一個模型裡：
![](https://img-blog.csdnimg.cn/img_convert/c7361f6b588f423742b0f0c58919e3d0.png)

這個模型的型別就是 navigation node entry：
![](https://img-blog.csdnimg.cn/img_convert/62d046ed97ecefe4c25d34f810ddea24.png)

關聯到一個 Sony Link Component 上：

![](https://img-blog.csdnimg.cn/img_convert/1a7b74f792655122009b7fab6cb03a95.png)

這個 Component 有 url 和 category 屬性：

![](https://img-blog.csdnimg.cn/img_convert/2ae9c4128220c9634ccf652f2b9dd33c.png)

它是一個 CMSLinkComponent：
![](https://img-blog.csdnimg.cn/img_convert/d359b8039f399fb32b251a6a81a5e8ab.png)

![](https://img-blog.csdnimg.cn/img_convert/d529e6ce684c6bcfbe5c29388c7d21d7.png)

這些 Component 的用途在 SAP [官網](https://help.sap.com/docs/SAP_COMMERCE/4c33bf189ab9409e84e589295c36d96e/8af89258866910148768bb002ab815b7.html?q=CMSLinkComponent)能夠找到。

站點上的頂部導航選單透過以下 CMS 元件的配置進行控制：

- NavigationComponents - 這些元件代表導航欄的各個部分。 每個部分可以有一個 CMSLinkComponent 物件和一個 CMSNavigationNode 物件，被認為是根節點。

- CMSNavigationNodes - 這些元件代表導航樹的結構，並具有在下拉選單中呈現的標題。 每個結構可以有許多 CMSLinkComponent 物件和許多子 CMSNavigationNodes 物件。

- CMSLinkComponents - 這些元件在頁面上呈現並顯示在導航樹中的每個點。

SAP 電商雲 Spartacus UI 的 Product Category Navigation UI 實現

相關文章