专栏首页python前行者电商---实现购物车功能

电商---实现购物车功能

购物车实现3种方式

1、利用cookie

优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。

2、利用 session

优点:用户禁用cookie,也可以购物 缺点:占用服务器资源,要考虑session失效的问题

3、利用数据库

优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品 缺点:给数据库造成太大的压力,如果数据量很大的话。

购物车需求分析

1、可以添加商品到购物车中

2、可以删除购物车中的商品

3、可以清空购物车

4、可以更新购物车的商品

5、可以结算

  • js代码
/**
 * Created by Administrator on 2017/9/3.
 */


/***
 * 购物车操作模块
 *
 */

//商品类
/***
 * @name item
 * @example
   item(sku, name, price, quantity)
 * @params {string} sku 商品的标示
 * @params {string} name 商品的名字
 * @param {number} price 商品的价格
 * @param {number} quantity 商品的数量
 */
function item(sku, name, price, quantity){
    this.sku = sku;
    this.name = name;
    this.price = price;
    this.quantity = quantity;
}

var shopCart = function(window){

    "use strict";
    //全局变量
    // note new new Date("2020-12-23") 在ie下面报错,不支持这样的语法
    var items = [],cartName='kuaidian_shop_cart',expires = new Date( new Date().getTime()+86400000*30 )
    ,debug = true,decimal = 2;
    var options = {
        'cartName' : cartName, //cookie的名字
        'expires' : expires, //cookie失效的时间
        'debug' : debug,  //是否打印调试信息
        'decimal' : decimal, //钱的精确到小数点后的位数
        'callback' : undefined
    };


    //暴露给外部的接口方法
    return {
        inited : false,
        init: function(option){
            //判断用户是否禁用cookie
            if(!window.navigator.cookieEnabled ){
                alert('您的浏览器不支持cookie无法使用购物车!,请设置允许设置cookie。');
                return false;
            }
            //从cookie中获取购物车中的数据
            this.inited = true;
            if(option){
                extend(options,option);
            }
            var cookie = getCookie(options.cartName);
            if(typeof cookie === 'undefined'){
                setCookie(options.cartName,'',options.expires);
            }else{
                //每个item之间用&分开,item的属性之间用|分割
                var cookie = getCookie(options.cartName);
                if(cookie){
                    var cItems = cookie.split('&');
                    for(var i=0,l=cItems.length;i<l;i++){
                        var cItem = cItems[i].split('|');
                            var item = {};
                            item.sku = cItem[0] || '';
                            item.name = cItem[1] || '';
                            item.price = cItem[2] || '';
                            item.quantity = cItem[3] || '';
                            items.push(item);
                    };
                };

            };
        },
        findItem: function(sku){//根据sku标示查找商品
            //如果木有提供sku,则返回所有的item
            if(sku){
                for(var i=0,l=items.length;i<l;i++){
                    var item = items[i];
                    if(item.sku === sku){
                        return item;
                    }
                }
                return undefined;
            }else{
                return items;
            }

        },
        getItemIndex : function(sku){ //获取item在items的数组下标
            for(var i=0,l=items.length;i<l;i++){
                var item = items[i];
                if(item.sku == sku){
                    return i;
                }
            }
            //木有找到返回-1
            return -1;
        },
        addItem: function(item){ //增加一个新商品到购物车
            //添加一个商品
            if(this.findItem(item.sku)){
                if(options.debug){
                    _log('商品已经存在了');
                    return false;
                }
            }
            items.push(item);
            _saveCookie();
            return true;
        },
        delItem: function(sku){ //从购物车中删除一个商品
            //删除一个商品
            var index = this.getItemIndex(sku);
            if(index > -1){
                items.splice(index,1);
                _saveCookie();
            }else{
                if(options.debug){
                    _log('商品不存在');
                    return false;
                }
            }
        },
        updateQuantity: function(item){ //更新商品的数量
            //更新一个商品
            var index = this.getItemIndex(item.sku);
            if(index > -1){
                items[index].quantity = item.quantity;
                _saveCookie();
            }else{
                if(options.debug){
                    _log('商品不存在');
                    return false;
                }
            }
        },
        emptyCart: function(){
            //清空数组
            items.length = 0;
            _saveCookie();
        },
        checkout: function(){
            //点击结算后的回调函数
            if(options.callback){
                options.callback();
            }
        },
        getTotalCount: function(sku){
            //获取购物车商品的数量,如果传某个商品的id,那么就返回该商品的数量
            var totalCount = 0;
            if(sku){
                totalCount = (typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity );
            }else{
                for(var i=0,l=items.length;i<l;i++){
                    totalCount += (parseInt(items[i].quantity) === 'NaN' ? 0 : parseInt(items[i].quantity )) ;
                }
            }
            return totalCount;
        },
        getTotalPrice : function(sku){
            //获取购物车商品的总价格 ,如果传某个商品的id,那么就返回该商品的总价格
            var totalPrice = 0.0;
            if(sku){
                var num = parseInt((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity )),
                price = parseFloat((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).price ));
                num = num=== 'NaN' ? 0 : num;
                price = price === 'NaN' ? 0 : price;
                totalPrice = price * num;
            }else{
                for(var i=0,l=items.length;i<l;i++){
                    totalPrice += (parseFloat(items[i].price ) * parseInt(items[i].quantity));
                }
            }
            return totalPrice.toFixed(options.decimal);
        },
        getCookie : getCookie,
        setCookie : setCookie
    };


    /**
     * 设置cookie
     * @name setCookie
     * @example
       setCookie(name, value[, options])
     * @params {string} name 需要设置Cookie的键名
     * @params {string} value 需要设置Cookie的值
     * @params {string} [path] cookie路径
     * @params {Date} [expires] cookie过期时间
     */
    function setCookie(name, value, options) {
        options = options || {};
        var expires = options.expires || null;
        var path = options.path || "/";
        var domain = options.domain || document.domain;
        var secure = options.secure || null;
        /**
        document.cookie = name + "=" + escape(value)
        + ((expires) ? "; expires=" + expires.toGMTString() : "")
        + "; path=" + path
        + "; domain=" + domain ;
        + ((secure) ? "; secure" : "");
        */
        var str = name + "=" + encodeURIComponent(value)
        + ((expires) ? "; expires=" + expires.toGMTString() : "")
        + "; path=/";
        document.cookie = str;
    };

    /**
     * 获取cookie的值
     * @name getCookie
     * @example
       getCookie(name)
     * @param {string} name 需要获取Cookie的键名
     * @return {string|null} 获取的Cookie值,获取不到时返回null
     */
    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name
                + "=([^;]*)(;|$)"));
        if (arr != null) {
            return decodeURIComponent(arr[2]);
        }
        return undefined;
    };

    //***********************私有方法********************/
    function _saveCookie(){
        var i=0,l=items.length;
        if(l>0){
            var tItems = [];
            for(;i<l;i++){
                var item = items[i];
                tItems[i] = item.sku + '|' +item.name + '|' + item.price + '|' + item.quantity;
            };
            var str = tItems.join('&');
            setCookie(options.cartName, str, {expires:options.expires});
        }else{
            setCookie(options.cartName, '', {expires:options.expires});
        }

    };

    //***********************工具方法********************/
    //显示调试信息
    function _log(info){
        if(typeof console != 'undefined'){
            console.log(info);
        }
    };
    //继承属性
    function extend(destination, source) {
        for ( var property in source) {
            destination[property] = source[property];
        }
    };
}(typeof window === 'undifined' ? this: window);
  • HTML页面简单调用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <script type="text/javascript" src="./shop.js"></script>

    <script>

        shopCart.init({
            'decimal' : 4
           });

        var a = new item('aa','bb',12,22);
        shopCart.addItem(a); //添加商品到购物车,参数item
        shopCart.delItem('12345'); //从购物车中删除商品,参数squ
