這是 Jerry 2021 年的第 55 篇文章，也是汪子熙公眾號總共第 332 篇原創文章。

下圖是 SAP Commerce Cloud(電商雲) UI 載入預設的 SampleData 資料集後開啟的主頁，這是一個電子裝置的線上購物店面，基於 SAP Spartacus 開源專案構建而成。

![](https://img-blog.csdnimg.cn/img_convert/3e65167b971fbb4afb70cc65bc26f7e9.png)

本文介紹一個實際客戶案例，在 Jerry 之前的文章 [**關於 SAP 產品 UI 的搜尋引擎最佳化 SEO - Search Engine Optimization**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493081&idx=1&sn=fb4b51e593211fa17f9b6a32217914e5&chksm=ead6574edda1de5804e15751f0054854b8f1bd47762ad5b4cb7af22d674f16d4cbb8a92ecbf2&scene=21#wechat_redirect) 曾經提到過，下圖這個網站，是樂高成功使用 SAP Spartacus 開發並上線的線上購物店面(阿聯酋地區)：

![](https://img-blog.csdnimg.cn/img_convert/80cc3eb843b6b5edd4687da90b6f7f33.png)

大家僅憑視覺效果，能分辨出這兩個網站，實際上都是基於同一個 UI 框架開發出來的嗎？這也再次體現了 SAP Commerce Cloud UI 無頭電商，即 Headless Commerce 的架構。前端電商店面，同 SAP Commerce Cloud 後臺核心功能完全解耦，二者透過 API 互動。這樣，購買了 SAP Commerce Cloud 的客戶，使用 Commerce Cloud 提供的 OCC API 和開源的 SAP Spartacus 框架，可以透過二次開發的方式，構建出外觀能夠體現企業品牌魅力的獨一無二的電商店面。

![](https://img-blog.csdnimg.cn/img_convert/ffb403e0631ca734b3d4adb86cd4114c.png)

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技術介紹的文字版**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect) 裡有介紹。

![](https://img-blog.csdnimg.cn/img_convert/279f35246fd4a2f580a3ef9d886f1a87.png)

上圖紅色區域即 app-root 的子節點內，包含了 cx-storefront 及後代節點。然而我們在 Chrome 開發者工具 network 裡觀察，發現伺服器返回給瀏覽器的初始頁面裡，app-root 節點內是空的，這說明當前我這次的訪問場景是客戶端渲染，即瀏覽器收到伺服器傳送的僅僅包含空 app-root 節點的網頁，然後瀏覽器端執行 Angular 框架程式碼，將完整的頁面原始碼渲染出來。

![](https://img-blog.csdnimg.cn/img_convert/9e1e0a96ced8f95cf4c925e47d049ea4.png)

而在伺服器端渲染場景下，節點 app-root 的內容是在伺服器端生成完畢後再返回給瀏覽器。

對比下圖伺服器端渲染的場景，瀏覽器從伺服器端接受到的網頁原始碼裡，app-root 節點內的內容已經全部渲染完畢：

![](https://img-blog.csdnimg.cn/img_convert/1ed7add0486619a0d46d72ea9acd759e.png)

兩種渲染方式各有優缺點和應用場合，在 Jerry 的文章 [**SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect) 裡有詳細介紹。

在 head 節點下面，有一個重要的 meta 元素，用於維護該店鋪同 SAP Commerce Cloud 後臺互動的明細，name 為 occ-backend-base-url, 值為 API Endpoint.

![](https://img-blog.csdnimg.cn/img_convert/05f1ad1ebd17cbf378806aa580990e23.png)

因此，當我們瀏覽器裡開啟樂高購物網站時，Chrome 開發者工具裡能觀察到發向該 API Endpoint 的一個 HTTP 呼叫。這個 API 呼叫向 Commerce Cloud 詢問，當前頁面 (ID 為 homepage)，應該顯示哪些內容插槽(Content Slots)和元件(Components).

![](https://img-blog.csdnimg.cn/img_convert/ab61036fe08e92c9b9d2e064424c039e.png)

關於 SAP Commerce Cloud UI 頁面佈局的內容插槽和元件，在 Jerry 之前的文章 [**談談 SAP 產品 UI 開發中的元件概念**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect) 裡有所介紹。

SAP Commerce Cloud 的內容管理員(Content Management System Administrator)在 Backoffice CMS 控制檯裡，定義 homepage 應該顯示哪些 Content Slots，以及這些 Slots 裡應該顯示哪些元件。

這些內容資訊維護並儲存在 SAP Commerce Cloud 後臺，透過 API 的方式暴露給 Commerce Cloud 店鋪，後者根據這些資訊進行 Angular 層面的頁面渲染。

![](https://img-blog.csdnimg.cn/img_convert/ec86a9902bd4caf248098ea880cb8295.png)

下圖這個 API 呼叫的響應，說明樂高的 homepage，也是重用了 SAP Commerce Cloud 大部分標準的內容插槽即 Section1，Section2A，Section2B，Section2C 等等：

![](https://img-blog.csdnimg.cn/img_convert/d373d0f8e2dc8ab492e8ff5f23b11a15.png)

只不過從放置到這些標準插槽裡的元件名稱可以看出，樂高做了定製化開發。這些新的元件，命名加上了 Lego 的字首。

![](https://img-blog.csdnimg.cn/img_convert/02a90d3ae26f99788b1bd4d6dc938a81.png)

如果想知道每個內容插槽裡到底顯示了哪些內容，在 Chrome 開發者工具裡檢視 cx-page-slot 節點下面的內容即可：

![](https://img-blog.csdnimg.cn/img_convert/6b68e56b208b21e612d445e21de6ea65.png)

head 區域的其他 meta 元素還包括提供了用於支援搜尋引擎最佳化的後設資料資訊。比如出現在搜尋引擎結果列表裡的描述資訊，就維護在 meta description 的 content 欄位內。

![](https://img-blog.csdnimg.cn/img_convert/696b1776a2672c7812a1efdd28197e4c.png)

![](https://img-blog.csdnimg.cn/img_convert/b75f7136a84f29a510b34113c72d3e02.png)

關於 SAP Commerce Cloud UI 對搜尋引擎最佳化的支援，請參考 Jerry 的文章 [**關於 SAP 產品 UI 的搜尋引擎最佳化 SEO - Search Engine Optimization**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493081&idx=1&sn=fb4b51e593211fa17f9b6a32217914e5&chksm=ead6574edda1de5804e15751f0054854b8f1bd47762ad5b4cb7af22d674f16d4cbb8a92ecbf2&scene=21#wechat_redirect).

在樂高店鋪註冊一個帳號並登入後，在 Chrome 開發者工具裡檢視 Local Storage，發現仍舊採用了 SAP Spartacus 預設的基於 OAuth2 的使用者認證和會話管理機制，在 Jerry 文章 [**SAP Commerce Cloud UI 的使用者會話管理**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493059&idx=1&sn=3e56adfcd4b0562172ca87ec338fd536&chksm=ead65754dda1de4264f813da6bbdf91befd8fc0289a68048b19a4c944d2d5c64e03e65e0183b&scene=21#wechat_redirect) 裡有詳細介紹。

![](https://img-blog.csdnimg.cn/img_convert/b3fd274a8d79e84dcea612a7f739e7a2.png)

在店鋪上點選任意一個樂高產品的圖片後，進入產品明細頁面，抄下該頁面的 url：

https://lego.yellowblocks.me/en-ae/product/lego-main-square/60271-LEGO

Jerry 之前的文章 [**SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491908&idx=1&sn=391f3069597e21d342ce86fdbbef8d0c&chksm=ead653d3dda1dac520f13876de26994fa33ad1f55d616d67b86914bc559427190387770d69d5&scene=21#wechat_redirect) 曾經介紹過 SAP Commerce Cloud UI 頁面路由配置邏輯。

雖然樂高店鋪使用的是構建之後的生產版本，Angular 程式碼中的類名和變數名在該版本中被混淆化成單一的字母，但是程式碼中的 JSON 物件名稱和欄位仍保持不變，因此我們仍然可以從中找到 SAP Spartacus 預設的路由配置。

Chrome 開發者工具裡開啟 main.js 程式碼塊，裡面包含了 Lego Spartacus 專案二次開發專案構建後生成的 JavaScript 程式碼。根據關鍵字 routing 搜尋原始碼，找到 Spartacus 預設的路由配置。

![](https://img-blog.csdnimg.cn/img_convert/0723b491a117674d8e761b4ed507f8fd.png)

定位到產品明細頁面的路由配置：

product/:productCode/:name

![](https://img-blog.csdnimg.cn/img_convert/488d59a6051637b21229da417df18f8b.png)

其中 product 為靜態路徑片段，productCode 和 name 相當於佔位符，其前面的冒號標識二者為路由引數，執行時會被產品明細頁面的產品模型的同名欄位填充。

![](https://img-blog.csdnimg.cn/img_convert/21173420d3d4e47b6151d68c0aeaf7c6.png)

當然本文介紹的只是 SAP Commerce Cloud UI 基於 Spartacus 進行二次開發的冰山一角，希望大家對 SAP 電商雲無頭電商這種前後端分離的設計思路有一個直觀的認識。如果想系統學習 SAP Spartacus 開發，可以從我們團隊釋出在 Github 上的幫助文件開始入手。感謝閱讀。

https://sap.github.io/spartacus-docs/

![](https://img-blog.csdnimg.cn/img_convert/d2678b771f458480947e66dbfefe6261.png)

**更多閱讀**

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [關於 SAP 產品 UI 的搜尋引擎最佳化 SEO - Search Engine Optimization](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493081&idx=1&sn=fb4b51e593211fa17f9b6a32217914e5&chksm=ead6574edda1de5804e15751f0054854b8f1bd47762ad5b4cb7af22d674f16d4cbb8a92ecbf2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud UI 的使用者會話管理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493059&idx=1&sn=3e56adfcd4b0562172ca87ec338fd536&chksm=ead65754dda1de4264f813da6bbdf91befd8fc0289a68048b19a4c944d2d5c64e03e65e0183b&scene=21#wechat_redirect)

*   [SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491908&idx=1&sn=391f3069597e21d342ce86fdbbef8d0c&chksm=ead653d3dda1dac520f13876de26994fa33ad1f55d616d67b86914bc559427190387770d69d5&scene=21#wechat_redirect)

*   [Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect)

*   [從產品展示頁面談談Hybris的特有概念和設計結構](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247483969&idx=1&sn=06adb0a08f9a8e1177842a736bbb1efe&chksm=ead5b0d6dda239c0972f2cbceefe9884c75be07d03f087f0706463b16cc532823802d7891b6c&scene=21#wechat_redirect)

*   [從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484094&idx=1&sn=eb80fa4ac5c19066c343f7e9dbf850fb&chksm=ead5b029dda2393f58a1e46eb219db1dd724d654bdb89976ca16af0c42d59d2f55b21c10be38&scene=21#wechat_redirect)

*   [Hybris Enterprise Commerce Platform 服務層的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485067&idx=1&sn=aba6d36b14f03274e7a714e7d8413b90&chksm=ead5b41cdda23d0a07cf3a76dc6c6fe99dd7ba795d04ce7d358664ddffe3e0a96d8a6b8e034c&scene=21#wechat_redirect)

*   [從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [一小時內在本地搭建SAP Commerce Cloud(電商雲)的前後臺執行環境](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491814&idx=1&sn=4eae20513c64ae3d02db0e0cea0101ef&chksm=ead65271dda1db678b6d54485603ba0cce263bf751c346b47310fac29741d77c2ab834e69887&scene=21#wechat_redirect)

*   [響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492627&idx=1&sn=2f879542eefcd13cca66d6f0dabf2964&chksm=ead65684dda1df923bb11f5da42616a1693f2d8eb7e0218a5a4d3f1a4b59eb957dc105d42938&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

*   [談談 SAP 產品 UI 開發中的元件概念](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect)

樂高(LEGO)線上購物店面剖析

相關文章