帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
27
帖子
0
勋章
469
Y币

分享一个单商户购物车

[复制链接]
发表于 2015-5-27 10:30:21
分享一个单商户购物车,在做项目的时候遇到个购物车问题,这里分享下。利用H5的本地存储。。

  1. utils = {
  2.     setParam : function (name,value){
  3.         localStorage.setItem(name,value)
  4.     },
  5.     getParam : function(name){
  6.         return localStorage.getItem(name)
  7.     }
  8. }

  9. product={
  10.     id:0,
  11.     name:"",
  12.     num:0,
  13.     price:0.00,
  14. };
  15. orderdetail={
  16.     username:"",
  17.     phone:"",
  18.     address:"",
  19.     zipcode:"",
  20.     totalNumber:0,
  21.     totalAmount:0.00   
  22. }
  23. cart = {
  24.     //向购物车中添加商品
  25.     addproduct:function(product){
  26.         var ShoppingCart = utils.getParam("ShoppingCart");
  27.         if(ShoppingCart==null||ShoppingCart==""){
  28.                         //第一次加入商品
  29.             var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)};
  30.             utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
  31.         }else{
  32.             var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
  33.             var productlist = jsonstr.productlist;
  34.             var result=false;
  35.                         //查找购物车中是否有该商品
  36.             for(var i in productlist){
  37.                 if(productlist[i].id==product.id){
  38.                     productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num);
  39.                     result = true;
  40.                 }
  41.             }
  42.             if(!result){
  43.                                 //没有该商品就直接加进去
  44.                 productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price});
  45.             }
  46.                         //重新计算总价
  47.             jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num);
  48.             jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price));
  49.             orderdetail.totalNumber = jsonstr.totalNumber;
  50.             orderdetail.totalAmount = jsonstr.totalAmount;
  51.             //保存购物车
  52.             utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
  53.         }
  54.     },
  55.     //修改给买商品数量
  56.     updateproductnum:function(id,num){
  57.         var ShoppingCart = utils.getParam("ShoppingCart");
  58.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
  59.         var productlist = jsonstr.productlist;
  60.         
  61.         for(var i in productlist){
  62.             if(productlist[i].id==id){
  63.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num));
  64.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price));
  65.                 productlist[i].num=parseInt(num);
  66.                
  67.                 orderdetail.totalNumber = jsonstr.totalNumber;
  68.                 orderdetail.totalAmount = jsonstr.totalAmount;
  69.                 utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
  70.                 return;
  71.             }
  72.         }
  73.     },
  74.     //获取购物车中的所有商品
  75.     getproductlist:function(){
  76.         var ShoppingCart = utils.getParam("ShoppingCart");
  77.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
  78.         var productlist = jsonstr.productlist;
  79.         orderdetail.totalNumber = jsonstr.totalNumber;
  80.         orderdetail.totalAmount = jsonstr.totalAmount;
  81.         return productlist;
  82.     },
  83.     //获取整个购物车
  84.     getshopcart:function(){
  85.             var ShoppingCart = utils.getParam("ShoppingCart");
  86.             return ShoppingCart;
  87.     }
  88.     //判断购物车中是否存在商品
  89.     existproduct:function(id){
  90.         var ShoppingCart = utils.getParam("ShoppingCart");
  91.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
  92.         var productlist = jsonstr.productlist;
  93.         var result=false;
  94.         for(var i in productlist){
  95.             if(productlist[i].id==product.id){
  96.                 result = true;
  97.             }
  98.         }
  99.         return result;
  100.     },
  101.     //删除购物车中商品
  102.     deleteproduct:function(id){
  103.         var ShoppingCart = utils.getParam("ShoppingCart");
  104.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
  105.         var productlist = jsonstr.productlist;
  106.         var list=[];
  107.         for(var i in productlist){
  108.             if(productlist[i].id==id){
  109.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num);
  110.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price);
  111.             }else{
  112.                 list.push(productlist[i]);
  113.             }
  114.         }
  115.         jsonstr.productlist = list;
  116.         orderdetail.totalNumber = jsonstr.totalNumber;
  117.         orderdetail.totalAmount = jsonstr.totalAmount;
  118.         utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
  119.     }
  120. };
