`

javascript 实现购物车

阅读更多
购物车实现3种方式

1、利用cookie

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

2、利用 session

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

3、利用数据库

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


购物车需求分析

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

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

3、可以清空购物车

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

5、可以结算




/***
 * 购物车操作模块
 * 
 */
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
	};
	//商品类
	/***
	 * @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;
	}
	
	
	//暴露给外部的接口方法
	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);





在页面中引用

1、导入js文件

2、初始化shopCart对象

       shopCart.init({
		'decimal' : 4
       });
       shopCart.addItem(item); //添加商品到购物车
	shopCart.delItem('12345'); //从购物车中删除商品
	shopCart.emptyCart(); //清空购物车
	item.quantity = 4; 
	alert(shopCart.getTotalPrice()); //获取购物车中的数量
分享到:
评论

相关推荐

    javascript实现购物车特效

    用javascript实现购物车特效

    原生JavaScript实现购物车

    在本项目中,"原生JavaScript实现购物车"是一个典型的前端开发示例,它展示了如何使用JavaScript语言来创建一个交互式的购物车系统。这个系统可能包括添加商品、修改商品数量、计算总价等基本功能。接下来,我们将...

    JavaScript实现购物车功能

    在JavaScript实现购物车功能的过程中,会涉及到多个关键知识点,这些技术是前端开发中不可或缺的部分。以下将详细阐述这些知识点: 1. **购物车计算价格**:这是购物车的核心功能之一,需要对每件商品的价格与数量...

    javascript实现购物车效果.zip

    实现效果: ... javascript实现购物车效果,通过原生js代码实现购物车效果,一般电商网站或者商城网站会使用到购物车的效果,点击加减,总价随之变化,选中商品,点击删除,可以删除选中的商品!

    web-原生js实现购物车

    以上就是使用原生JavaScript实现购物车功能的基本步骤。当然,实际项目中可能还需要考虑更多细节,如商品库存检查、商品选择状态的管理、购物车数据的持久化等。通过这个例子,你可以了解到如何利用JavaScript实现...

    javascript实现购物车

    在JavaScript实现购物车功能的过程中,我们通常会遇到多个关键知识点,包括数据存储、商品操作、数量管理、总价计算以及用户交互。以下是对这些知识点的详细解释: 1. **数据存储**:购物车中的商品信息需要被持久...

    【JavaScript源代码】原生JavaScript实现购物车.docx

    ### JavaScript 实现购物车功能详解 #### 一、概述 在现代Web开发中,实现一个交互式的购物车功能是电商网站的基本需求之一。通过使用原生JavaScript,我们可以在不依赖任何框架的情况下完成这一任务。本篇文章将...

    基于JavaScript实现购物车功能

    在JavaScript实现购物车功能时,我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明: 1. **前端交互**:在本例中,用户通过点击“我的购物车”按钮(`#btAdd`)来...

    javascript实现商品购物车功能

    纯javascript实现购物车,完成从商品页向购物车中添加商品,购物车中删除商品,更改商品数量,删除商品,全选单选等购物车操作,涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作,综合性较强,对于...

    Javascript实现购物车功能的详细代码

    在JavaScript实现购物车功能时,通常会涉及到多个技术点,包括DOM操作、事件处理、数据存储(如Cookie或LocalStorage)以及简单的数据结构处理。在这个示例中,我们看到的HTML结构是一个商品列表页面,其中的商品...

    Javascript网页编程技术购物车的修改

    文件"order.html"可能就是一个包含了上述逻辑的HTML页面,展示了如何利用JavaScript实现购物车功能。在这个页面中,用户可以看到购物车中的商品列表、数量、总价等信息,并且能够进行添加、删除和修改商品的操作。 ...

    用JavaScript开发购物车(含源代码)

    在本项目中,我们将深入探讨如何使用JavaScript实现一个基本的购物车系统,同时结合Asp.net作为后端支持。 首先,JavaScript是客户端脚本语言,它在用户的浏览器上运行,为网页提供实时交互。在购物车场景中,...

    javascript之购物车.zip

    以上就是JavaScript实现购物车功能的一些核心概念和技巧。通过这些知识点,我们可以构建一个基本的、交互式的购物车系统,提供添加、删除商品,以及修改商品数量等功能。在实际项目中,还需要考虑更多细节,如错误...

    原生JS实现购物车结算功能代码

    以上就是原生JavaScript实现购物车结算功能涉及的主要技术点。在这个过程中,JavaScript扮演了关键角色,实现了动态交互和数据管理,为用户提供了一个流畅、可靠的购物体验。在实际开发中,可以根据具体需求进行调整...

    JavaScript-Shopping-Cart:该库提供了使用Vanilla JavaScript实现购物车的简单方法

    使用类JavaScript购物车该库提供了使用Vanilla JavaScript实现购物车的简单方法安装在HTML的BODY结束标记之前添加脚本: &lt; script src =" /js/shoppingcart.js " &gt; &lt;/ script &gt;用法实例化ShoppingCart类...

    javascript购物车

    JavaScript购物车是一个常见的Web开发应用场景,它...以上是JavaScript实现购物车功能的基本步骤和涉及的关键技术。实际开发中,还需要考虑到性能优化、兼容性问题以及安全等方面,确保购物车系统的稳定性和用户体验。

    JS实现购物车

    以上就是使用JavaScript实现购物车功能的基本步骤。实际项目中,可能还需要考虑其他因素,比如本地存储(localStorage)以持久化购物车数据、异步请求以同步购物车状态、以及优化用户体验的细节处理等。通过这些功能...

    JavaScript实现购物车基本功能

    本篇文章将介绍如何使用JavaScript实现一个简单购物车的基本功能。这包括如何添加商品到购物车、全选或单个商品的选择、修改商品数量以及删除商品等功能。 首先,我们来看HTML结构部分。页面中有一个表格,表格的...

    前端js商城购物车完整,增删改,单选商品

    在这个项目中,我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作,这些都是电商网站必备的功能。 首先,我们要理解JavaScript的基本语法和数据类型,它是ECMAScript的一个实现,提供了变量...

Global site tag (gtag.js) - Google Analytics