這是Jerry 2021年的第 24 篇文章，也是汪子熙公眾號(hào)總共第 295 篇原創(chuàng)文章。

最近看到 SAP天天事 公眾號(hào)發(fā)布的一篇文章：

基于 SAP Commerce Cloud，老娘舅構(gòu)建的餐飲行業(yè)業(yè)務(wù)中臺(tái)成功啟用

老娘舅餐飲股份有限公司創(chuàng)建于1998年，目前位列中國(guó)餐飲百?gòu)?qiáng)第45位，是中國(guó)快餐十大品牌之一。

他們總結(jié)行業(yè)特色，對(duì)比解決方案，經(jīng)過(guò)兩年左右的產(chǎn)品選型和行業(yè)競(jìng)品參考，在對(duì) SAP Commerce 產(chǎn)品管理的靈活性、渠道支持的多樣性、訂單處理的及時(shí)性和系統(tǒng)運(yùn)行穩(wěn)定性等多方面進(jìn)行充分評(píng)估后，老娘舅最終選擇了電商領(lǐng)域的領(lǐng)先產(chǎn)品套件 SAP Commerce Cloud 作為全渠道業(yè)務(wù)中臺(tái)。

本文就從 SAP Commerce Cloud ( 電商云 ) 前臺(tái)路由路徑的自定義配置與開(kāi)發(fā)的一個(gè)實(shí)際例子，來(lái)加深大家對(duì)其靈活性的認(rèn)識(shí)。

Jerry 文章里介紹的 SAP Commerce Cloud UI，如無(wú)特殊說(shuō)明，默認(rèn)均為基于 SAP Spartacus 的新一代單頁(yè)面 UI，而非傳統(tǒng)的 JSP UI.

在 SAP Commerce Cloud 標(biāo)準(zhǔn)的 UI 里，我們?cè)诋a(chǎn)品列表頁(yè)面選擇某個(gè)產(chǎn)品，點(diǎn)擊進(jìn)入明細(xì)頁(yè)面：

從產(chǎn)品列表頁(yè)面跳轉(zhuǎn)到產(chǎn)品明細(xì)頁(yè)面，是通過(guò) Angular 標(biāo)準(zhǔn)的 Router 組件實(shí)現(xiàn)的。

下圖產(chǎn)品明細(xì)頁(yè)面的 url：

http://localhost:4202/electronics-spa/en/USD/product/358639/DSC-N1

很明顯，這個(gè)產(chǎn)品明細(xì)頁(yè)面的 url，由下列三個(gè)片段拼接而成：

靜態(tài)的字符串 product
動(dòng)態(tài)參數(shù) 358639, 即產(chǎn)品 ID
動(dòng)態(tài)參數(shù) DSC-N1，即產(chǎn)品名稱(chēng)

產(chǎn)品 ID 和產(chǎn)品名稱(chēng)維護(hù)在 SAP Commerce Cloud Backoffice 里：

SAP Commerce Cloud UI 的頁(yè)面默認(rèn)路由即 url 格式，通過(guò) Spartacus 接口 RoutesConfig 來(lái)定義：

上圖第35行的 paths 數(shù)組里包含的內(nèi)容，即產(chǎn)品明細(xì)頁(yè)面 ( 我們開(kāi)發(fā)團(tuán)隊(duì)習(xí)慣簡(jiǎn)稱(chēng)為 PDP - Product Detail Page ) 的路由 url 模板。其中 :productCode 是一個(gè)占位符，運(yùn)行時(shí)會(huì)被 36 行指定的參數(shù)映射數(shù)組( paramsMapping )里指定的 code，即 SAP Commerce Cloud 后臺(tái) Product 模型里的 code 字段的值取代。

之所以引入?yún)?shù)映射的機(jī)制，而不直接將 Product 模型字段 code 加入到 url 模板里，是為了讓 url 模板語(yǔ)義上更加清晰，達(dá)到自描述的效果。因?yàn)?code 這個(gè)單詞比較通用，到底指 Product code，還是指 Product category code 呢？而在 url 模板里使用表述更加精確的 productCode，再將其映射到 Product 模型的 code 字段，這樣避免了可能產(chǎn)生的歧義。

