關注電子商務網站開發-《純JS寫的無重新整理即時同步購物車系統》關注電子商務網站開發-《產品表結構》關注電子商務網站開發-《簡單易用的JQUERY外掛程式–圖片延時載入外掛程式(lazyload)》

前言

 

開發一個電子商務網站要考慮的最基本的四個模組分別是產品模組、購物車模組、訂單模組以及個人中心模組，除了個人中心模組其他的三個模組都是必要的（最起碼的瀏覽商品加入購物車下單）。產品模組在我的第一篇博文關注電子商務網站開發-《產品表結構》已經提到，今天要寫的是購物車模組，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號
連絡方式：80692416@qq.com（發送簡曆至郵箱即可，工作日1個小時內給予回複）