因为 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 里新建一个页面相关推荐

如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据
答案是采用 CmsComponentData 这个服务. 看个实际例子: CmsQuickOrderComponent 的定义,维护在 models 文件夹里: 运行时,只能访问到上图新 extend ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
如何在 SAP 电商云 Spartacus UI 中创建新的页面
Spartacus 中的页面基于使用相关 API 从 SAP Commerce 后端获取的 CMS 页面.来自 SAP Commerce 端的数据定义了元数据,如 url.标题等,以及页面的结构.结构 ...
如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频
Spartacus UI 的 banner Component 显示的图片,最终是通过一个 selector 为 cx-media 的 Component 实现的.路径为 projects\store ...
SAP 电商云 Spartacus UI 里的 InjectionToken 应用场景
看个具体的例子: InjectionToken 构造函数,需要传一个类型参数进去. 这个 ActionReducerMap 的定义很讲究: export declare type ActionRedu ...
在 SAP 电商云 Spartacus UI 里使用自定义配置控制 UI 调试的开关
在 page-slot.module.ts 里,定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里, ...
如何在 SAP 电商云 Spartacus 代码里获取 Routes 路由信息
使用如下代码: export class AppModule {constructor(private router: Router,protected injector: Injector){thi ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...

如何在 SAP 电商云 Spartacus UI 里新建一个页面

步骤1 - 在 SAP Commerce Cloud Backoffice 创建必须的 CMS 内容

步骤2

如何在 SAP 电商云 Spartacus UI 里新建一个页面相关推荐

最新文章

热门文章