关于javascript:SAP-电商云-Category-Navigation-页面设计

33次阅读

共计 1722 个字符，预计需要花费 5 分钟才能阅读完成。

产品是每个目录 (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/electro…

咱们本人写的 hook 办法被触发了：

@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 曾经被胜利解析了：

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

路由配置：