|
這是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ó)餐飲百強(qiáng)第45位，是中國(guó)快餐十大品牌之一。 他們總結(jié)行業(yè)特色，對(duì)比解決方案，經(jīng)過兩年左右的產(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)路由路徑的自定義配置與開發(fā)的一個(gè)實(shí)際例子，來加深大家對(duì)其靈活性的認(rèn)識(shí)。 Jerry 文章里介紹的 SAP Commerce Cloud UI，如無特殊說明，默認(rèn)均為基于 SAP Spartacus 的新一代單頁面 UI，而非傳統(tǒng)的 JSP UI. 在 SAP Commerce Cloud 標(biāo)準(zhǔn)的 UI 里，我們?cè)诋a(chǎn)品列表頁面選擇某個(gè)產(chǎn)品，點(diǎn)擊進(jìn)入明細(xì)頁面： 從產(chǎn)品列表頁面跳轉(zhuǎn)到產(chǎn)品明細(xì)頁面，是通過 Angular 標(biāo)準(zhǔn)的 Router 組件實(shí)現(xiàn)的。 下圖產(chǎn)品明細(xì)頁面的 url： http://localhost:4202/electronics-spa/en/USD/product/358639/DSC-N1 很明顯，這個(gè)產(chǎn)品明細(xì)頁面的 url，由下列三個(gè)片段拼接而成：
產(chǎn)品 ID 和產(chǎn)品名稱維護(hù)在 SAP Commerce Cloud Backoffice 里： SAP Commerce Cloud UI 的頁面默認(rèn)路由即 url 格式，通過 Spartacus 接口 RoutesConfig 來定義： 上圖第35行的 paths 數(shù)組里包含的內(nèi)容，即產(chǎn)品明細(xì)頁面 ( 我們開發(fā)團(tuán)隊(duì)習(xí)慣簡(jiǎn)稱為 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 模板語義上更加清晰，達(dá)到自描述的效果。因?yàn)?code 這個(gè)單詞比較通用，到底指 Product code，還是指 Product category code 呢？而在 url 模板里使用表述更加精確的 productCode，再將其映射到 Product 模型的 code 字段，這樣避免了可能產(chǎn)生的歧義。 當(dāng)我們另外打開一個(gè)名稱比較長(zhǎng)的產(chǎn)品時(shí)，發(fā)現(xiàn)此時(shí) url 的顯示效果有些不盡如人意——產(chǎn)品名稱中的空格，被 encode 處理成了 %20: http://localhost:4202/electronics-spa/en/USD/product/23355/Flagship%20tripod%20with%20remote%20control%20and%20pan%20handle 因此本文借這個(gè)例子，介紹如何通過簡(jiǎn)單的二次開發(fā)，來更改 SAP Commerce Cloud ( 電商云 ) 里產(chǎn)品明細(xì)頁面 url 的顯示格式。 假設(shè)我們需要實(shí)現(xiàn)如下需求： 1. 將產(chǎn)品名稱中包含的空格，替換成連接號(hào) "-" , 并顯示在 url 里。 2. 在 url 里顯示產(chǎn)品的制造商信息，即 Product 模型的 manufacturer 字段。 具體實(shí)現(xiàn)步驟如下： 1. 新建一個(gè) Angular module，使用 Spartacus 提供的工具方法，ConfigModule.withConfig, 定義一條新的路由配置，鍵為 product，其值會(huì)覆蓋掉 Spartacus 發(fā)布的同名默認(rèn)路由配置： 第31行的 url 模板，包含了靜態(tài)字符串 manufacturer, 其后緊跟 Product 模型上的同名字段，表明該產(chǎn)品的制造商名稱，這樣就實(shí)現(xiàn)了需求2. 而對(duì)于需求1即產(chǎn)品名稱的空格替換為 "-", 最常規(guī)的思路是，在產(chǎn)品數(shù)據(jù)從 SAP Commerce Cloud 后臺(tái)返回前臺(tái)之后，找一個(gè)可以編寫自定義邏輯的鉤子函數(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ù)綁定和頁面展示。這體現(xiàn)了關(guān)注點(diǎn)分離的設(shè)計(jì)原則。因?yàn)?Commerce UI 組件和 Commerce 后臺(tái)組件的數(shù)據(jù)模型存在差異，因此需要 Converter ( 有時(shí)也稱 Normalizer )，在數(shù)據(jù)從 Commerce 取回，準(zhǔn)備呈現(xiàn)在 UI 之前，先要通過 Converter 轉(zhuǎn)換成適合 UI 展示的結(jié)構(gòu)。 因此我創(chuàng)建了一個(gè) ProductNameNormalizer，繼承自Converter，實(shí)現(xiàn)其 convert 方法，在里面將 Product 模型的 name 字段，用正則表達(dá)式將包含的所有空格字符，替換成 "-". 上圖第9行，我沒有將替換后的結(jié)果值，存儲(chǔ)到 Product 模型的 name 字段里，而是引入了一個(gè)新的 nameForUrl 字段，以避免影響其他可能同樣基于該 name 字段的二次開發(fā)。 這個(gè)新引入的僅僅用于展示在瀏覽器地址欄里的字段，在很多 SAP 產(chǎn)品里都有廣泛的應(yīng)用，稱呼也各不相同。然而它們都有著同樣的特征：
典型的一個(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 可以通過簡(jiǎn)單的規(guī)則編輯器，維護(hù) Calculated Field 的計(jì)算邏輯。當(dāng)然，這些規(guī)則保存后，會(huì)編譯生成對(duì)應(yīng)的 ABAP 代碼。
而到了 SAP Cloud for Customer 里，除了同樣支持 SAP CRM Calculated Field 的規(guī)則編輯功能之外，還提供了兩種允許二次開發(fā)人員，通過編程來填充用于 UI 臨時(shí)顯示字段值的方式： 1. Transient Field 在 SAP Cloud for Customer BO 定義代碼里，使用注解 Transient，將一個(gè)字段標(biāo)注成 Transient 字段：
然后其值通過編寫 AfterLoading 這個(gè) hook 來填充。
2. Dedicated Field 在 SAP C4C UI Designer 里將字段類型設(shè)置為 Dedicated Field，然后給其分配一個(gè) Transformation，該 Transformation 由二次開發(fā)人員用 ABSL ( ABAP Scripting Language ) 實(shí)現(xiàn)，負(fù)責(zé)計(jì)算 Dedicated Field 的值。
回到本文介紹的 SAP Commerce Cloud UI 二次開發(fā)的例子。我的 Calculated Field，nameForUrl 的值，直接通過 ProductNameNormalizer 實(shí)現(xiàn)的 convert 方法填充。
至此這個(gè)需求的開發(fā)步驟已經(jīng)結(jié)束。最后，將存放了把空格替換成 "-" 的 nameForUrl 字段(下圖綠色高亮)，映射到產(chǎn)品明細(xì)頁面 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 感謝閱讀。 更多閱讀
|
|
|