當(dāng)我們另外打開(kāi)一個(gè)名稱(chēng)比較長(zhǎng)的產(chǎn)品時(shí)，發(fā)現(xiàn)此時(shí) url 的顯示效果有些不盡如人意——產(chǎn)品名稱(chēng)中的空格，被 encode 處理成了 %20:

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

因此本文借這個(gè)例子，介紹如何通過(guò)簡(jiǎn)單的二次開(kāi)發(fā)，來(lái)更改 SAP Commerce Cloud ( 電商云 ) 里產(chǎn)品明細(xì)頁(yè)面 url 的顯示格式。

假設(shè)我們需要實(shí)現(xiàn)如下需求：

將產(chǎn)品名稱(chēng)中包含的空格，替換成連接號(hào) “-” , 并顯示在 url 里。

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

具體實(shí)現(xiàn)步驟如下：

新建一個(gè) Angular module，使用 Spartacus 提供的工具方法，ConfigModule.withConfig, 定義一條新的路由配置，鍵為 product，其值會(huì)覆蓋掉 Spartacus 發(fā)布的同名默認(rèn)路由配置：

第31行的 url 模板，包含了靜態(tài)字符串 manufacturer, 其后緊跟 Product 模型上的同名字段，表明該產(chǎn)品的制造商名稱(chēng)，這樣就實(shí)現(xiàn)了需求2.

而對(duì)于需求1即產(chǎn)品名稱(chēng)的空格替換為"-", 最常規(guī)的思路是，在產(chǎn)品數(shù)據(jù)從 SAP Commerce Cloud 后臺(tái)返回前臺(tái)之后，找一個(gè)可以編寫(xiě)自定義邏輯的鉤子函數(shù) ( hook ) 進(jìn)行實(shí)現(xiàn)。

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

從 Commerce 系統(tǒng)讀取產(chǎn)品主數(shù)據(jù)，讀取的字段列表以 url 參數(shù)的形式出現(xiàn)在 API endpoint里。這些字段列表可以在 Connector 的靜態(tài)配置點(diǎn)里進(jìn)行配置：

Connector 并不會(huì)直接同 Commerce 交互，而是把請(qǐng)求轉(zhuǎn)發(fā)給 Adapter，具體通信由 Adapter 完成，Connector 只負(fù)責(zé)調(diào)度 Adapter.

Connector 將 Adapter 取回的數(shù)據(jù)交給 NgRx 的 store 結(jié)構(gòu)統(tǒng)一管理，后者的復(fù)雜度被 Facade 層所隱藏，而 Spartacus UI 組件只會(huì)同 Facade 層交互，進(jìn)行數(shù)據(jù)綁定和頁(yè)面展示。這體現(xiàn)了關(guān)注點(diǎn)分離的設(shè)計(jì)原則。因?yàn)?Commerce UI 組件和 Commerce 后臺(tái)組件的數(shù)據(jù)模型存在差異，因此需要 Converter ( 有時(shí)也稱(chēng) Normalizer )，在數(shù)據(jù)從 Commerce 取回，準(zhǔn)備呈現(xiàn)在 UI 之前，先要通過(guò) Converter 轉(zhuǎn)換成適合 UI 展示的結(jié)構(gòu)。

因此我創(chuàng)建了一個(gè) ProductNameNormalizer，繼承自Converter，實(shí)現(xiàn)其 convert 方法，在里面將 Product 模型的 name 字段，用正則表達(dá)式將包含的所有空格字符，替換成 “-”.

上圖第9行，我沒(méi)有將替換后的結(jié)果值，存儲(chǔ)到 Product 模型的 name 字段里，而是引入了一個(gè)新的 nameForUrl 字段，以避免影響其他可能同樣基于該 name 字段的二次開(kāi)發(fā)。

這個(gè)新引入的僅僅用于展示在瀏覽器地址欄里的字段，在很多 SAP 產(chǎn)品里都有廣泛的應(yīng)用，稱(chēng)呼也各不相同。然而它們都有著同樣的特征：

