JQuery基于Cookie.js实现商城购物车功能详解

发布时间:2020-03-25 16:40:00 浏览量:208 来源:测速网

在做外贸商城系统开发或购物网站时,经常遇到一个功能,就是购物车,购物车一般使用Cookies插件辅助来实现,购物车里面有商品的id,数量,数量的增加总小,删除等功能。下面Google Speed 怎么用Cookie.js来实现一个购物增减等功能的小插件。

首页要引入JQuery.js 和 Jquery.cookie.js 

https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js

实现代码如下:

//购物车
    var Cart = function () {
        this.Count = 0;
        this.Total = 0;
        this.Items = new Array();
    };
    //购物车集合对象
    var CartItem = function () {
        this.Id = 0;
        this.Name = "";
        this.Count = 0;
        this.Price = 0;
    };
    
//购物车操作
var CartHelper = function () {
    this.cookieName = "{$member_id}_repast_cart";
    this.Clear = function () {
        var cart = new Cart();
        this.Save(cart);
        return cart;
    };

    //向购物车添加
    this.Add = function (id, name, count, price) {
        var cart = this.Read();
        var index = this.Find(id);

        if(count==0){
            this.Del(id);

        }else{
            //如果ID已存在,覆盖数量
            if (index > -1) {
                cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
                cart.Items[index].Count = count;
                cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);

            } else {
                var item = new CartItem();
                item.Id = id;
                item.Name = name;
                item.Count = count;
                item.Price = price;
                cart.Items.push(item);
                cart.Count++;
                cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
                // console.log(cart);
                // cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
            }
            cart.Total=Math.round(cart.Total * 100) / 100;
            this.Save(cart);
        }

        return cart;
    };
    //改变数量
    this.Change = function (id, count) {
        var cart = this.Read();
        var index = this.Find(id);
        cart.Items[index].Count = count;
        this.Save(cart);
        return cart;
    };
    //移出购物车
    this.Del = function (id) {
        var cart = this.Read();
        var index = this.Find(id);
        if (index > -1) {
            var item = cart.Items[index];
            cart.Count--;
            cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);
            cart.Items.splice(index, 1);
            this.Save(cart);
        }

        return cart;

    };
    //根据ID查找
    this.Find = function (id) {
        var cart = this.Read();
        var index = -1;
        for (var i = 0; i

在线工具导航