這是 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-LEGO

Jerry 之前的文章?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 開發中的組件概念

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

總結

以上是生活随笔為你收集整理的乐高(LEGO)在线购物店面剖析的全部內容，希望文章能夠幫你解決所遇到的問題。

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