摘要：通過查詢用戶所有商品并傳入模板，條件用戶，結算狀態。貼出部分代碼用戶加入購物車按鈕鏈接所對應路徑的處理，如商品通過獲取商品號并檢測登陸用戶狀態。通過方法獲取購物車商品模型。附上本電商網站項目的源碼，供各位研究開發擴展歡迎提

添加商品鏈接

上節課程里我們已經實現了商品的添加和展示，接下來我們開始進行對商品的操作——加入購物車。

首先，商品頁的加入購物車按鈕、購物車查看按鈕添加鏈接，如下所示：

加入購物車

我們先定義購物車(cart)集合的Schema屬性，包含：uId(用戶ID)、cId(商品ID)、cName(商品名稱)、cPrice(商品價格)、cImgSrc(商品展示圖片路徑)、cQuantity(商品數量)、cStatus(商品結算狀態，默認為false)，參考如下：

cart: {
    uId: {type: String},
    cId: {type: String},
    cName: {type: String},
    cPrice: {type: String},
    cImgSrc: {type: String},
    cQuantity: {type: Number},
    cStatus: {type: Boolean, default: false}
}

以上屬性定義我們還是統一放到models.js文件中以方便管理和操作。

接著views目錄下添加購物車(cart.html)視圖頁面，參考如下：

購物車頁面的展示實現可參考如下貼圖：

    <%for(var i in carts){
    if(!carts[i].cId){
    continue;
    }
    }%>
    

        

            
        
        

            
                
            
        
        

            <%=carts[i].cName%>
        
        

            <%=carts[i].cPrice%>
        
        

            +
            
            -
        
        

            刪除
        
    
    <%}%>

訪問視圖

接著在routes目錄添加cart.js文件(index.js文件中引用)，來定義路由處理規則。

比如cart路徑的處理，如下：

1.檢測登陸用戶是否過期，已過期則跳轉login頁同時給出提示信息。

2.通過global.dbHelper.getModel方法獲取cart模型。

3.通過find查詢用戶所有商品并傳入模板，條件：用戶ID，結算狀態。

4.貼出部分代碼：

app.get("/cart", function (req, res) {
    ......
    Cart.find({"uId": 用戶ID, "cStatus": false}, function (error, docs) {
        res.render("cart", {carts: docs});
    });
});

加入購物車按鈕鏈接所對應路徑的處理，如：/addToCart/:商品id

app.get("/addToCart/:id", function(req, res) {...});

1.通過req.params.id獲取商品ID號并檢測登陸用戶狀態。

2.通過global.dbHelper.getModel方法獲取購物車(cart)、商品(commodity)模型。

3.商品已存在則進行更新操作，貼出部分參考代碼：

