本文主要是介绍如何在 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 保持一致即可：

最后的效果：

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

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

这篇关于如何在 SAP 电商云 Spartacus UI 里新建一个页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！