如何在 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-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 保持一緻即可：

最後的效果：