這是Jerry 2021年的第 24 篇文章，也是汪子熙公眾號總共第 295 篇原創文章。

最近看到 SAP天天事 公眾號發佈的一篇文章：

基於 SAP Commerce Cloud，老孃舅構建的餐飲行業業務中台成功啓用

老孃舅餐飲股份有限公司創建於1998年，目前位列中國餐飲百強第45位，是中國快餐十大品牌之一。

他們總結行業特色，對比解決方案，經過兩年左右的產品選型和行業競品參考，在對 SAP Commerce 產品管理的靈活性、渠道支持的多樣性、訂單處理的及時性和系統運行穩定性等多方面進行充分評估後，老孃舅最終選擇了電商領域的領先產品套件 SAP Commerce Cloud 作為全渠道業務中台。

本文就從 SAP Commerce Cloud ( 電商雲 ) 前台路由路徑的自定義配置與開發的一個實際例子，來加深大家對其靈活性的認識。

Jerry 文章裏介紹的 SAP Commerce Cloud UI，如無特殊説明，默認均為基於 SAP Spartacus 的新一代單頁面 UI，而非傳統的 JSP UI.

在 SAP Commerce Cloud 標準的 UI 裏，我們在產品列表頁面選擇某個產品，點擊進入明細頁面：

從產品列表頁面跳轉到產品明細頁面，是通過 Angular 標準的 Router 組件實現的。

下圖產品明細頁面的 url：

http://localhost:4202/electro...

很明顯，這個產品明細頁面的 url，由下列三個片段拼接而成：

靜態的字符串 product
動態參數 358639, 即產品 ID
動態參數 DSC-N1，即產品名稱

產品 ID 和產品名稱維護在 SAP Commerce Cloud Backoffice 裏：

SAP Commerce Cloud UI 的頁面默認路由即 url 格式，通過 Spartacus 接口 RoutesConfig 來定義：

上圖第35行的 paths 數組裏包含的內容，即產品明細頁面 ( 我們開發團隊習慣簡稱為 PDP - Product Detail Page ) 的路由 url 模板。其中 :productCode 是一個佔位符，運行時會被 36 行指定的參數映射數組( paramsMapping )裏指定的 code，即 SAP Commerce Cloud 後台 Product 模型裏的 code 字段的值取代。

之所以引入參數映射的機制，而不直接將 Product 模型字段 code 加入到 url 模板裏，是為了讓 url 模板語義上更加清晰，達到自描述的效果。因為 code 這個單詞比較通用，到底指 Product code，還是指 Product category code 呢？而在 url 模板裏使用表述更加精確的 productCode，再將其映射到 Product 模型的 code 字段，這樣避免了可能產生的歧義。

當我們另外打開一個名稱比較長的產品時，發現此時 url 的顯示效果有些不盡如人意——產品名稱中的空格，被 encode 處理成了 %20:

http://localhost:4202/electro...

因此本文借這個例子，介紹如何通過簡單的二次開發，來更改 SAP Commerce Cloud ( 電商雲 ) 裏產品明細頁面 url 的顯示格式。

假設我們需要實現如下需求：

1. 將產品名稱中包含的空格，替換成連接號 "-" , 並顯示在 url 裏。
2. 在 url 裏顯示產品的製造商信息，即 Product 模型的 manufacturer 字段。

具體實現步驟如下：

1. 新建一個 Angular module，使用 Spartacus 提供的工具方法，ConfigModule.withConfig, 定義一條新的路由配置，鍵為 product，其值會覆蓋掉 Spartacus 發佈的同名默認路由配置：

第31行的 url 模板，包含了靜態字符串 manufacturer, 其後緊跟 Product 模型上的同名字段，表明該產品的製造商名稱，這樣就實現了需求2.

而對於需求1即產品名稱的空格替換為"-", 最常規的思路是，在產品數據從 SAP Commerce Cloud 後台返回前台之後，找一個可以編寫自定義邏輯的鈎子函數 ( hook ) 進行實現。

Jerry 之前的文章 Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版 有這樣一張圖：

