如何在|如何在 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

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

文章图片
最后的效果:

文章图片
所有的源代码都可以在这个链接里获得。
更多Jerry的原创文章,尽在:"汪子熙":

文章图片
推荐阅读
- 任时光绽放成六月繁花
- 我从来不做坏事
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 樱花雨
- 如何寻找情感问答App的分析切入点
- 拍照一年啦,如果你想了解我,那就请先看看这篇文章
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 人如果没梦想,和咸鱼有什么区别(自媒体时代把握住就能咸鱼翻身)
- 如何在Mac中的文件选择框中打开系统隐藏文件夹