关注电子商务网站开发-《纯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号
联系方式：80692416@qq.com（发送简历至邮箱即可，工作日1个小时内给予回复）