产品是每个目录 (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
.
路由配置:
Brands/:brandName/c/:brandCode
semantic route 的值为 brand
: