最近在繼續完善自己之前寫的乙個demo:
之前並沒有對購物車進行特別的設計，僅僅是將乙個個商品新增到購物車列表，也沒有做一些處理，比如：列表是按照商家來分類呈現的等等。。。以下是我目前為了學習寫的乙個demo:
接下來，記錄下我的乙個思考：
一. 使用者行為分析
我在想，乙個購物車中，使用者需要做什麼呢？
二. 購物車的具體組成部分
三. 購物車商品選取的基本思路
首先，從乙個基本的商品列表開始，假設我們的商品列表如下（未根據商家進行分類）：
該商品列表我們通過html中的多選表單來進行選取（checkbox），並將他們的值通過乙個陣列來表示，如："checkvals: [false, false, false]"，接著同樣的，我們用checkbox來對全選按鈕進行選取，並將它的值通過乙個變數checkallitem（初始化為false）來繫結。
接著，在基於vuejs框架的環境下，我們可以通過watch監聽checkvals，當其值從部分為true變為全部為true，則將checkallitem的值設為true；相反，當從全為true變為部分true，則將checkallitem的值設為false。
上面是從商品項選取角度考慮，如果從全選的角度來看，則我們直接給全選按鈕繫結乙個click時間觸發函式，如：
/**
* 全選按鈕觸發
*/selectall()
} else }}
上面的購物車列表和列表項均採用「第三部分」提到的結構進行實現，為此我們對於購物車列表形成了類似如下的資料結構：
我們通過對列表項元件中的checkvals的監聽，將某些狀態變化反饋到上一層的購物車列表（父元件）中，同時也從父元件將資料反饋到子元件。
五. 購物車支付
為了方便購物車的支付，我們在監聽每個商品的選中狀態時，將選中的商品的某些資料儲存下來，這樣我們在支付操作時即可通過這些資料將資料庫中的購物車資料進行清空。（目前的demo在進行購物車支付時沒有進行頁面跳轉，故而另外訪問了某些資料方便刪除vuex中訪問的資料）
js寫的簡單購物車
最近在學習js的知識，對於我這種菜鳥而言，js讓我太痛苦了。曾經也不知道聽誰說js很簡單的，所以就學了，學了才知道。都是坑。現在分享乙個我忍著巨大的痛苦寫的乙個簡單購物車，並不是很完善。雖然不是我乙個完成的，但是我是努力弄懂弄回才準備分享出去。有問題的部分請諒解，希望可以幫到有需要的朋友。以下是購物...
購物車設計的總結
文 先小龍 根據調查，2016 年全球購物車放棄率在75 左右，這個數字恐怕比我們想象中的高了很多。而導致這個的原因其中包括 接下來，慢慢剖析一下乙個合格的購物車的基本設計。目錄 1 購物車的作用 2 購物車的入口設計 3 立即結算和加入購物車的區別 4 加入購物車的前置流程 5 購物車系統與其他系...
京東購物車和天貓購物車的設計思維思考
我們先來對比下這兩個功能。場景 拋開電商，我們從日常生活考慮，立即購買的場景經常是使用者有目的性的去購買一件商品，使用者追求的是便捷 流暢的購買流程 查詢商品 選擇商品 下單 支付完成。回到電商，立即購買功能將選擇商品和下單無縫連線起來，使用者不需要跳出當前頁面，只需要按照步驟操作即可，給使用者提供...