头图

如何在 SAP 电商云 Spartacus UI 里新建一个页面

JerryWang_汪子熙

因为 SAP Spartacus UI 是基于 CMS 驱动的,因此流程是:我们首先在 SAP Commerce Cloud Backoffice 创建新的 content page, CMS Component 以及相关内容,然后再到 SAP Spartacus 层,新建一个 Angular Component,映射到之前 Commerce Cloud Backoffice 里创建的 CMS Component.

步骤1 - 在 SAP Commerce Cloud Backoffice 创建必须的 CMS 内容

具体步骤可以参考我这篇文章:如何在 SAP 电商云里使用 Backoffice 和 Smart Edit 创建新的 Content Page

完整的 impex 源代码如下:

## Quick Order ## (my-account/quick-order)
$contentCatalog=powertools-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];masterTemplate(uid,$contentCV);label
;;jerryOrderPage;AccountPageTemplate;/my-account/jerry-order

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
;;BodyContentSlot-jerryOrder;Body Content Slot for Jerry Order;true;JerryOrderComponent

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;BodyContent-jerryOrder;BodyContent;jerryOrderPage;BodyContentSlot-jerryOrder

INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType;&componentRef
;;JerryOrderComponent;Jerry Order Component;JerryOrderComponent;JerryOrderComponent

INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];url
;;JerryOrderLink;/my-account/jerry-order

步骤2

在 Spartacus 创建新的 Angular Component,将其映射到 SAP Commerce Cloud Backoffice 里创建的 CMS Component:JerryOrderComponent

添加一条指向到 JerryOrderComponent 的路由设置:

paths 里的值,只需要和 content page 里的 page label 保持一致即可:

最后的效果:

所有的源代码都可以在这个链接里获得。

更多Jerry的原创文章,尽在:"汪子熙":

阅读 263

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

784 声望
1k 粉丝
0 条评论

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

784 声望
1k 粉丝
文章目录
宣传栏