因為 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](https://jerry.blog.csdn.net/article/details/121118330)

完整的 impex 原始碼如下：

```sql
## 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

![](https://img-blog.csdnimg.cn/img_convert/2840761f32d43dacb3144bd11ba2045c.png)

新增一條指向到 JerryOrderComponent 的路由設定：

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

![](https://img-blog.csdnimg.cn/img_convert/67fe52b9bc5e24064d32505ae1a9df4d.png)

最後的效果：
![](https://img-blog.csdnimg.cn/img_convert/8df8ceebb8448747261899c7ab6b4c68.png)

所有的原始碼都可以在這個[連結](https://github.com/wangzixi-diablo/spartacus/commit/33f838c7d560e920bd11d4ae7837f6d1a63efad2)裡獲得。

如何在 SAP 電商雲 Spartacus UI 裡新建一個頁面

相關文章