复制代码
调用代码:

  1. var product =
  2.         {
  3.                 'sid':4,
  4.                 'id': 1,        //属性名用引号括起来,属性间由逗号隔开
  5.                 'name': '测试商品',
  6.                 'num':5,
  7.                 'price':199.9
  8.         };
  9.         //商品加入到购物车
  10.         cart.addproduct(product);
  11.         var productlist=cart.getproductlist();//取出购物车商品
  12.         api.alert({
  13.                 msg:cart.getshopcart()
  14.     },function(ret,err){
  15.             //coding...
  16.     });
复制代码


另外再次如果有大牛的话能否帮忙改成多商铺购物车,就是购物车可以根据商铺ID划分。。
0
帖子
0
勋章
9
Y币
谢谢楼主的分享。在楼主的基础上作了些改进: 解决了价钱浮点数运算精度问题,existproduct的一个小bug, 增加了方法getproductbyid 和 clear用于请客购物车。扩展了product 数据结构以便显示图片,价格单位,类别。下面是源码,以测试通过:
utils = {
    setParam : function (name,value){
        localStorage.setItem(name,value)
    },
    getParam : function(name){
        return localStorage.getItem(name)
    }
}

product={
        sid:"",
    id:0,
    name:"",
    num:0,
    price:0.00,
    unit:'',
    image:''
};

orderdetail={
    username:"",
    phone:"",
    address:"",
    zipcode:"",
    totalNumber:0,
    totalAmount:0.00   
}


// 两个浮点数求和
function accAdd(num1, num2) {
        var r1, r2, m;
        try {
                r1 = num1.toString().split('.')[1].length;
        } catch(e) {
                r1 = 0;
        }
        try {
                r2 = num2.toString().split(".")[1].length;
        } catch(e) {
                r2 = 0;
        }
        m = Math.pow(10, Math.max(r1, r2));
        // return (num1*m+num2*m)/m;
        return Math.round(num1 * m + num2 * m) / m;
}

// 两个浮点数相减
function accSub(num1, num2) {
        var r1, r2, m;
        try {
                r1 = num1.toString().split('.')[1].length;
        } catch(e) {
                r1 = 0;
        }
        try {
                r2 = num2.toString().split(".")[1].length;
        } catch(e) {
                r2 = 0;
        }
        m = Math.pow(10, Math.max(r1, r2));
        n = (r1 >= r2) ? r1 : r2;
        return (Math.round(num1 * m - num2 * m) / m).toFixed(n);
}

// 两数相除
function accDiv(num1, num2) {
        var t1, t2, r1, r2;
        try {
                t1 = num1.toString().split('.')[1].length;
        } catch(e) {
                t1 = 0;
        }
        try {
                t2 = num2.toString().split(".")[1].length;
        } catch(e) {
                t2 = 0;
        }
        r1 = Number(num1.toString().replace(".", ""));
        r2 = Number(num2.toString().replace(".", ""));
        return (r1 / r2) * Math.pow(10, t2 - t1);
}

// 浮点数相乘
function accMul(num1, num2) {
        var m = 0, s1 = num1.toString(), s2 = num2.toString();
        try {
                m += s1.split(".")[1].length
        } catch(e) {
        };
        try {
                m += s2.split(".")[1].length
        } catch(e) {
        };
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}

   
cart = {
    //向购物车中添加商品
    addproduct:function(product){
        var ShoppingCart = utils.getParam("ShoppingCart");
        if(ShoppingCart==null||ShoppingCart==""){
                        //第一次加入商品
            var jsonstr = {"productlist":[{"sid":product.sid,"id":product.id,"name":product.name,"num":product.num,"price":product.price,"unit":product.unit,"image":product.image}],"totalNumber":product.num,"totalAmount"product.price*product.num)};
            utils.setParam("ShoppingCart","'"+ JSON.stringify(jsonstr));
        }else{
            var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
            var productlist = jsonstr.productlist;
            var result=false;
            //查找购物车中是否有该商品
            for(var i in productlist){
                if(productlist[i].id==product.id){
                    productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num);
                    result = true;
                }
            }
            if(!result){
                //没有该商品就直接加进去
                productlist.push({"sid":product.sid,"id":product.id,"name":product.name,"num":product.num,"price":product.price,"unit":product.unit,"image":product.image});
            }
                        //重新计算总价
            jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num);