*沒(méi)有后臺(tái)持久化存儲(chǔ)，純粹用于UI顯示

• 為了彌補(bǔ)后臺(tái)模型和 UI 模型字段差異而引入
• 其值通常都是動(dòng)態(tài)計(jì)算而成

典型的一個(gè)例子是，后臺(tái)存儲(chǔ)了員工的出生年月，而 UI 顯示的字段是年齡，那么 UI 模型里引入一個(gè)年齡字段，其值為當(dāng)前年月減去員工出生年月。

在 SAP CRM 里，這種運(yùn)行時(shí)根據(jù)某種規(guī)則，動(dòng)態(tài)填充其值，供 UI 顯示的字段，叫做 Calculated Field:

在 SAP CRM AET (Application Extension Tool) 里，Key User 可以通過(guò)簡(jiǎn)單的規(guī)則編輯器，維護(hù) Calculated Field 的計(jì)算邏輯。當(dāng)然，這些規(guī)則保存后，會(huì)編譯生成對(duì)應(yīng)的 ABAP 代碼。

而到了 SAP Cloud for Customer 里，除了同樣支持 SAP CRM Calculated Field 的規(guī)則編輯功能之外，還提供了兩種允許二次開(kāi)發(fā)人員，通過(guò)編程來(lái)填充用于 UI 臨時(shí)顯示字段值的方式：

Transient Field

在 SAP Cloud for Customer BO 定義代碼里，使用注解 Transient，將一個(gè)字段標(biāo)注成 Transient 字段：

然后其值通過(guò)編寫(xiě) AfterLoading 這個(gè) hook 來(lái)填充。

Dedicated Field

在 SAP C4C UI Designer 里將字段類(lèi)型設(shè)置為 Dedicated Field，然后給其分配一個(gè) Transformation，該 Transformation 由二次開(kāi)發(fā)人員用 ABSL ( ABAP Scripting Language ) 實(shí)現(xiàn)，負(fù)責(zé)計(jì)算 Dedicated Field 的值。

回到本文介紹的 SAP Commerce Cloud UI 二次開(kāi)發(fā)的例子。我的 Calculated Field，nameForUrl 的值，直接通過(guò) ProductNameNormalizer 實(shí)現(xiàn)的 convert 方法填充。

至此這個(gè)需求的開(kāi)發(fā)步驟已經(jīng)結(jié)束。最后，將存放了把空格替換成 “-” 的 nameForUrl 字段(下圖綠色高亮)，映射到產(chǎn)品明細(xì)頁(yè)面 url 模板 (下圖紅色高亮) 即可。

最后的效果：

現(xiàn)在的 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

感謝閱讀。

更多閱讀

• 從產(chǎn)品展示頁(yè)面談?wù)凥ybris的特有概念和設(shè)計(jì)結(jié)構(gòu)

• 從產(chǎn)品展示頁(yè)面談?wù)凥ybris系列之二: DTO, Converter和Populator

• Hybris Enterprise Commerce Platform 服務(wù)層的設(shè)計(jì)與實(shí)現(xiàn)

• 從一個(gè)實(shí)際的例子出發(fā)，談?wù)凷AP Commerce Cloud電商云的UI自定義開(kāi)發(fā)

• SAP Commerce Cloud (電商云) UI 的懶加載功能

• SAP CRM Fiori 應(yīng)用和 SAP Commerce Cloud (電商云) UI 如何通過(guò)調(diào)整CSS來(lái)改變UI顯示風(fēng)格

• SAP 產(chǎn)品一脈相承的 UI 增強(qiáng)思路，在 SAP Commerce Cloud (電商云) UI 增強(qiáng)實(shí)現(xiàn)中的體現(xiàn)

• Jerry在2020 SAP全球技術(shù)大會(huì)的分享：SAP Spartacus技術(shù)介紹的文字版

• 一小時(shí)內(nèi)在本地搭建SAP Commerce Cloud(電商云)的前后臺(tái)運(yùn)行環(huán)境

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。