這是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/electronics-spa/en/USD/product/358639/DSC-N1

很明顯，這個產品明細頁面的 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/electronics-spa/en/USD/product/23355/Flagship%20tripod%20with%20remote%20control%20and%20pan%20handle

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

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

將產品名稱中包含的空格，替換成連接號 “-” , 并顯示在 url 里。

在 url 里顯示產品的制造商信息，即 Product 模型的 manufacturer 字段。

具體實現步驟如下：

新建一個 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 臨時顯示字段值的方式：

Transient Field

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

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

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/electronics-spa/en/USD/manufacturer/Sony/productname/flagship-tripod-with-remote-control-and-pan-handle/productcode/23355

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

http://localhost:4202/electronics-spa/en/USD/product/23355/Flagship%20tripod%20with%20remote%20control%20and%20pan%20handle

感謝閱讀。

更多閱讀

• 從產品展示頁面談談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的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的SAP Commerce Cloud ( 电商云 ) 路由路径的自定义配置与开发的全部內容，希望文章能夠幫你解決所遇到的問題。

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