電商系統(tǒng)購(gòu)物車模塊設(shè)計(jì)
在電商系統(tǒng)中,購(gòu)物車模塊是用戶購(gòu)買流程的核心環(huán)節(jié),其設(shè)計(jì)的合理性直接影響用戶體驗(yàn)和銷售轉(zhuǎn)化率。本文將深入探討電商系統(tǒng)購(gòu)物車模塊的設(shè)計(jì)要點(diǎn),供大家參考。
一、概述
在電商系統(tǒng)中,購(gòu)物車是核心模塊之一,用戶在瀏覽商品過(guò)程中,可將心儀商品添加到購(gòu)物車,待瀏覽完畢后統(tǒng)一結(jié)算購(gòu)買。所以一份合理高效的購(gòu)物車設(shè)計(jì),對(duì)于提升用戶體驗(yàn)、促進(jìn)銷售轉(zhuǎn)化、降低運(yùn)營(yíng)成本等方面都有著至關(guān)重要的作用。
由于購(gòu)物車屬于核心模塊,為講的更清晰,所以針對(duì)購(gòu)物車會(huì)拆分幾期來(lái)講解
本期針對(duì)商品加入購(gòu)物車、購(gòu)物車中移除商品、更新購(gòu)物車中的商品數(shù)量、商品庫(kù)存不足、失效商品等場(chǎng)景輸出產(chǎn)品解決方案
二、功能設(shè)計(jì)與實(shí)現(xiàn)方案
2.1 商品添加到購(gòu)物車
1、結(jié)構(gòu)設(shè)計(jì)
- 商品唯一標(biāo)識(shí):商品ID、SKU ID
- 值為商品對(duì)象:數(shù)量、添加時(shí)間、狀態(tài)(正常/失效)等字段
- 排序:商品列表按添加/更新時(shí)間倒序排列(最新操作置頂)
2、添加邏輯
1)查詢商品在購(gòu)物車是否存在
用戶點(diǎn)擊 “添加到購(gòu)物車” 按鈕時(shí),系統(tǒng)首先通過(guò)商品ID和SKU ID查詢購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中是否存在該商品
- 已存在:數(shù)量+1,更新添加時(shí)間為當(dāng)前時(shí)間(用于置頂排序),將該商品移動(dòng)到購(gòu)物車列表頂部
- 不存在:新增條目(新增商品),數(shù)量=1,加入時(shí)間=當(dāng)前時(shí)間,并置頂,將該商品移動(dòng)到購(gòu)物車列表頂部
2)更新總價(jià)格:
同時(shí)實(shí)時(shí)計(jì)算購(gòu)物車的總價(jià)等信息,如:?jiǎn)蝺r(jià)×數(shù)量
3) 存儲(chǔ):
- 登錄用戶:將購(gòu)物車數(shù)據(jù)存入Redis
- 未登錄用戶:數(shù)據(jù)緩存在瀏覽器,用戶登錄后合并到Redis(有些電商必須登錄才可以加入購(gòu)物車,這個(gè)根據(jù)實(shí)際業(yè)務(wù)去處理)
3、示例:
用戶首次添加商品A(ID=1001),數(shù)量為1,購(gòu)物車新增條目,并頂部顯示該商品。用戶再次添加同一商品A時(shí),數(shù)量變?yōu)?,商品A繼續(xù)置頂。
2.2 購(gòu)物車中移除商品
1、移除方式:
- 支持單刪:點(diǎn)擊刪除按鈕
- 批量刪除:勾選后批量操作
2、移除邏輯
1)單個(gè)移除:
- 當(dāng)用戶點(diǎn)擊 “從購(gòu)物車中移除” 按鈕時(shí),前端傳遞需刪除的商品ID/SKU ID
- 后端根據(jù)商品ID、SKU ID、用戶標(biāo)識(shí)在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)表中查找對(duì)應(yīng)的商品
- 匹配后從購(gòu)物車數(shù)據(jù)結(jié)構(gòu)表中刪除對(duì)應(yīng)的商品。
- 更新購(gòu)物車的總價(jià)、商品總數(shù)等相關(guān)信息并重新排序剩余商品
2)批量移除:
- 用戶可選擇多個(gè)商品進(jìn)行批量刪除,前端傳遞需刪除的商品ID/SKU ID列表
- 后端遍歷購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中被選中的商品,逐個(gè)進(jìn)行刪除操作
- 更新購(gòu)物車的總價(jià)、商品數(shù)等相關(guān)信息并重新排序剩余商品
3、異常處理
- 若刪除失?。ㄈ缇W(wǎng)絡(luò)異常),提示用戶并回滾操作
4、示例
- 用戶勾選5件商品批量刪除,系統(tǒng)遍歷移除后返回剩余列表
2.3 更新購(gòu)物車中的商品數(shù)量
1、數(shù)量增加 / 減少
1)增加數(shù)量:
- 用戶點(diǎn)擊增加數(shù)量按鈕時(shí),系統(tǒng)在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中找到對(duì)應(yīng)商品,將其數(shù)量加 1,并相應(yīng)更新購(gòu)物車總價(jià)等信息
- 同時(shí)要實(shí)時(shí)檢查庫(kù)存是否充足,若庫(kù)存不足則給出相應(yīng)提示并限制數(shù)量增加
2)減少數(shù)量 :
- 用戶點(diǎn)擊減少數(shù)量按鈕時(shí),系統(tǒng)在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中找到對(duì)應(yīng)商品,將其數(shù)量減 1,并相應(yīng)更新購(gòu)物車總價(jià)等信息
- 若數(shù)量減至 0,則報(bào)錯(cuò)提示用戶號(hào)是否要?jiǎng)h除該商品或最小保留1(這點(diǎn)按實(shí)際需求處理即可)
2、實(shí)現(xiàn)邏輯說(shuō)明
1)輸入校驗(yàn):
- 用戶修改數(shù)量時(shí),校驗(yàn)輸入值是否合規(guī):1≤ 數(shù)量 ≤庫(kù)存
- 若輸入數(shù)量超過(guò)庫(kù)存,彈窗提示“庫(kù)存不足,當(dāng)前最大可購(gòu)買X件”
- 若輸入數(shù)量小于1,彈窗提示“至少保留1件”或 “是否要?jiǎng)h除該商品”(按自己實(shí)際需求處理)
2)更新邏輯:
- 根據(jù)商品ID和SKU ID找到對(duì)應(yīng)的商品。
- 查詢庫(kù)存服務(wù)校驗(yàn)上限,查詢商品狀態(tài)等
- 若商品合規(guī):更新數(shù)量并重新計(jì)算總價(jià);
- 若商品異常:返回錯(cuò)誤碼(如庫(kù)存不足,如已下架),禁止修改數(shù)量并提示。
3、交互設(shè)計(jì):
- 輸入超過(guò)庫(kù)存時(shí),前端自動(dòng)修正為最大庫(kù)存值并提示“庫(kù)存不足,當(dāng)前最大可購(gòu)買X件”。
4、示例:
- 用戶將商品的數(shù)量從3改為8,但庫(kù)存僅剩6,系統(tǒng)自動(dòng)修正為6,并提示“庫(kù)存不足,最多可購(gòu)買6件”。
2.4 商品庫(kù)存不足處理
1、場(chǎng)景處理
1)加購(gòu)時(shí)庫(kù)存不足:
當(dāng)添加商品到購(gòu)物車時(shí),若庫(kù)存不足,系統(tǒng)自動(dòng)修正為最大庫(kù)存值并提示“庫(kù)存不足,當(dāng)前最大可購(gòu)買X件”,達(dá)到限制該商品的添加數(shù)量,使其不能超過(guò)庫(kù)存數(shù)量
2)已加購(gòu)后庫(kù)存不足
已加購(gòu)的商品出現(xiàn)庫(kù)存不足時(shí),系統(tǒng)需更新購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中該商品的狀態(tài)為 “庫(kù)存不足”,在購(gòu)物車頁(yè)面將其置灰且不可勾選,并顯示 “缺貨” 提示,同時(shí)禁止將其加入結(jié)算
2、實(shí)現(xiàn)邏輯說(shuō)明
1)購(gòu)物車實(shí)時(shí)校驗(yàn):
每次打開(kāi)或刷新購(gòu)物車時(shí),需調(diào)用庫(kù)存服務(wù)校驗(yàn)商品可用庫(kù)存
2)數(shù)量變更時(shí)庫(kù)存實(shí)時(shí)校驗(yàn):
- 前端限制:輸入框僅允許輸入≤庫(kù)存的數(shù)值。
- 后端校驗(yàn):每次數(shù)量更新時(shí),調(diào)用庫(kù)存服務(wù)檢查可用庫(kù)存
3)庫(kù)存不足時(shí):
- 前端禁用“數(shù)量+”按鈕,顯示剩余庫(kù)存
- 用戶直接輸入數(shù)量,自動(dòng)修正為最大庫(kù)存值并提示“庫(kù)存不足,當(dāng)前最大可購(gòu)買X件”
- 若商品已加入購(gòu)物車但庫(kù)存不足,標(biāo)記為“缺貨”,置灰且不可結(jié)算
2.5 失效商品處理
1、場(chǎng)景處理
1)已售罄商品 :
已加入購(gòu)商品售罄時(shí),系統(tǒng)需將其在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “售罄”,在購(gòu)物車頁(yè)面將其置灰且不可勾選,并顯示 “已售罄” 提示,同時(shí)禁止將其加入結(jié)算
2)下架商品 :
已加入購(gòu)商品下架時(shí),系統(tǒng)需將其在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “已下架”,在購(gòu)物車頁(yè)面將其置灰且不可勾選,并顯示 “已下架” 提示,同時(shí)禁止將其加入結(jié)算
3)區(qū)域限制 :
已加入購(gòu)商品存在購(gòu)買區(qū)域限制,當(dāng)不在其銷售區(qū)域內(nèi)時(shí),系統(tǒng)需將其在購(gòu)物車數(shù)據(jù)結(jié)構(gòu)中的狀態(tài)標(biāo)記為 “不在配送區(qū)域”,并顯示 “不在配送區(qū)域” 提示,同時(shí)禁止將其加入結(jié)算
2、實(shí)現(xiàn)邏輯說(shuō)明
1)處理流程:
- 定時(shí)任務(wù):定期掃描購(gòu)物車中的商品狀態(tài),更新失效商品信息,可調(diào)用商品服務(wù)檢查狀態(tài)(如每小時(shí)掃描一次)
- 實(shí)時(shí)校驗(yàn):用戶進(jìn)入 或 刷新購(gòu)物車頁(yè)面時(shí)進(jìn)行二次校驗(yàn)
2)標(biāo)記狀態(tài):
根據(jù)處理結(jié)果,將商品狀態(tài)設(shè)為“失效”,并記錄原因(如“已下架”)
3)界面提示:
- 失效商品置灰,顯示具體原因,如“已下架”“不在配送區(qū)域””“已售罄”等交互文案
- 提供“移除失效商品”一鍵清理功能
- 結(jié)算時(shí)自動(dòng)移除失效商品,并提示用戶
3、示例:
- 用戶購(gòu)物車中的商品因下架被標(biāo)記為失效,系統(tǒng)對(duì)該商品提示“已下架”,并將其置灰且不可勾選
2.6 異常處理機(jī)制
1、移除商品失敗:
如網(wǎng)絡(luò)錯(cuò)誤,前端重試機(jī)制 +提示“刪除失敗,請(qǐng)重試”,并保留原數(shù)據(jù)
2、更新數(shù)量時(shí)庫(kù)存不足:
自動(dòng)修正為最大庫(kù)存 + 提示“庫(kù)存不足,當(dāng)前最大可購(gòu)買X件”;且前端限制輸入,后端返回錯(cuò)誤碼,阻止操作。
3、商品失效:
實(shí)時(shí)更新?tīng)顟B(tài),禁止結(jié)算并提示用戶。
4、批量操作沖突:
如同時(shí)修改數(shù)量和刪除,使用事務(wù)確保操作原子性,失敗時(shí)回滾。
5、區(qū)域限制變更:
如地址修改,重新校驗(yàn)購(gòu)物車商品,動(dòng)態(tài)更新可售狀態(tài)
三、案例說(shuō)明
案例1:商品添加與置頂排序
用戶依次添加
- 商品A:添加時(shí)間10:00
- 商品B:添加時(shí)間10:05
- 商品A:再重新添加時(shí)間10:10
購(gòu)物車列表順序?yàn)椋?/strong>
- 商品A:數(shù)量2,時(shí)間10:10
- 商品B:數(shù)量1,時(shí)間10:05
案例2:存在失效商品
用戶在購(gòu)物車中有以下商品:
- 商品A:庫(kù)存10,正常
- 商品B:已下架
- 商品C:配送區(qū)域限制
交互:
- 用戶打開(kāi)購(gòu)物車,系統(tǒng)調(diào)用商品服務(wù)校驗(yàn):
- 商品B標(biāo)記為“已下架”,商品C標(biāo)記為“不支持配送”。
- 用戶嘗試結(jié)算時(shí),系統(tǒng)攔截并提示:“2件商品不可結(jié)算,請(qǐng)移除”。
- 用戶點(diǎn)擊“移除失效商品”,僅保留商品A進(jìn)入結(jié)算頁(yè)。
四、設(shè)計(jì)思路(很重要)
首先,商品添加到購(gòu)物車需要考慮到兩種情況:已存在和首次添加;以及置頂需要考慮到維護(hù)一個(gè)時(shí)間戳或者順序字段,按最新操作排序。
接下來(lái)需要考慮到更新商品數(shù)量,需要檢查庫(kù)存是否足夠問(wèn)題,以及失效商品處理場(chǎng)景,比如下架、售罄、區(qū)域限制等
移除商品時(shí),需要考慮到單刪和批量刪除,要確保數(shù)據(jù)結(jié)構(gòu)中正確找到對(duì)應(yīng)的條目并刪除
最后把這些點(diǎn)整合成一個(gè)結(jié)構(gòu)化的思路。如數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)、核心流程、異常處理、存儲(chǔ)方案等。輸出一份最佳的產(chǎn)品解決方案
作者:pemg的筆記 公眾號(hào):pemg的筆記
本文由 @pemg的筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來(lái)自 Pixabay,基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
- 目前還沒(méi)評(píng)論,等你發(fā)揮!