在電商系統(tǒng)中，購物車模塊是用戶購買流程的核心環(huán)節(jié)，其設(shè)計的合理性直接影響用戶體驗和銷售轉(zhuǎn)化率。本文將深入探討電商系統(tǒng)購物車模塊的設(shè)計要點，供大家參考。

一、概述

在電商系統(tǒng)中，購物車是核心模塊之一，用戶在瀏覽商品過程中，可將心儀商品添加到購物車，待瀏覽完畢后統(tǒng)一結(jié)算購買。所以一份合理高效的購物車設(shè)計，對于提升用戶體驗、促進(jìn)銷售轉(zhuǎn)化、降低運營成本等方面都有著至關(guān)重要的作用。

由于購物車屬于核心模塊，為講的更清晰，所以針對購物車會拆分幾期來講解

本期針對商品加入購物車、購物車中移除商品、更新購物車中的商品數(shù)量、商品庫存不足、失效商品等場景輸出產(chǎn)品解決方案

二、功能設(shè)計與實現(xiàn)方案

2.1 商品添加到購物車

1、結(jié)構(gòu)設(shè)計

• 商品唯一標(biāo)識：商品ID、SKU ID
• 值為商品對象：數(shù)量、添加時間、狀態(tài)（正常/失效）等字段
• 排序：商品列表按添加/更新時間倒序排列（最新操作置頂）

2、添加邏輯

1）查詢商品在購物車是否存在

用戶點擊 “添加到購物車” 按鈕時，系統(tǒng)首先通過商品ID和SKU ID查詢購物車數(shù)據(jù)結(jié)構(gòu)中是否存在該商品

• 已存在：數(shù)量+1，更新添加時間為當(dāng)前時間（用于置頂排序），將該商品移動到購物車列表頂部
• 不存在：新增條目（新增商品），數(shù)量=1，加入時間=當(dāng)前時間，并置頂，將該商品移動到購物車列表頂部

2）更新總價格：

同時實時計算購物車的總價等信息，如：單價×數(shù)量

3） 存儲：

• 登錄用戶：將購物車數(shù)據(jù)存入Redis
• 未登錄用戶：數(shù)據(jù)緩存在瀏覽器，用戶登錄后合并到Redis（有些電商必須登錄才可以加入購物車，這個根據(jù)實際業(yè)務(wù)去處理）

3、示例：

用戶首次添加商品A（ID=1001），數(shù)量為1，購物車新增條目，并頂部顯示該商品。用戶再次添加同一商品A時，數(shù)量變?yōu)?，商品A繼續(xù)置頂。

2.2 購物車中移除商品

1、移除方式：

• 支持單刪：點擊刪除按鈕
• 批量刪除：勾選后批量操作

2、移除邏輯

1）單個移除：

• 當(dāng)用戶點擊 “從購物車中移除” 按鈕時，前端傳遞需刪除的商品ID/SKU ID
• 后端根據(jù)商品ID、SKU ID、用戶標(biāo)識在購物車數(shù)據(jù)結(jié)構(gòu)表中查找對應(yīng)的商品
• 匹配后從購物車數(shù)據(jù)結(jié)構(gòu)表中刪除對應(yīng)的商品。
• 更新購物車的總價、商品總數(shù)等相關(guān)信息并重新排序剩余商品

2）批量移除：

• 用戶可選擇多個商品進(jìn)行批量刪除，前端傳遞需刪除的商品ID/SKU ID列表
• 后端遍歷購物車數(shù)據(jù)結(jié)構(gòu)中被選中的商品，逐個進(jìn)行刪除操作
• 更新購物車的總價、商品數(shù)等相關(guān)信息并重新排序剩余商品

3、異常處理

• 若刪除失?。ㄈ缇W(wǎng)絡(luò)異常），提示用戶并回滾操作

4、示例

• 用戶勾選5件商品批量刪除，系統(tǒng)遍歷移除后返回剩余列表

2.3 更新購物車中的商品數(shù)量

1、數(shù)量增加 / 減少

1）增加數(shù)量：

• 用戶點擊增加數(shù)量按鈕時，系統(tǒng)在購物車數(shù)據(jù)結(jié)構(gòu)中找到對應(yīng)商品，將其數(shù)量加 1，并相應(yīng)更新購物車總價等信息
• 同時要實時檢查庫存是否充足，若庫存不足則給出相應(yīng)提示并限制數(shù)量增加

2）減少數(shù)量 :

• 用戶點擊減少數(shù)量按鈕時，系統(tǒng)在購物車數(shù)據(jù)結(jié)構(gòu)中找到對應(yīng)商品，將其數(shù)量減 1，并相應(yīng)更新購物車總價等信息
• 若數(shù)量減至 0，則報錯提示用戶號是否要刪除該商品或最小保留1（這點按實際需求處理即可）

