SAP 电商云 Category Navigation 页面设计

产品是每个目录(catalog)基本元素。 你可以根据类别对它们进行分组(category)安排你的收藏。 为了构建分层产品结构，产品可以保存在类别中(category)中。

要组织产品，你可以把它们分成代表逻辑组的类别。 这样你就可以把相关的产品结合起来，比如衬衫和夹克。 您可以将类别与传统商店的部门进行比较。

类别可以包括其他类别，以便您可以将相应的类别包括其产品组合在一个超级类别中，也称为父类别。 因此，您可以任意嵌套类别并构建分层类别结构。

category navigation 页面所在的区域如下图所示，选择器为 cx-category-navigation:

其数据源包括 data$ 和 node$:

其中 node$ 依赖于 data$, 后者来自 ComponentData：

ComponentData 打印如下：

• typeCode: “CategoryNavigationComponent”
• uid: “ElectronicsCategoryNavComponent”

包含 6 个 navigation node：

包括一个 entry：AllBrandsCategoryLink

上图 HTML 在页面上看到 url，/Brands/all/c/brands， 在这个 impex 里维护的。

看这个 canon 的 url：/Brands/Canon/c/brand_10

这个 url 是 Angular 动态生成，或从 Commerce Cloud 后台回来了？

查看 cx-generic-link 的实现：

判断 category page 上下位置：

答案是从 Commerce Cloud CMS 里返回的：

完整信息：

"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 该方法被触发：

@Injectable() export class CustomSerializer   implements fromNgrxRouter.RouterStateSerializer<ActivatedRouterStateSnpshot>
{ 
       
  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 已经被成功解析了：

加了冒号的代码 url 参数，brandName 的值为 Canon，brandCode 的值为 brand_10.

路由配置：

Brands/:brandName/c/:brandCode

semantic route 的值为 brand：