//          jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price));
            jsonstr.totalAmount=accAdd(jsonstr.totalAmount, accMul(product.num, product.price));
            orderdetail.totalNumber = jsonstr.totalNumber;
            orderdetail.totalAmount = jsonstr.totalAmount;
            //保存购物车
            utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
        }
    },
   
    //修改给买商品数量
    updateproductnum:function(id,num){
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        
        for(var i in productlist){
            if(productlist[i].id==id){
                jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num));
//              jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price));
                jsonstr.totalAmount=accAdd(jsonstr.totalAmount, accSub(accMul(num, productlist[i].price), accMul(productlist[i].num, productlist[i].price)));
                productlist[i].num=parseInt(num);
               
                orderdetail.totalNumber = jsonstr.totalNumber;
                orderdetail.totalAmount = jsonstr.totalAmount;
                utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
                return;
            }
        }
    },
   
    //获取购物车中的所有商品
    getproductlist:function(){
        var ShoppingCart = utils.getParam("ShoppingCart");
        if (!ShoppingCart) {
                return null;
        }
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        orderdetail.totalNumber = jsonstr.totalNumber;
        orderdetail.totalAmount = jsonstr.totalAmount;
        return productlist;
    },
   
    //获取整个购物车
    getshopcart:function(){
            var ShoppingCart = utils.getParam("ShoppingCart");
            return ShoppingCart;
    },
   
    //判断购物车中是否存在商品
    existproduct:function(id){
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var result=false;
        for(var i in productlist){
            if(productlist[i].id==id){
                result = true;
            }
        }
        return result;
    },
   
    // 通过id获取商品
    getproductbyid:function(id) {
            var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var result=false;
        for(var i in productlist){
            if(productlist[i].id==id){
                return productlist[i];
            }
        }
        return null;
    },
    //删除购物车中商品
    deleteproduct:function(id){
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var list=[];
        for(var i in productlist){
            if(productlist[i].id==id){
                jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num);
//              jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price);
                jsonstr.totalAmount=addSub(jsonstr.totalAmount, accMul(productlist[i].num, productlist[i].price));
            }else{
                list.push(productlist[i]);
            }
        }
        jsonstr.productlist = list;
        orderdetail.totalNumber = jsonstr.totalNumber;
        orderdetail.totalAmount = jsonstr.totalAmount;
        utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
    },
    //清空购物车
    clear:function(){
            utils.setParam("ShoppingCart", "");
    }
};
0
帖子
0
勋章
12
Y币
呵呵,哈哈,牛逼
89
帖子
0
勋章
1万+
Y币
顶一下!
27
帖子
0
勋章
469
Y币
alexander_liu 发表于 2015-5-31 11:41
谢谢楼主的分享。在楼主的基础上作了些改进: 解决了价钱浮点数运算精度问题,existproduct的一个小bug, 增 ...

谢谢指出问题。。
0
帖子
0
勋章
192
Y币
学习了,!
9
帖子
0
勋章
1833
Y币
赞一个!!!
0
帖子
0
勋章
6
Y币
代码中怎么会有
65
帖子
0
勋章
23
Y币
不错支持   






本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
0
帖子
0
勋章
44
Y币
markmarkmarkmarkmark
12下一页
您需要登录后才可以回帖 登录

本版积分规则