這是 Jerry 2021 年的第 55 篇文章，也是汪子熙公衆号總共第 332 篇原創文章。
下圖是 SAP Commerce Cloud(電商雲) UI 加載預設的 SampleData 資料集後打開的首頁，這是一個電子裝置的線上購物店面，基于 SAP Spartacus 開源項目建構而成。
本文介紹一個實際客戶案例，在 Jerry 之前的文章 關于 SAP 産品 UI 的搜尋引擎優化 SEO - Search Engine Optimization 曾經提到過，下圖這個網站，是樂高成功使用 SAP Spartacus 開發并上線的線上購物店面(阿聯酋地區)：
大家僅憑視覺效果，能分辨出這兩個網站，實際上都是基于同一個 UI 架構開發出來的嗎？這也再次展現了 SAP Commerce Cloud UI 無頭電商，即 Headless Commerce 的架構。前端電商店面，同 SAP Commerce Cloud 背景核心功能完全解耦，二者通過 API 互動。這樣，購買了 SAP Commerce Cloud 的客戶，使用 Commerce Cloud 提供的 OCC API 和開源的 SAP Spartacus 架構，可以通過二次開發的方式，建構出外觀能夠展現企業品牌魅力的獨一無二的電商店面。
Jerry 是開發人員而不是使用者體驗工程師，是以沒有能力從樂高這個店面外觀的設計風格角度給大家分享一些幹貨，隻能從 SAP Commerce Cloud UI 二次開發的層面，給大家介紹該店面背後的一些實作細節。
打開 Chrome 開發者工具，根據 Elements 面闆的 app-root 和 cx-storefront 元素，立即能分辨出該店鋪界面開發基于 SAP Spartacus(Angular 版本号 8.2.13)，而不是傳統的 JSP Accelerator.關于這兩種開發電商店鋪技術的差別，在 Jerry 的文章 Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版 裡有介紹。
上圖紅色區域即 app-root 的子節點内，包含了 cx-storefront 及後代節點。然而我們在 Chrome 開發者工具 network 裡觀察，發現伺服器傳回給浏覽器的初始頁面裡，app-root 節點内是空的，這說明目前我這次的通路場景是用戶端渲染，即浏覽器收到伺服器發送的僅僅包含空 app-root 節點的網頁，然後浏覽器端執行 Angular 架構代碼，将完整的頁面源代碼渲染出來。
而在伺服器端渲染場景下，節點 app-root 的内容是在伺服器端生成完畢後再傳回給浏覽器。
對比下圖伺服器端渲染的場景，浏覽器從伺服器端接受到的網頁源代碼裡，app-root 節點内的内容已經全部渲染完畢：
兩種渲染方式各有優缺點和應用場合，在 Jerry 的文章 SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染 裡有詳細介紹。
在 head 節點下面，有一個重要的 meta 元素，用于維護該店鋪同 SAP Commerce Cloud 背景互動的明細，name 為 occ-backend-base-url, 值為 API Endpoint.
是以，當我們浏覽器裡打開樂高購物網站時，Chrome 開發者工具裡能觀察到發向該 API Endpoint 的一個 HTTP 調用。這個 API 調用向 Commerce Cloud 詢問，目前頁面 (ID 為 homepage)，應該顯示哪些内容插槽(Content Slots)群組件(Components).
關于 SAP Commerce Cloud UI 頁面布局的内容插槽群組件，在 Jerry 之前的文章 談談 SAP 産品 UI 開發中的元件概念 裡有所介紹。
SAP Commerce Cloud 的内容管理者(Content Management System Administrator)在 Backoffice CMS 控制台裡，定義 homepage 應該顯示哪些 Content Slots，以及這些 Slots 裡應該顯示哪些元件。
這些内容資訊維護并存儲在 SAP Commerce Cloud 背景，通過 API 的方式暴露給 Commerce Cloud 店鋪，後者根據這些資訊進行 Angular 層面的頁面渲染。
下圖這個 API 調用的響應，說明樂高的 homepage，也是重用了 SAP Commerce Cloud 大部分标準的内容插槽即 Section1，Section2A，Section2B，Section2C 等等：
隻不過從放置到這些标準插槽裡的元件名稱可以看出，樂高做了定制化開發。這些新的元件，命名加上了 Lego 的字首。
如果想知道每個内容插槽裡到底顯示了哪些内容，在 Chrome 開發者工具裡檢視 cx-page-slot 節點下面的内容即可：
head 區域的其他 meta 元素還包括提供了用于支援搜尋引擎優化的中繼資料資訊。比如出現在搜尋引擎結果清單裡的描述資訊，就維護在 meta description 的 content 字段内。
關于 SAP Commerce Cloud UI 對搜尋引擎優化的支援，請參考 Jerry 的文章 關于 SAP 産品 UI 的搜尋引擎優化 SEO - Search Engine Optimization.
在樂高店鋪注冊一個帳号并登入後，在 Chrome 開發者工具裡檢視 Local Storage，發現仍舊采用了 SAP Spartacus 預設的基于 OAuth2 的使用者認證和會話管理機制，在 Jerry 文章 SAP Commerce Cloud UI 的使用者會話管理 裡有詳細介紹。
在店鋪上點選任意一個樂高産品的圖檔後，進入産品明細頁面，抄下該頁面的 url：
https://lego.yellowblocks.me/en-ae/product/lego-main-square/60271-LEGOJerry 之前的文章 SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發 曾經介紹過 SAP Commerce Cloud UI 頁面路由配置邏輯。
雖然樂高店鋪使用的是建構之後的生産版本，Angular 代碼中的類名和變量名在該版本中被混淆化成單一的字母，但是代碼中的 JSON 對象名稱和字段仍保持不變，是以我們仍然可以從中找到 SAP Spartacus 預設的路由配置。
Chrome 開發者工具裡打開 main.js 代碼塊，裡面包含了 Lego Spartacus 項目二次開發項目建構後生成的 JavaScript 代碼。根據關鍵字 routing 搜尋源代碼，找到 Spartacus 預設的路由配置。
定位到産品明細頁面的路由配置：
product/:productCode/:name
其中 product 為靜态路徑片段，productCode 和 name 相當于占位符，其前面的冒号辨別二者為路由參數，運作時會被産品明細頁面的産品模型的同名字段填充。
當然本文介紹的隻是 SAP Commerce Cloud UI 基于 Spartacus 進行二次開發的冰山一角，希望大家對 SAP 電商雲無頭電商這種前後端分離的設計思路有一個直覺的認識。如果想系統學習 SAP Spartacus 開發，可以從我們團隊釋出在 Github 上的幫助文檔開始入手。感謝閱讀。
https://sap.github.io/spartacus-docs/ 更多閱讀
SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染
關于 SAP 産品 UI 的搜尋引擎優化 SEO - Search Engine Optimization
SAP Commerce Cloud UI 的使用者會話管理
SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發
Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
從産品展示頁面談談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 增強實作中的展現
一小時内在本地搭建SAP Commerce Cloud(電商雲)的前背景運作環境
響應式程式設計在 SAP 标準産品 UI 開發中的一個實踐
SAP UI的加載動畫效果和幽靈設計(Ghost Design)
談談 SAP 産品 UI 開發中的元件概念