關注電子商務網站開發-《純JS寫的無刷新實時同步購物車系統》

前言

 

開發一個電子商務網站要考慮的最基本的四個模塊分別是產品模塊、購物車模塊、訂單模塊以及個人中心模塊，除了個人中心模塊其他的三個模塊都是必要的（最起碼的瀏覽商品加入購物車下單）。產品模塊在我的第一篇博文關注電子商務網站開發-《產品表結構》已經提到，今天要寫的是購物車模塊，JS面向對象+Jquery，支持絕大部分電子商務網站，希望可以給一些准備做這一行或者對這行感興趣的同學一些啟發。

 

文章主要說明思路並解釋重要部分的代碼，結尾會附上源碼。

引用

主要用到的插件$.cookie這個插件在我上一篇文章中已經介紹關注電子商務網站開發-《簡單易用的JQUERY插件--圖片延時加載插件(lazyload)》

思路

 

第一步：聲明購物車對象

代碼

Cart = {
    Product: new Array(),
    TotalPrice: 0,
    Limit: 40,
    Add: function (product) {
        //...
    },
    FindProductBySku: function (sku){
        //...
    },
    Account: function () {
        //...
    },
    SaveCookie: function () {
        //...
    },
    ClearCookie: function () {
        //...
    },
    Load: function () {
        //...
    }
}

購物車中有眾多屬性和方法，如產品集合Product；總價格TotalPrice；個數限制Limit；添加一個商品到購物車Add；查找購物車中是否存在某商品FindProductBySku；計算價格Account；保存產品信息到cookie中的SaveCookie；清除購物車的ClearCookie；加載購物車的Load。還有一些其他方法，就不一一介紹了，感興趣的可以在源碼中查看。

 

第二步：加入購物車

加入購物車是通過方法Add操作的，參數為product對象，product對象也有自己的屬性，有名稱name，編碼sku，價格price，添加的個數count，屬性attribute，添加的時候要先聲明一個product對象，並且為product的每個屬性賦值，代碼如：

var product = {};
var para=’201210120006,商品X,480,1,紅色’;
                product.sku = para.split(',')[0];
                product.name = para.split(',')[1];
                product.price = para.split(',')[2];
                product.count = para.split(',')[3];
                product.attribute = para.split(',')[4];
                Cart.Add(product);

添加商品的主要思路是判斷購物車是否有商品，如果沒有，顯示購物車並且添加商品；如果有，判斷購物車中是否存在該商品（用到方法：FindProductBySku），如果存在，則數量增加，如果不存在，則添加到購物車。

 

第三步：計算價格和個數

總價格的計算是通過遍歷產品集合然后相加得到的，總個數也就是產品集合的個數，相對來說這一步比較簡單。

代碼：

Account: function () {
        var allamount = 0.0;
        for (var i = 0; i < this.Product.length; i++) {
            var price = this.Product[i].price; //單價
            var count = this.Product[i].count; //單價
            var rowamount = parseFloat(price) * parseFloat(count); //單個總價
            allamount += rowamount;
        }
        this.TotalPrice = parseFloat(allamount).toFixed(1);
        
    }

 

第四步：保存到cookie

為了保證購物車是全局的，產品信息必須要記錄到cookie中，期限為3天，原則是每種產品記錄一條，這是考慮到瀏覽器cookie的大小限制，還要考慮到cookie的個數限制，所以加入購物車時也會做一個個數限制。每條cookie記錄了產品的所有屬性，每種屬性用符號^隔開，用符號隔開是為了加載的時候解析，用^符號是因為有些產品的名字也可能出現一些常用的標點符號。同時為了全局實時的顯示購物車的數量，可以在網站通用的頭部加個ID為cartcount元素，這樣每一次添加商品都會做相應的顯示。

代碼：

SaveCookie: function () {
        for (var i = 0; i < this.Product.length; i++) {
            var productSku = this.Product[i].sku; //產品編碼
            var productName = this.Product[i].name; //產品名稱
            var productPrice = this.Product[i].price; //產品單價
            var productCount = this.Product[i].count; //產品數量
            var productAttribute = this.Product[i].attribute; //產品屬性
            var productInfo = productSku + "^" + productName + "^" + productPrice + "^" + productCount + "^" + productAttribute
            $.cookie("productInfo" + i, productInfo, { expires: 3, path: '/' });
        }
        $.cookie("cartCount", this.Product.length, { expires: 3, path: '/' });
        $.cookie("cartTotlePrice", this.TotalPrice, { expires: 3, path: '/' });
        $("#cartcount").html(this.Product.length);
}

其他：

還有一個LOAD方法，此方法是在進入購物車頁面或者進入要進行購物車操作頁面（商品列表頁面）時調用的，代碼：

Load: function () {
        var cartCount = $.cookie("cartCount") - 0;
        if (cartCount != 0) {
            for (var i = 0; i < cartCount; i++) {
                var productInfo = $.cookie("productInfo" + i);
                var product = {};
                var temp = "";
                var productItemPrice = "";

                product.sku = productInfo.split('^')[0]; //產品編碼
                product.name = productInfo.split('^')[1]; //產品名稱
                product.price = productInfo.split('^')[2]; //產品單價
                product.count = productInfo.split('^')[3]; //產品數量
                product.attribute = productInfo.split('^')[4]; //產品屬性
                this.Product.push(product);
            }
            Cart.Account();
        }
       
    }

基本方法就這些，這里做了兩個頁面用來實現購物車功能，感興趣的同學可以去體驗一下。

點擊這里：購物車頁面，商品列表頁面

點擊這里下載

 

單位需要招聘，以下是招聘的職位描述

職位描述： 
1、1年或以上的軟件開發經驗，有良好編碼能力； 
2、熟悉BS/CS框架下程序開發； 
3、深刻理解ASP.NET和C#，熟悉JavaScript，HTML，XML，CSS+div等web開發技術； 
4、精通SQL語言，熟練掌握SQL Server； 
5、深刻了解面向對象程序編程；
6、開發過管理信息系統、企業ERP系統或經營類網站並有相關經驗者優先；
7、熟悉Jquery者優先；
8、必須有較強的自學能力，為人踏實，有很好的團隊合作意識；
9、學歷不限、男女不限、年齡不限；

關於待遇,根據各人情況,詳細面談.

應聘公司：江蘇廣電集團下屬單位
工作地點：南京市玄武區珠江路280號
聯系方式：[e-mail]（發送簡歷至郵箱即可，工作日1個小時內給予回復）