昨天 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。