likes
comments
collection
share

SAP 电商云 Category Navigation 页面设计

作者站长头像
站长
· 阅读数 28

产品是每个目录(catalog)的基本元素。 通过对它们进行分组,您可以按类别(category)排列您的收藏。 为了构建分层的产品结构,可以将产品保存在类别(category)中。

要组织产品,您可以将它们分组到代表逻辑组的类别中。 这使您能够将相关产品组合在一起,例如使用衬衫类别和夹克类别。 您可以将类别与传统商店的部门进行比较。

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

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

SAP 电商云 Category Navigation 页面设计

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

SAP 电商云 Category Navigation 页面设计

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

SAP 电商云 Category Navigation 页面设计

ComponentData 打印出来如下:

SAP 电商云 Category Navigation 页面设计

  • typeCode: "CategoryNavigationComponent"
  • uid: "ElectronicsCategoryNavComponent"

包含 6 个 navigation node:

SAP 电商云 Category Navigation 页面设计

包括一个 entry:AllBrandsCategoryLink

SAP 电商云 Category Navigation 页面设计

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

SAP 电商云 Category Navigation 页面设计

SAP 电商云 Category Navigation 页面设计

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

SAP 电商云 Category Navigation 页面设计

这个 url 是 Angular 动态生成的,还是从 Commerce Cloud 后台返回回来的呢?

SAP 电商云 Category Navigation 页面设计

查看 cx-generic-link 的实现:

判断 category page 上下文的位置:SAP 电商云 Category Navigation 页面设计

SAP 电商云 Category Navigation 页面设计

SAP 电商云 Category Navigation 页面设计

答案是从 Commerce Cloud CMS 里返回的:SAP 电商云 Category Navigation 页面设计

完整信息:

"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 方法被触发了:SAP 电商云 Category Navigation 页面设计

@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 已经被成功解析了:

SAP 电商云 Category Navigation 页面设计

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

路由配置:

Brands/:brandName/c/:brandCode

SAP 电商云 Category Navigation 页面设计

semantic route 的值为 brandSAP 电商云 Category Navigation 页面设计