共计 1966 个字符，预计需要花费 5 分钟才能阅读完成。
昨天 Jerry 读到了 SAP 天天事 公众号上公布的一篇文章：多家知名企业抉择 SAP Commerce Cloud 为客户提供卓越购物体验。
SAP 日前发表，锦江国内旗下的寰球酒店供应链平台锦江联采、摩托车制造商新大洲本田和娱乐零售商 Virgin Megastore 已抉择采纳 SAP Commerce Cloud（电商云）解决方案，为客户提供卓越的电商体验。
既然抉择了 SAP Commerce Cloud 并进行施行，那么对其前台界面的定制化必不可少。
面向终端消费者的 SAP Commerce Cloud 电商云 UI，蕴含了基于古老 JSP 技术 和基于 SAP Spartacus 开源框架实现的两种版本，前者终将被后者取代。下图是基于 Spartacus 开源框架的 SAP Commerce Cloud 电商云界面。
对于 SAP Spartacus 的概要介绍，能够参考我这篇文章：Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版。
本文从一个理论例子登程，介绍如何对 SAP Commerce Cloud 电商云的界面进行二次开发。
Jerry 2018 年的一篇文章：SAP UI 和 Salesforce UI 开发漫谈，已经介绍过，比方别离基于 SAP ABAP Webdynpro 和 SAP WebClient UI 技术开发而成的 SAP SRM 和 SAP CRM UI，界面都是由一个个 UI Component(组件) 拼装而成。SAP Commerce Cloud 电商云 UI 也不例外。
回顾一下 SAP CRM UI 的二次开发流程：
- 关上要定制化的 UI 界面，按 F2 快捷键关上技术明细界面，查到实现该界面的 UI Component 名称：BT116H_SRVO.
- 应用对应的开发工具，关上组件 BT116H_SRVO，进行加强开发。
SAP Commerce Cloud 电商云 UI 的加强思路一模一样。
假如我想对下图高亮区域, 即 SAP 电商云的购物车 (Cart) 页面的产品列表局部，进行二次开发。
在 Chrome 开发者工具里，找到上图实现页面的 Angular 组件对应的 selector：cx-cart-details.
依据找到的 selector cx-cart-details , 作为关键字，在 SAP Spartacus 源代码里进行搜寻。
每个 Angular Component 同其 selector 具备一一对应关系，因而咱们找到了 Component selector cx-cart-details, 也就找到了组件名称：CartDetailsComponent：
在 SAP Spartacus 的默认实现里，SAP Commerce Cloud 后盾的 Cart 模型 CartComponent，映射的 Angular Component，正好是咱们之前找到的 CartDetailsComponent：
所以接下来，咱们要做的事件：
- 创立一个新的 Angular Component，扩大自规范 Angular Component CartDetailsComponent.
如下图所示，我给这个新建的 Component 取名为 MyCartComponent，其 selector 为 app-my-cart.
新建的 MyCartComponent 扩大自 规范的 CartDetailsComponent，既可重用后者已有的业务逻辑，也能够编写新的业务逻辑。
而 UI 界面的二次开发，在该 Component 对应的模板文件，my-cart.component.html 里实现。
为简略起见，在我自定义的 MyCartComponent 里，我仅仅打印出增加到购物车里的产品名称，而后首尾加上两个一级题目。
MyCartComponent 开发结束后，将其映射到 SAP Commerce Cloud 后盾 CMS 模型 CartComponent 上。
下图第 83 行～89 行的语义是，通过 ConfigModule.withConfig 办法，定义了一个优先级比 SAP Spartacus 标准配置优先级更高的客户配置，该配置的内容是一条映射记录，通知 SAP Spartacus 框架：当页面要渲染 SAP Commerce Cloud 名为 CartComponent 的模型时，请应用我开发的 MyCartComponent 进行页面绘制。
这个二次开发最初的成果如下：
在生成的 HTML 源代码里，咱们自定义的 Angular Component 的 selector app-my-cart, 取代了 SAP Spartacus 规范 Cart Component 的 selector cx-cart-details.
当然，这种应用自定义 Angular Component 去替换 SAP Commerce Cloud 电商云规范 Component 的做法，只是 SAP 电商云 UI 泛滥自开发方式的一种，后续 Jerry 会介绍其余加强形式，感激浏览。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