Cart.update({"uId":用戶ID,"cId":商品ID},{$set:{cQuantity:已有數量+1}}

4.商品未存在則進行添加操作，貼出部分代碼：

Commodity.findOne({"_id": 商品ID}, function (error, doc) {
        Cart.create({
            uId: 用戶ID,
            cId: 商品ID,
            cName: doc.name,
            cPrice: doc.price,
            cImgSrc: doc.imgSrc,
            cQuantity : 1
        },function(error,doc){
            if(doc){
                res.redirect("/home");
            }
        });
});

在購物車頁面展示還是使用ejs模板(具體實現可參考貼圖)來實現用戶購物車商品的展示，現期間我們用到了checkbox，這里我們就來簡單的實現商品的全選和單選。

首先，簡單介紹實現步驟：

用戶選中全選按鈕時，列表內選框全部變為勾選狀態。

用戶取消全選按鈕選中狀態時，列表內選框全部取消勾選狀態。

列表內選框為全部勾選狀態時，全選按鈕為選中狀態，反之不勾選。

全選按鈕未選中情況下，當列表內按鈕全部選中則全選按鈕也要被選中。

對于checkbox按鈕如下圖所示：

注：data-index屬性存儲索引值用來獲取商品數量，data=id存儲商品ID，data-price存儲商品價格。

實現全選：為全選框(如id為CheckAll)添加單擊事件，這里我們使用prop方法設置checkbox狀態、is方法判斷checkbox狀態，如下參考示例：

$("#CheckAll").click(function(){
       var self = $(this);
       $("input[name="chkItem"]").each(function(){
          $(this).prop("checked",self.is(":checked"));
       });
 });

實現單選：單選框(如name為chkItem)添加單擊事件，這里我們使用prop方法設置checkbox狀態、not方法判斷checkbox狀態，如下參考示例：

$("input[name="chkItem"]:checkbox").click(function(){
   var isCheck = $("input[name="chkItem"]:not(:checked)").length?false:true;
   $("#CheckAll").prop("checked",isCheck);
});

到這里我們就簡單實現了按鈕的全選和單選，以上方法可供參考也可以自行思路去實現。

前面我們實現了對于商品的單選和全選功能，下面我們就開始實現商品數量的加減。

對于+、-按鈕如下所示：

    +
    
    -

簡單實現步驟如下：

定義data-type屬性用于區分+、-按鈕。

a標簽添加單擊事件。并同時改變顯示框的值。

使用siblings()方法改變同級標簽的數量值。

具體實現可參考如下方法：

$(".li-quantity a").click(function(){
    var self = $(this);
    var type = self.attr("data-type"),
        num = parseFloat(self.siblings("input").val());
    if(type == "add"){
          num += 1;
     }else if(type == "subtr"){
          if(num > 1){
             num -= 1;
          }else{
             return false;
          }
     }
    self.siblings("input").val(num);
});

到這里對于商品數量的加、減也實現了，接著我們開始實現用戶選中商品的總價格計算功能。

計算總金額

商品的狀態選擇和數量的加減功能我們已經實現了，選擇我們就開始實現當用戶選擇相關商品時總金額的計算功能。

實現步驟如下：

定義公共方法，用于用戶不同加、減、全選等操作時皆可調用。

循環列表內所有被選中的checkbox(假設name為chkItem)。

使用checkbox的相應屬性值，來獲取價格和數量。

定義全局變量(假設為sum)存儲總金額并賦值顯示。

具體方法實現可參考如下內容：

sum = 0;
$("input[name="chkItem"]:checked").each(function () {
    var self = $(this),
        price = self.attr("data-price"),
        index = self.attr("data-index");
    var quantity = $("#Q" + index).val();
    sum += (parseFloat(price) * parseFloat(quantity));
});
$("金額標簽").html("￥" + sum + ".00");

到這里，選中商品的價格總計功能也就簡單實現了。

商品結算

關于結算功能，這里就做簡單介紹，當用戶點擊結算按鈕時，計算出被選商品的總金額，給予alert出總金額，數據庫則更新相應商品的結算狀態和數量，當然你也可以在購物車集合中添加一個用戶消費金額的屬性來保存所消費的金額總數更好，這里就簡單處理了。

具體功能實現這里簡單介紹如下：

定義公共方法，用于用戶不同加、減、全選等操作時皆可調用。

循環列表內所有被選中的checkbox(假設name為chkItem)。

使用checkbox的相應屬性值，來獲取價格和數量。

定義全局變量(假設為sum)存儲總金額并賦值顯示。

這里貼出部分實現代碼，如下：

//結算方法內容
$("input[name="chkItem"]:checked").each(function(){
     var self = $(this),
         //通過data-index屬性，獲取索引值
         index = self.attr("data-index"),
        //通過data-id屬性，獲取對應ID
         ID= self.attr("data-id");
     var 數量= $("#Q"+index).val();
     var data = { "cid": ID, "cnum":數量};
     //發送數據請求
     ...   
});
alert("所付金額為：￥"+sum);
location.href = "cart";

cart.js文件添加對應路由處理如下：

app.post("路徑",function(req,res){
   var Cart = global.dbHelper.getModel("cart");
   Cart.update({"_id":req.body.ID},{$set : { cQuantity : req.body.數量,cStatus:true }},function(error,doc){ 
...

商品刪除

關于商品的刪除功能就簡單多了，我們只需獲取其ID即可實現對于購物車內商品的刪除操作

在購物車商品的展示功能實現時，我們就可以獲取其ID，如下參考：

刪除

cart.js文件，添加對應路徑處理方法，這里簡單實現參考如下：

app.get("/delFromCart/:id", function(req, res) {
   //req.params.id 獲取ID號
   var Cart = global.dbHelper.getModel("cart");
   Cart.remove({"_id":req.params.id},function(error,doc){
       //成功返回1  失敗返回0
       if(doc > 0){
           res.redirect("/cart");
       }
   });
});

好，到這里所有功能都已經實現了。

附上本電商網站項目的源碼，供各位研究、開發、擴展
歡迎提issues