//        shopCart.emptyCart(); //清空购物车
        item.quantity = 4;
        alert(shopCart.getTotalPrice()); //获取购物车中的数量,参数squ


        shopCart.findItem();//根据sku标示查找商品,参数squ
            //如果木有提供sku,则返回所有的item
        shopCart.getItemIndex('aa') //获取item在items的数组下标,参数squ
        shopCart.updateQuantity(a) //更新商品的数量,参数item
        shopCart.getTotalCount()//获取购物车商品的数量,如果传某个商品的id,那么就返回该商品的数量,参数squ
    </script>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Centos 7 如何临时和永久修改计算机名

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    周小董
  • Centos 7 如何临时和永久修改计算机名

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    周小董
  • VMware下对Ubuntu进行扩充磁盘大小

    今天用虚拟机的时候,发现虚拟机快满了,提示磁盘空间小,不得不扩充虚拟机空间。经过百度搜索,终于搞定了,记录如下

    周小董
  • Linux Shell 中的 ()、(())、[]、[[]]、{} 怎么用是不是还傻傻分不清?

    ①命令组。括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用。括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命...

    昱良
  • cookie

    Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘...

    wade
  • Ol4网格生成以及优化

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    lzugis
  • Arcgis for js实现北京地铁的展示

    在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing

    lzugis
  • Cookie

    2.Chrome浏览器中F12打开,开发者工具 —— Application面板中查找cookie即可

    jinghong
  • Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程

    在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。

    yaohong
  • Js基础教程之变量及数据类型

    基本类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券