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

添加商品鏈接

上節(jié)課程里我們已經(jīng)實(shí)現(xiàn)了商品的添加和展示，接下來我們開始進(jìn)行對商品的操作——加入購物車。

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

加入購物車

我們先定義購物車(cart)集合的Schema屬性，包含：uId(用戶ID)、cId(商品ID)、cName(商品名稱)、cPrice(商品價(jià)格)、cImgSrc(商品展示圖片路徑)、cQuantity(商品數(shù)量)、cStatus(商品結(jié)算狀態(tài)，默認(rèn)為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}
}

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

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

購物車頁面的展示實(shí)現(xiàn)可參考如下貼圖：

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

        

            
        
        

            
                
            
        
        

            <%=carts[i].cName%>
        
        

            <%=carts[i].cPrice%>
        
        

            +
            
            -
        
        

            刪除
        
    
    <%}%>

訪問視圖

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

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

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

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

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

4.貼出部分代碼：

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

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

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

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

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

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

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

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

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模板(具體實(shí)現(xiàn)可參考貼圖)來實(shí)現(xiàn)用戶購物車商品的展示，現(xiàn)期間我們用到了checkbox，這里我們就來簡單的實(shí)現(xiàn)商品的全選和單選。

首先，簡單介紹實(shí)現(xiàn)步驟：

用戶選中全選按鈕時(shí)，列表內(nèi)選框全部變?yōu)楣催x狀態(tài)。

用戶取消全選按鈕選中狀態(tài)時(shí)，列表內(nèi)選框全部取消勾選狀態(tài)。

列表內(nèi)選框?yàn)槿抗催x狀態(tài)時(shí)，全選按鈕為選中狀態(tài)，反之不勾選。

全選按鈕未選中情況下，當(dāng)列表內(nèi)按鈕全部選中則全選按鈕也要被選中。

對于checkbox按鈕如下圖所示：

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

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

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

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

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

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

前面我們實(shí)現(xiàn)了對于商品的單選和全選功能，下面我們就開始實(shí)現(xiàn)商品數(shù)量的加減。

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

    +
    
    -

簡單實(shí)現(xiàn)步驟如下：

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

a標(biāo)簽添加單擊事件。并同時(shí)改變顯示框的值。

使用siblings()方法改變同級標(biāo)簽的數(shù)量值。

具體實(shí)現(xiàn)可參考如下方法：

$(".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);
});

到這里對于商品數(shù)量的加、減也實(shí)現(xiàn)了，接著我們開始實(shí)現(xiàn)用戶選中商品的總價(jià)格計(jì)算功能。

計(jì)算總金額

商品的狀態(tài)選擇和數(shù)量的加減功能我們已經(jīng)實(shí)現(xiàn)了，選擇我們就開始實(shí)現(xiàn)當(dāng)用戶選擇相關(guān)商品時(shí)總金額的計(jì)算功能。

實(shí)現(xiàn)步驟如下：

定義公共方法，用于用戶不同加、減、全選等操作時(shí)皆可調(diào)用。

循環(huán)列表內(nèi)所有被選中的checkbox(假設(shè)name為chkItem)。

使用checkbox的相應(yīng)屬性值，來獲取價(jià)格和數(shù)量。

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

具體方法實(shí)現(xiàn)可參考如下內(nèi)容：

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));
});
$("金額標(biāo)簽").html("￥" + sum + ".00");

到這里，選中商品的價(jià)格總計(jì)功能也就簡單實(shí)現(xiàn)了。

商品結(jié)算

關(guān)于結(jié)算功能，這里就做簡單介紹，當(dāng)用戶點(diǎn)擊結(jié)算按鈕時(shí)，計(jì)算出被選商品的總金額，給予alert出總金額，數(shù)據(jù)庫則更新相應(yīng)商品的結(jié)算狀態(tài)和數(shù)量，當(dāng)然你也可以在購物車集合中添加一個(gè)用戶消費(fèi)金額的屬性來保存所消費(fèi)的金額總數(shù)更好，這里就簡單處理了。

具體功能實(shí)現(xiàn)這里簡單介紹如下：

定義公共方法，用于用戶不同加、減、全選等操作時(shí)皆可調(diào)用。

循環(huán)列表內(nèi)所有被選中的checkbox(假設(shè)name為chkItem)。

使用checkbox的相應(yīng)屬性值，來獲取價(jià)格和數(shù)量。

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

這里貼出部分實(shí)現(xiàn)代碼，如下：

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

cart.js文件添加對應(yīng)路由處理如下：

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

商品刪除

關(guān)于商品的刪除功能就簡單多了，我們只需獲取其ID即可實(shí)現(xiàn)對于購物車內(nèi)商品的刪除操作

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

刪除

cart.js文件，添加對應(yīng)路徑處理方法，這里簡單實(shí)現(xiàn)參考如下：

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");
       }
   });
});

好，到這里所有功能都已經(jīng)實(shí)現(xiàn)了。

附上本電商網(wǎng)站項(xiàng)目的源碼，供各位研究、開發(fā)、擴(kuò)展
歡迎提issues