前言
开发一个电子商务网站要考虑的最基本的四个模块分别是产品模块、购物车模块、订单模块以及个人中心模块，除了个人中心模块其他的三个模块都是必要的（最起码的浏览商品加入购物车下单）。产品模块在我的第一篇博文关注电子商务网站开发-《产品表结构》已经提到，今天要写的是购物车模块，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();
}
}
基本方法就这些，这里做了两个页面用来实现购物车功能，感兴趣的同学可以去体验一下。
浙公网安备 33010602011771号