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

因为 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-orderINSERT_UPDATE ContentSlot; $contentCV[unique=true]; uid[unique=true]; name; active; cmsComponents(&componentRef) ; ; BodyContentSlot-jerryOrder; Body Content Slot for Jerry Order; true; JerryOrderComponentINSERT_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-jerryOrderINSERT_UPDATE CMSFlexComponent; $contentCV[unique=true]; uid[unique=true]; name; flexType; &componentRef ; ; JerryOrderComponent; Jerry Order Component; JerryOrderComponent; JerryOrderComponentINSERT_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
如何在|如何在 SAP 电商云 Spartacus UI 里新建一个页面
文章图片

添加一条指向到 JerryOrderComponent 的路由设置:
paths 里的值,只需要和 content page 里的 page label 保持一致即可:
【如何在|如何在 SAP 电商云 Spartacus UI 里新建一个页面】如何在|如何在 SAP 电商云 Spartacus UI 里新建一个页面
文章图片

最后的效果:
如何在|如何在 SAP 电商云 Spartacus UI 里新建一个页面
文章图片

所有的源代码都可以在这个链接里获得。
更多Jerry的原创文章,尽在:"汪子熙":
如何在|如何在 SAP 电商云 Spartacus UI 里新建一个页面
文章图片

    推荐阅读