目前電商領域有兩款比較出名的開源電商網站解決方案，分別是基於 Angular 開發框架，代號為 Spartacus 的開源專案，以及基於 Vue 的 Vue Storefront.

![](https://img-blog.csdnimg.cn/img_convert/457f375d312e3ed05ae779b697f78ef4.png)
![](https://img-blog.csdnimg.cn/img_convert/7c970d437a4bd53d9cedd1dda6c65270.png)

作為 Spartacus 開源專案的開發成員之一，今天我想透過本文，給大家介紹一下我們平時購物時最常使用到的功能之一，新增產品到購物車的技術實現。

即使沒有多少 Angular 開發經驗的前端程式設計師，閱讀本文之後，也能對 Spartacus 電商網站新增商品到購物車的功能實現，有一個最基礎的瞭解。

我們將 Github 上 Spartacus [程式碼倉庫](https://github.com/SAP/spartacus)的程式碼克隆到本地並執行後，透過 https://localhost:4299 可以訪問電商頁面的 UI：

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

可以看到此時右上角紅色的購物車圖示顯示的數字為0，意思是當前使用者 Jerry Wang，還沒有新增任意的商品到購物車裡。

我們隨便在店鋪上選擇一臺電子裝置，進入商品明細頁面，點選 Add To Cart，將其新增到購物車：

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

可以在上圖產品明細頁面的 url 裡，找到其產品編號為 1377492.

點選了 Add To Cart 後，在 Chrome 開發者工具 network 標籤頁裡觀察到一個 HTTP POST 請求：

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

上圖展示的該 POST 請求的負載裡，包含 ID 為 1377492 的產品資訊。這個 HTTP POST 請求呼叫購物車更新的 Restful API , 將客戶選中的產品新增到購物車裡。

該請求響應欄位的 statusCode 為 success，如下圖所示，說明 API 呼叫成功。

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

新增成功的購物車介面一覽：

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

店鋪管理員可以登入電商後臺管理頁面，根據購物車編號 2357 查到我剛剛新增了商品的購物車：
![](https://img-blog.csdnimg.cn/img_convert/ce5d366118f2c8d619f3a9014d9a7df0.png)

下面介紹 Add To Cart 按鈕的前端實現細節。

使用 Chrome 開發者工具，很快就能找到這個按鈕所在的 Angular Component 的 selector：cx-add-to-cart

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

進而找到該 Component 的實現：
![](https://img-blog.csdnimg.cn/img_convert/7a2a56a18ad4d980f54f36b5c3108dfc.png)

從上圖程式碼第 21 行可以看出，Add To Cart 按鈕本身的顯示條件，是這個產品必須有庫存。當客戶輸入的購買個數小於等於 0，或者大於最大庫存數時，該按鈕會被禁用。

點選該 button 之後，執行什麼邏輯呢？第 23 行該 button 元素的型別 type 欄位的值為 submit，而這個 button 標籤，包裹在一個 form 標籤內。

我們到該 Component 對應的模板檔案頭部檢視，發現了 submit 事件的處理函式為 addToCart：

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

在 addToCart 內部，新增商品到購物車的執行邏輯，投遞到了該 Component 注入的服務類，ActiveCartService 的 addEntry 方法。

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

最終，我們使用 NgRx 狀態管理框架，將新增購物車這個動作，抽象成一個名為 CartActions.CartAddEntry 的 Action 類，並透過 NgRx Store 的 dispatch 方法投遞。

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

根據 NgRx 的架構圖，這些投遞出的 Action，最終會被 Effects 接收，後者會呼叫 Restful API 同後臺伺服器通訊。

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

下圖就是負責接收 CartActions.CartAddEntry 的 Effects 實現，後者又會將這個新增購物車請求，投遞給 CartEntryConnector.

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

Spartacus 與後臺伺服器的互動設計如下圖所示：

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

Connector 會把新增購物車的請求轉發給 Adapter(即下圖第18行的 this.adapter),由後者呼叫 HTTP Restful API.

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

然而，這個 CartEntryAdapter 本身和其 add 方法，前面都加上了 abstract 關鍵字，那麼具體的實現到底在哪裡呢？

在對應的 NgModule 定義裡能找到答案：OccCartEntryAdapter 實現了這個 abstract class.

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

最終，我們在 OccCartEntryAdapter 的實現程式碼裡，發現這個類，從配置資訊裡讀取並生成後臺對應的購物車更新的 API endpoint，然後使用注入的 HttpClient 的 post 方法(下圖第35行程式碼)，根據生成的 endpoint 呼叫這個 API，最終完成購物車更新操作。

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

# 總結

本文透過一個最常用的新增商品到購物車的例子，分析了 Spartacus 這款開源電商店鋪應用解決方案前端透過 Restful API 呼叫的方式同後端互動的原理。

歡迎大家訪問 Spartacus 專案的 [Github](https://github.com/SAP/spartacus) 主頁, 試用這個應用，並提出您的寶貴意見。

介紹一款開源電商網站的購物車新增功能的實現

相關文章