当前位置: 首页 > 后端技术 > Node.js

SAP电商云CategoryNavigation页面设计

时间:2023-04-04 01:14:22 Node.js

产品是每个目录(catalog)的基本元素。通过对它们进行分组,您可以按类别排列您的收藏。要构建分层产品结构,可以将产品分类存储。要组织产品,您可以将它们分组到代表逻辑组的类别中。这使您能够将相关产品组合在一起,例如使用衬衫类别和夹克类别。您可以将类别与传统商店的部门进行比较。类别可以包含其他类别,以便您可以将相应的类别(包括其产品)分组到超类别(也称为父类别)中。因此,您可以任意嵌套类别并构建分层类别结构。分类导航页面所在区域如下图,选择器为cx-category-navigation:其数据源包括data$和node$:其中node$依赖于data$,来自ComponentData:ComponentData打印出来如下:typeCode:"CategoryNavigationComponent"uid:"ElectronicsCategoryNavComponent"contains6navigationnodes:包括一个入口:AllBrandsCategoryLink上面HTML页面中看到的url,/Brands/all/c/brands,就是在这个impex中维护的。Lookattheurlofthiscanon:/Brands/Canon/c/brand_10IsthisurldynamicallygeneratedbyAngular,orisitreturnedfromthebackgroundofCommerceCloud?查看cx-generic-link的实现:判断categorypage上下文的位置:答案是从CommerceCloudCMS里返回的:完整信息:"uid":"CanonBrandCategoryLink","uuid":"eyJpdGVtSWQiOiJDYW5vbkJyYW5kQ2F0ZWdvcnlMaW5rIiwiY2F0YWxvZ0lkIjoiZWxlY3Ryb25pY3Mtc3BhQ29udGVudENhdGFsb2ciLCJjYXRhbG9nVmVyc2lvbiI6Ik9ubGluZSJ9","typeCode":"CMSLinkComponent","modifiedtime":"2022-02-17T02:30:57+0000","name":"CanonLink","container":"false","external":"false","synchronizationBlocked":"false","categoryCode":"brand_10","category":"brand_10","url":"/Brands/Canon/c/brand_10","linkName":"Canon","ttarget":"false"如何判断当前页面是分类页面http://localhost:4299/electro...触发了我们自己写的hook方法:@Injectable()exportclassCustomSerializerimplementsfromNgrxRouter.RouterStateSerializer{serialize(routerState:RouterStateSnapshot):ActivatedRouterStateSnapshot{letstate:CmsActivatedRouteSnapshot=routerState.rootasCmsActivatedRouteSnapshot;letcmsRequired=false;letcontext:PageContext;letsemanticRoute:string;/Canon/c/brand_10已成功解析:带冒号的codeurl参数,brandName的值为Canon,brandCode的值为brand_10路由配置:Brands/:brandName/c/:brandCodesemantic路由为brand: