js实现购物车功能


Posted in Javascript onJune 12, 2018

本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下

购物车实现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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
vue如何截取字符串
May 06 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
浅谈Node.js 中间件模式
Jun 12 #Javascript
浅谈Webpack打包优化技巧
Jun 12 #Javascript
关于TypeScript模块导入的那些事
Jun 12 #Javascript
JS实现前端页面的搜索功能
Jun 12 #Javascript
微信小程序实现弹出菜单功能
Jun 12 #Javascript
微信小程序实现折叠与展开文章功能
Jun 12 #Javascript
微信小程序收藏功能的实现代码
Jun 12 #Javascript
You might like
深入探讨PHP中的内存管理问题
2011/08/31 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
如何解决python多种版本冲突问题
2020/10/13 Python
python 调用Google翻译接口的方法
2020/12/09 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
十佳教师事迹材料
2014/01/11 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
公司年会开场白
2015/06/01 职场文书
孟佩杰观后感
2015/06/17 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python