因为SAPSpartacusUI是基于CMS驱动的,所以流程是:我们先在SAPCommerceCloudBackoffice中新建一个内容页面,CMSComponent和相关内容,然后到SAPSpartacus层新建一个AngularComponent,即映射到之前在Backoffice中创建的CommerceCloudCMS组件。Step1-在SAPCommerceCloudBackoffice中创建必要的CMS内容具体步骤可以参考我的文章:HowtouseBackofficeandSmartEditinSAPEcommerceCloudtocreateanewContentPage完整impex源代码如下:##快速订购##(my-account/quick-order)$contentCatalog=powertools-spaContentCatalog$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]INSERT_UPDATECon??tentPage;$contentCV[unique=true];uid[unique=true];masterTemplate(uid,$contentCV);label;;jerryOrderPage;AccountPageTemplate;/my-account/jerry-orderINSERT_UPDATEContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef);;BodyContentSlot-jerryOrder;BodyContentSlotforJerryOrder;true;JerryOrderComponentINSERT_UPDATECon??tentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true];;BodyContent-jerryOrder;BodyContent;jerryOrderPage;BodyContentSlot-jerryOrderINSERT_UPDATECMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType;&componentRef;;JerryOrderComponent;JerryOrderComponent;JerryOrderComponentATEconentINSERT_CMSLink[unique=true];uid[unique=true];url;;JerryOrderLink;/my-account/jerry-order步骤2在Spartacus中创建一个新的Angular组件并将其映射到在SAPCommerceCloudBackoffice中创建的CMS组件:JerryOrderComponent添加一个指向JerryOrderComponent设置的路由:paths中的值只需要和contentpage中的pagelabel保持一致即可:最终效果:所有源码都可以在这个链接中获取。更多Jerry原创文章在这里:《王子熙》:
