產品是每個目錄(catalog)的基本元素。 透過對它們進行分組，您可以按類別(category)排列您的收藏。 為了構建分層的產品結構，可以將產品儲存在類別(category)中。

要組織產品，您可以將它們分組到代表邏輯組的類別中。 這使您能夠將相關產品組合在一起，例如使用襯衫類別和夾克類別。 您可以將類別與傳統商店的部門進行比較。

類別可以包含其他類別，以便您可以將相應的類別包括其產品組合在一個超類別中，也稱為父類別。 因此，您可以任意巢狀類別並構建分層類別結構。

category navigation 頁面所在的區域如下圖所示，選擇器為 `cx-category-navigation`:

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

其資料來源包含 data$ 和 node$:

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

其中 `node$` 依賴於 `data$`, 後者來自 `ComponentData`：

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

ComponentData 列印出來如下：

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

- typeCode: "CategoryNavigationComponent"
- uid: "ElectronicsCategoryNavComponent"

包含 6 個 navigation node：

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

包括一個 entry：AllBrandsCategoryLink

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

上圖 HTML 頁面裡看到的 url，`/Brands/all/c/brands`， 在這個 `impex` 裡維護的。

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

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

看這個 canon 的 url：/Brands/Canon/c/brand_10

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

這個 url 是 Angular 動態生成的，還是從 Commerce Cloud 後臺返回回來的呢？

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

檢視 cx-generic-link 的實現：

判斷 category page 上下文的位置：
![](https://img-blog.csdnimg.cn/img_convert/53526043cc5c646763cab0cc91e5443d.png)

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

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

答案是從 Commerce Cloud CMS 裡返回的：
![](https://img-blog.csdnimg.cn/img_convert/a1e95979a3787755bdc36dbc9becf517.png)

完整資訊：

```javascript
"uid" : "CanonBrandCategoryLink",
      "uuid" : "eyJpdGVtSWQiOiJDYW5vbkJyYW5kQ2F0ZWdvcnlMaW5rIiwiY2F0YWxvZ0lkIjoiZWxlY3Ryb25pY3Mtc3BhQ29udGVudENhdGFsb2ciLCJjYXRhbG9nVmVyc2lvbiI6Ik9ubGluZSJ9",
      "typeCode" : "CMSLinkComponent",
      "modifiedtime" : "2022-02-17T02:30:57+0000",
      "name" : "Canon Link",
      "container" : "false",
      "external" : "false",
      "synchronizationBlocked" : "false",
      "categoryCode" : "brand_10",
      "category" : "brand_10",
      "url" : "/Brands/Canon/c/brand_10",
      "linkName" : "Canon",
      "target" : "false"
```

如何判斷當前頁面是 category 頁面？

http://localhost:4299/electronics-spa/en/USD/Brands/Canon/c/brand_10

我們自己寫的 hook 方法被觸發了：
![](https://img-blog.csdnimg.cn/img_convert/33e994c5d37ac839d005414b5182d294.png)

```javascript
@Injectable()
export class CustomSerializer
  implements fromNgrxRouter.RouterStateSerializer<activatedrouterstatesnapshot>
{
  serialize(routerState: RouterStateSnapshot): ActivatedRouterStateSnapshot {
    let state: CmsActivatedRouteSnapshot =
      routerState.root as CmsActivatedRouteSnapshot;
    let cmsRequired = false;
    let context: PageContext;
    let semanticRoute: string;
    let urlString = '';
```

這裡 cms 裡配置的 url /Brands/Canon/c/brand_10 已經被成功解析了：

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

加了冒號的程式碼 url 引數，`brandName` 的值為 Canon，`brandCode` 的值為 `brand_10`.

路由配置：

```typescript
Brands/:brandName/c/:brandCode
```

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

semantic route 的值為 `brand`：
![](https://img-blog.csdnimg.cn/img_convert/9055f3859cfcef3d4c6608477167e2d7.png)</activatedrouterstatesnapshot>

SAP 電商雲 Category Navigation 頁面設計

相關文章