從 Commerce 系統讀取產品主數據，讀取的字段列表以 url 參數的形式出現在 API endpoint裏。這些字段列表可以在 Connector 的靜態配置點裏進行配置：

Connector 並不會直接同 Commerce 交互，而是把請求轉發給 Adapter，具體通信由 Adapter 完成，Connector 只負責調度 Adapter.

Connector 將 Adapter 取回的數據交給 NgRx 的 store 結構統一管理，後者的複雜度被 Facade 層所隱藏，而 Spartacus UI 組件只會同 Facade 層交互，進行數據綁定和頁面展示。這體現了關注點分離的設計原則。因為 Commerce UI 組件和 Commerce 後台組件的數據模型存在差異，因此需要 Converter ( 有時也稱 Normalizer )，在數據從 Commerce 取回，準備呈現在 UI 之前，先要通過 Converter 轉換成適合 UI 展示的結構。

因此我創建了一個 ProductNameNormalizer，繼承自Converter，實現其 convert 方法，在裏面將 Product 模型的 name 字段，用正則表達式將包含的所有空格字符，替換成 "-".

上圖第9行，我沒有將替換後的結果值，存儲到 Product 模型的 name 字段裏，而是引入了一個新的 nameForUrl 字段，以避免影響其他可能同樣基於該 name 字段的二次開發。

這個新引入的僅僅用於展示在瀏覽器地址欄裏的字段，在很多 SAP 產品裏都有廣泛的應用，稱呼也各不相同。然而它們都有着同樣的特徵：

*沒有後台持久化存儲，純粹用於UI顯示

• 為了彌補後台模型和 UI 模型字段差異而引入
• 其值通常都是動態計算而成

典型的一個例子是，後台存儲了員工的出生年月，而 UI 顯示的字段是年齡，那麼 UI 模型裏引入一個年齡字段，其值為當前年月減去員工出生年月。

在 SAP CRM 裏，這種運行時根據某種規則，動態填充其值，供 UI 顯示的字段，叫做 Calculated Field:

在 SAP CRM AET (Application Extension Tool) 裏，Key User 可以通過簡單的規則編輯器，維護 Calculated Field 的計算邏輯。當然，這些規則保存後，會編譯生成對應的 ABAP 代碼。

而到了 SAP Cloud for Customer 裏，除了同樣支持 SAP CRM Calculated Field 的規則編輯功能之外，還提供了兩種允許二次開發人員，通過編程來填充用於 UI 臨時顯示字段值的方式：

1. Transient Field

在 SAP Cloud for Customer BO 定義代碼裏，使用註解 Transient，將一個字段標註成 Transient 字段：

然後其值通過編寫 AfterLoading 這個 hook 來填充。

1. Dedicated Field

在 SAP C4C UI Designer 裏將字段類型設置為 Dedicated Field，然後給其分配一個 Transformation，該 Transformation 由二次開發人員用 ABSL ( ABAP Scripting Language ) 實現，負責計算 Dedicated Field 的值。

回到本文介紹的 SAP Commerce Cloud UI 二次開發的例子。我的 Calculated Field，nameForUrl 的值，直接通過 ProductNameNormalizer 實現的 convert 方法填充。

至此這個需求的開發步驟已經結束。最後，將存放了把空格替換成 "-" 的 nameForUrl 字段(下圖綠色高亮)，映射到產品明細頁面 url 模板 (下圖紅色高亮) 即可。

最後的效果：

現在的 url：

http://localhost:4204/electro...

是不是比之前的 url，可讀性要好一些？

http://localhost:4202/electro...

感謝閲讀。

更多閲讀

• 從產品展示頁面談談Hybris的特有概念和設計結構
• 從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator
• Hybris Enterprise Commerce Platform 服務層的設計與實現
• 從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發
• SAP Commerce Cloud (電商雲) UI 的懶加載功能
• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何通過調整CSS來改變UI顯示風格
• SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現
• Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
• 一小時內在本地搭建SAP Commerce Cloud(電商雲)的前後台運行環境

更多Jerry的原創文章，盡在："汪子熙":