2、實現(xiàn)邏輯說明

1）輸入校驗：

• 用戶修改數(shù)量時，校驗輸入值是否合規(guī)：1≤ 數(shù)量 ≤庫存
• 若輸入數(shù)量超過庫存，彈窗提示“庫存不足，當(dāng)前最大可購買X件”
• 若輸入數(shù)量小于1，彈窗提示“至少保留1件”或 “是否要刪除該商品”（按自己實際需求處理）

2）更新邏輯：

• 根據(jù)商品ID和SKU ID找到對應(yīng)的商品。
• 查詢庫存服務(wù)校驗上限，查詢商品狀態(tài)等
• 若商品合規(guī)：更新數(shù)量并重新計算總價；
• 若商品異常：返回錯誤碼（如庫存不足，如已下架），禁止修改數(shù)量并提示。

3、交互設(shè)計：

• 輸入超過庫存時，前端自動修正為最大庫存值并提示“庫存不足，當(dāng)前最大可購買X件”。

4、示例：

• 用戶將商品的數(shù)量從3改為8，但庫存僅剩6，系統(tǒng)自動修正為6，并提示“庫存不足，最多可購買6件”。

2.4 商品庫存不足處理

1、場景處理

1）加購時庫存不足：

當(dāng)添加商品到購物車時，若庫存不足，系統(tǒng)自動修正為最大庫存值并提示“庫存不足，當(dāng)前最大可購買X件”，達(dá)到限制該商品的添加數(shù)量，使其不能超過庫存數(shù)量

2）已加購后庫存不足

已加購的商品出現(xiàn)庫存不足時，系統(tǒng)需更新購物車數(shù)據(jù)結(jié)構(gòu)中該商品的狀態(tài)為 “庫存不足”，在購物車頁面將其置灰且不可勾選，并顯示 “缺貨” 提示，同時禁止將其加入結(jié)算

2、實現(xiàn)邏輯說明

1）購物車實時校驗：

每次打開或刷新購物車時，需調(diào)用庫存服務(wù)校驗商品可用庫存

2）數(shù)量變更時庫存實時校驗：

• 前端限制：輸入框僅允許輸入≤庫存的數(shù)值。
• 后端校驗：每次數(shù)量更新時，調(diào)用庫存服務(wù)檢查可用庫存

3）庫存不足時：

• 前端禁用“數(shù)量+”按鈕，顯示剩余庫存
• 用戶直接輸入數(shù)量，自動修正為最大庫存值并提示“庫存不足，當(dāng)前最大可購買X件”
• 若商品已加入購物車但庫存不足，標(biāo)記為“缺貨”，置灰且不可結(jié)算

2.5 失效商品處理

1、場景處理

1）已售罄商品 ：

已加入購商品售罄時，系統(tǒng)需將其在購物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “售罄”，在購物車頁面將其置灰且不可勾選，并顯示 “已售罄” 提示，同時禁止將其加入結(jié)算

2）下架商品 ：

已加入購商品下架時，系統(tǒng)需將其在購物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “已下架”，在購物車頁面將其置灰且不可勾選，并顯示 “已下架” 提示，同時禁止將其加入結(jié)算

3）區(qū)域限制 ：

已加入購商品存在購買區(qū)域限制，當(dāng)不在其銷售區(qū)域內(nèi)時，系統(tǒng)需將其在購物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “不在配送區(qū)域”，并顯示 “不在配送區(qū)域” 提示，同時禁止將其加入結(jié)算

2、實現(xiàn)邏輯說明

1）處理流程：

• 定時任務(wù)：定期掃描購物車中的商品狀態(tài)，更新失效商品信息，可調(diào)用商品服務(wù)檢查狀態(tài)（如每小時掃描一次）
• 實時校驗：用戶進(jìn)入 或 刷新購物車頁面時進(jìn)行二次校驗

2）標(biāo)記狀態(tài)：

根據(jù)處理結(jié)果，將商品狀態(tài)設(shè)為“失效”，并記錄原因（如“已下架”）

3）界面提示：

• 失效商品置灰，顯示具體原因，如“已下架”“不在配送區(qū)域””“已售罄”等交互文案
• 提供“移除失效商品”一鍵清理功能
• 結(jié)算時自動移除失效商品，并提示用戶

3、示例：

• 用戶購物車中的商品因下架被標(biāo)記為失效，系統(tǒng)對該商品提示“已下架”，并將其置灰且不可勾選

2.6 異常處理機(jī)制

1、移除商品失?。?/strong>