因為 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

添加一條指向到 JerryOrderComponent 的路由設置：

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

最后的效果：

所有的源代碼都可以在這個鏈接里獲得。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何在 SAP 电商云 Spartacus UI 里新建一个页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。