`

Jquery 购物车

 
阅读更多
参考文档：
http://www.cnblogs.com/blackice/archive/2013/04/21/3034043.html
http://www.nowamagic.net/jquery/jquery_JqueryCookie.php 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TV365—精伦云影音智能机官方直销网站</title>
<meta name="keywords" content="云影音智能机，精伦H1，精伦H3，精伦H4，智能电视电脑，家庭多媒体中心，海量资讯，精彩视频，高清播放机，高清播放器，电子相册，高清多媒体播放器，高清硬盘播放机，智能电视，电视上网，高清视频，高清硬盘播放器，高清电视，互联网电视，网络高清播放器">
<meta name="description" content="提供最新最热最经典的高清影视剧、新闻娱乐、文化体育、财经教育、生活服务等在线视频，还有音乐、图片新闻、体感游戏、网页浏览等，与电视无缝对接，实现电视的无限应用。">

<link href="/css/style.css" rel="stylesheet"/>
<link href="/css/shop.css" rel="stylesheet"/>
<SCRIPT src="/script/jquery-1.7.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="/script/jquery.cookie.js" type="text/javascript"></SCRIPT>
<SCRIPT src="/script/json2.js" type="text/javascript"></SCRIPT>
</head>

<body>
<div class="top_line">
    <div class="top_header">
        <p  class="top_logo"><img src="/images/shell/logo.jpg" ></p>
        <ul class="top_menu">
            <li id="gn_n1" ><a  href="/" hidefocus></a></li>
            <li id="gn_n2" ><a  href="/product/index.html" hidefocus></a></li>
            <li id="gn_n3"><a  href="/experience/index.html" hidefocus></a></li>
            <li id="gn_n4" class="select4"><a  href="/shop/index.html" hidefocus></a></li>
            <li id="gn_n5"><a  href="/service/index.html" hidefocus></a></li>
        </ul>
    </div> 
</div>


 
<div style="width:1024px;">  
 
<div class="shop_warp">
 
<script type="text/javascript">
(function(a){
	a.fn.hoverClass=function(b){
		var a=this;
		a.each(function(c){
			a.eq(c).hover(function(){
				$(this).addClass(b)
			},function(){
				$(this).removeClass(b)
			})
		});
		return a
	};
})(jQuery);

$(function(){
	$("#navbox").hoverClass("current");
 
	//初始化界面加载，获取cookie中的数据
	var incart = readProcucts();
	cart2Html(incart);
});



//构造购物车对象
var cart = function(){
		this.cartCount = 0;
		this.cartTotal = 0;
		this.cartItems = new Array();
	}

//构造购物车商品对象
var CartItems = function(){
		this.productSign = "";
		//this.productName = "";
		//this.productInfo = "";
		this.count = 0;
		this.price = 0;
	}

//向购物车内添加商品
function addProducts2Cart(idName){
		//1.先取得当前添加到购物车的数据
		var proTemp = $("#"+idName);
		var productName = proTemp.children(".cp_tit").html();
		var productInfo = proTemp.children(".cp_info").html();
		var price = proTemp.children(".cp_price").html();
		//2.获得cookie中是否存在同类产品，如果存在，直接在原有的基础上添加数据，没有，则新增一行
		var incart = readProcucts();
		var indexTemp = findBySign(idName);
		//如果没有，则新建一条数据
		if(indexTemp <= -1){
				var citems = new CartItems();
				citems.productSign = idName;
				citems.price = price;
				citems.count = 1;
				incart.cartItems.push(citems);
				incart.cartCount++;
			}else{
				var itemsCount = incart.cartItems[indexTemp].count;
				if(itemsCount>=10){
						alert("一种商品在购物车中最多下10台！");
						return;
					}
				//如果有，直接在原有的基础上+1即可；
				incart.cartItems[indexTemp].count = incart.cartItems[indexTemp].count+1;
				incart.cartCount = incart.cartCount +1;
			}
		var objString = JSON.stringify(incart);
		$.cookie("tv365Cookie", objString,{ expires: 7 });
		
		//3.遍历cookie显示在购物车中
		cart2Html(incart);
		//在显示出弹出界面
		show('tc_div_4');
		$('#cartNum').html(incart.cartCount);
		
	}


function cart2Html(incart){
		var productSignk;
		var calcTotalPrice = 0;
		var htmlStr = "";
		var tempPrice = 0;
		if(incart.cartItems.length == 0){
				$("#navbox").children(".number").html(0);
				 $(".subnav").html("<p class='air'><a href='#'><img src='images/shop/icon_1.jpg' align='absmiddle'  />您的购物车是空的，赶紧选购吧！</a></p>");
			}else{
				for (var i = 0; i < incart.cartItems.length; i++) {
					var incartItems = incart.cartItems[i];
					productSignk = incartItems.productSign;
					var proTemp = $("#"+productSignk);
					var productName = proTemp.children(".cp_tit").html();
					var productInfo = proTemp.children(".cp_info").html();
					tempPrice = incartItems.price.replace("￥","");
				// alert(productSignk);
					htmlStr += "<div class='shop_list'><p class='shop_img'><img src='/images/shop/c_1.jpg' /></p>"+
		    		"<dl><dt><a href='#'>"+productName+"</a>   <p><span>"+incartItems.price+"</span>*"+incartItems.count+"</p></dt>"+
		    		"<dd><p>"+productInfo+"</p>"+
		    		//"<a href='#' onclick='removeProducts(\"abcd\")'>删除</a></dd></dl></div>";
		    		"<a href='#' onclick='removeProducts(\""+productSignk+"\")'>删除</a></dd></dl></div>";
		    		calcTotalPrice+=tempPrice*incartItems.count;
				}
		
				//4.显示合计数据
				var totalStr =  "<div class='total'>共<span>"+incart.cartCount+"</span>件商品 共计：<span class='price'>￥"+calcTotalPrice+"</span>"+
		    "<a href='/shop/order.html'><img src='/images/shop/sub.jpg' /></a></div>";
		    $(".subnav").html(htmlStr+totalStr);
		    $("#navbox").children(".number").html(incart.cartCount);
	  }
	}
	
//根据编码查找位置
function findBySign(productSign){
		var incart = readProcucts();
		var index = -1;
		
		for (var i = 0; i < incart.cartItems.length; i++) {
    	if (incart.cartItems[i].productSign == productSign) {
      	index = i;
    	}
		}
		return index;
	}

	
//删除购物车内商品
function removeProducts(productSign){
	
		var incart = readProcucts();		
		for (var i = 0; i < incart.cartItems.length; i++) {
    	if (incart.cartItems[i].productSign == productSign) {
    			//移除商品，重新保存Cookie
    			incart.cartCount = incart.cartCount - incart.cartItems[i].count;
      		incart.cartItems.splice(i, 1);
      	 	var objString = JSON.stringify(incart);
					$.cookie("tv365Cookie", objString,{ expires: 7 });
    	}
		}
		//重新加载购物车数据！
		cart2Html(incart);
	}

//读取购物车的商品
function readProcucts(){
		var cart1 = new cart();
		//获得cookie
		var mycookie = $.cookie("tv365Cookie");
		var tv365Cookie = JSON.parse(mycookie);
		if(tv365Cookie == null || tv365Cookie == ""){
				return cart1;
		}else{
				
		}
		return tv365Cookie;
		
	}

//清除cookie

function removeCookie(){
		$.cookie('tv365Cookie', null); // 删除 cookie
	}

</script>
 

<div id="navbox" class="menu">
		
    <a class="tit" href="#">购物车</a>
    <a  class="number">0</a>
	<div class="subnav">
        <p class="air"><a href="#"><img src="images/shop/icon_1.jpg" align="absmiddle"  />您的购物车是空的，赶紧选购吧！</a></p>
	</div>
	
</div>
    <a href="javascript:void(0);" onclick="removeCookie()"><img src="/images/shop/icon.jpg" align="absmiddle" />  清除COOKIE</a>   


	<div class="cp_list">
         <dl>
            <dt><img src="/images/shop/title_04.jpg" /></dt>
            
            <dd id = 'bzg1_jl_st'>
            	<p class="cp_tit">别致 G1  <span>香槟金</span> </p>
                <p class="cp_info">标配：G1产品、红外遥控器 HDMI高清线 、电源线。 </p>
                <p class="cp_price">￥749</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="addProducts2Cart('bzg1_jl_st')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_07.jpg" /></p>
            </dd>
            <dd id = 'bzg1a_jl_st'>
            	<p class="cp_tit">别致 G1A  <span>香槟金</span> </p>
                <p class="cp_info">标配：G1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
                <p class="cp_price">￥1299</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="addProducts2Cart('bzg1a_jl_st')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_08.jpg" /></p>
            </dd>
        </dl>
        
        <dl>
            <dt><img src="/images/shop/title_02.jpg" /></dt>
            
            <dd>
            	<p class="cp_tit">别致 S1  <span>流光银</span> </p>
                <p class="cp_info">标配：S1产品、红外遥控器 HDMI高清线 、电源线。 </p>
                <p class="cp_price">￥499</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_03.jpg" /></p>
            </dd>
            <dd>
            	<p class="cp_tit">别致 S1A  <span>流光银</span> </p>
                <p class="cp_info">标配：S1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
                <p class="cp_price">￥699</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_04.jpg" /></p>
            </dd>
        </dl>
        
         <dl>
            <dt><img src="/images/shop/title_03.jpg" /></dt>
            
            <dd>
            	<p class="cp_tit">别致 M1  <span>双模</span> </p>
                <p class="cp_info">标配：M1产品、红外遥控器 HDMI高清线 、电源线。 </p>
                <p class="cp_price">￥799</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_05.jpg" /></p>
            </dd>
            <dd>
            	<p class="cp_tit">别致 M1A  <span>双模</span> </p>
                <p class="cp_info">标配：M1A产品、魔幻遥控器 HDMI高清线 、电源线、充电线。 </p>
                <p class="cp_price">￥899</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_06.jpg" /></p>
            </dd>
        </dl>
        
        <dl>
            <dt><img src="/images/shop/title_01.jpg" /></dt>
            
            
             <dd>
            	<p class="cp_tit">别致 H1A  <span>时尚版</span> </p>
                <p class="cp_info">标配：H1A产品、红外遥控器 HDMI高清线 、电源线。 </p>
                <p class="cp_price">￥459</p>
                <p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/gm.jpg"  align="absmiddle" style="margin-left:10px;"/></a>
                </p>
                <p class="cp_bg"><img src="/images/shop/cp_02.jpg" /></p>
            </dd>
        </dl>
    </div>
    
    <div class="pj_list">
        <dl>
            <dt><img src="/images/shop/title_05.jpg" /></dt>
           
            <dd>
            	<p class="cp_info">别致产品AV线<br />25元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_01.jpg" /></p> 
            </dd>
    
             <dd>
            	<p class="cp_info">别致1.5米HDMI高清数据线<br />50元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_02.jpg" /></p> 
            </dd>
             <dd>
            	<p class="cp_info">别致魔幻遥控器<br />200元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_03.jpg" /></p> 
            </dd>
             <dd>
            	<p class="cp_info">别致红外遥控器<br />100元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_04.jpg" /></p> 
            </dd>
             <dd>
            	<p class="cp_info">别致魔幻遥控器充电线<br />25元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_05.jpg" /></p> 
            </dd>
             <dd>
            	<p class="cp_info">别致产品电源线<br />50元 </p>
            	<p class="cp_sub">
                    <a href="javascript:void(0);" onclick="show('tc_div_4')"><img src="/images/shop/icon.jpg" align="absmiddle" />  加入购物车</a> 
                </p>
                <p class="cp_bg"><img src="/images/shop/pj_06.jpg" /></p> 
            </dd>
        </dl>
    </div>
  
    
</div>
 
</div>
<div  class="foot_warp" >
    <div  class="foot_relative" >
        <div  class="foot_box" >
            <div class="foot_serve"><p><img src="/images/shell/f_serve.jpg" ></p></div>
        </div>
    </div>
    <div class="foot_menu">
        <dl class="foot_m1">
            <dt>关于我们</dt>
            
            <dd><a href="/about/index.html">关于别致</a></dd>
            <dd><a href="/about/news.html">新闻中心</a></dd>
            <dd><a href="/about/announce.html">隐私声明</a></dd>
            <dd><a href="/about/lawdeclare.html">法律声明</a></dd>
        </dl>
             
        <dl class="foot_m2">
            <dt>分销网络</dt>
            
            <dd><a href="http://routon.tmall.com/" target="_blank">天猫旗舰店</a></dd>
            <dd><a href="http://item.jd.com/975596.html" target="_blank">京东商城</a></dd>
            <dd><a href="http://item.yhd.com/item/9350934_1?ref=1_1_51_search.keyword_1" target="_blank">1号店</a></dd>
            <dd><a href="#" target="_blank">易迅</a></dd>
        </dl>
             
        <dl class="foot_m3">
            <dt>服务支持</dt>
            
            <dd><a href="/service/index.html">售后政策</a></dd>
            <dd><a href="/service/search.html">订单查询</a></dd>
            <dd><a href="/service/download.html">相关下载</a></dd>
        </dl>
              
        <dl class="foot_m4">
            <dt>帮助中心</dt>
            
            <dd><a href="/help/index.html">购物指南</a></dd>
            <dd><a href="/help/pay.html">支付方式</a></dd>
            <dd><a href="/help/deliver.html">配送方式</a></dd>
           
        </dl>
              
        <dl class="foot_m5">
            <dt>关注我们</dt>
            
            <dd><a href="#"><img src="/images/shell/i1.jpg"  align="absmiddle"> 新浪微博</a></dd>
            <dd><a href="#"><img src="/images/shell/i2.jpg"  align="absmiddle"> 腾讯微博</a></dd>
            <dd><a href="#"><img src="/images/shell/i3.jpg"  align="absmiddle"> 人人网</a></dd>
            <dd><a href="#"><img src="/images/shell/i4.jpg"  align="absmiddle"> QQ空间</a></dd>
        </dl>
        
        <dl class="foot_m6">
            <dt>联系我们</dt>
            
            <dd><a href="http://care.live800.com/live800/chatClient/chatbox.jsp?companyID=85741" target="_blank"><img src="/images/shell/f1.jpg" ></a></dd>
        </dl>     
    </div>
</div>

 
</body>
</html>
<div id="tc_div_4"  class="tc_div" style="display:none;"> 
	<p class="close"><span onclick="hide('tc_div_4')"><img src="/images/shop/tc_x.jpg"></span></p> 
	<dl>
    	<dt><img src="/images/shop/tc_g.jpg" align="left"><h3>添加成功！</h3>购物车共有<a id= 'cartNum'>12</a>种宝贝</dt>
        <dd>
        	<a href="javascript:void(0);" onclick="hide('tc_div_4')"><img src="/images/shop/tc_01.jpg"></a>
            <a href="/shop/order.html"><img src="/images/shop/tc_02.jpg"></a>
        </dd>
 	</dl>
</div>
<SCRIPT src="/script/shop.js" type="text/javascript"></SCRIPT>
分享到：
| Flex学习地址
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery购物车前台模板

    **jQuery购物车前端模板详解** 在网页开发中，购物车功能是电商网站不可或缺的一部分，而jQuery作为一款轻量级的JavaScript库，因其简洁的API和强大的功能，常被用于实现前端交互。本模板——"jQuery购物车前台模板...

    jquery购物车代码（3种）

    本主题将深入探讨如何使用jQuery来实现购物车功能，具体包括三种不同的实现方式。购物车功能是电子商务网站的核心部分，它允许用户选择商品、调整数量，并在结账时查看订单详情。 首先，我们要理解购物车的基本构成...

    JQuery 购物车（商品可拖拽到购物车）

    总结来说，"JQuery购物车（商品可拖拽到购物车）"项目涉及到以下几个关键知识点： 1. JQuery库的使用，特别是`draggable()`和`droppable()`方法。 2. HTML结构设计，包括可拖动的商品元素和接收拖放的购物车区域。 ...

    jQuery购物车自动计算金额表单

    在这个“jQuery购物车自动计算金额表单”项目中，我们主要关注如何利用jQuery这个强大的JavaScript库来实现动态计算购物车中商品的总价。以下是对该项目的详细说明： 1. **jQuery库**：jQuery是一个轻量级的...

    simplecart JS购物车 jquery购物车

    **简单购物车（SimpleCart.js）与jQuery购物车** 简单购物车（SimpleCart.js）是一个轻量级的JavaScript购物车解决方案，它允许开发者在没有服务器端编程的情况下实现基本的在线购物功能。它依赖于jQuery库，一个...

    jQuery购物车自动计算金额表单.zip

    "jQuery购物车自动计算金额表单"是一个实现这一功能的JavaScript库，尤其适用于在线商城的结算过程。这个库利用jQuery的强大功能，为用户提供了一种便捷的方式来动态计算购物车内商品的总价，提升用户体验。 首先，...

    jquery购物车完整编译.rar

    《jQuery购物车实现详解》 在电子商务网站中，购物车是不可或缺的一部分，它承载着用户选购的商品信息，方便用户管理购买清单。本教程将详细解析一个基于jQuery编写的购物车实现，通过理解这个实例，我们可以深入...

    jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

    文件标题为“jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)”，这表明文档的焦点在于一个名为jsorder的jQuery插件，它用于实现购物车功能，并且可以与后台程序配合，将数据转换为DataTable...

    jquery购物车实时结算特效

    "jquery购物车实时结算特效"是利用jQuery实现的一个功能，它允许用户在购物车中添加商品，系统能实时计算总价，提供用户友好的购物体验。 在创建这个特效时，首先我们需要理解购物车的基本逻辑。购物车通常包含商品...

    asp.net jquery 购物车

    "asp.net jquery 购物车"就是一个典型的案例，它涉及到Web开发中的核心技术，包括ASP.NET和jQuery，以及如何实现一个功能完备的购物车系统。在这个项目中，我们将探讨这些技术的应用及其在购物车功能实现中的关键点...

    jQuery购物车自动计算金额表单多数据加减商城购物结算

    在这个主题中，"jQuery购物车自动计算金额表单多数据加减商城购物结算"涉及到的核心知识点主要包括jQuery库的使用、动态计算、表单处理以及多数据管理。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM...

    jQUery购物车加减计价与全选全不选

    在这个"jQuery购物车加减计价与全选全不选"的主题中，我们将探讨如何利用jQuery来实现购物车的基本操作。 1. **商品添加与删除**： - 添加：当用户点击“加入购物车”按钮时，可以通过jQuery获取商品ID和数量，...

    jQuery购物车数量累计代码.zip

    这个名为"jQuery购物车数量累计代码.zip"的压缩包包含了一段实现购物车商品数量累加功能的代码，这对于电子商务网站或者任何涉及到商品购买流程的网页来说都是至关重要的。在这个项目中，开发者可能已经创建了一个...

    jQuery购物车商品数量加减合计代码.zip

    《jQuery购物车商品数量加减合计代码》是一个实用的前端开发资源，主要涉及jQuery库的使用，以及在购物车场景中的应用。这个压缩包包含了实现该功能所需的所有基本元素，包括HTML页面结构、JavaScript逻辑、图像资源...

    jQuery购物车自动计算金额表单适应于商城购物结算.zip

    "jQuery购物车自动计算金额表单适应于商城购物结算.zip" 文件提供了一个使用jQuery实现的购物车结算功能，适用于各种类型的在线商城系统。以下将详细介绍这个功能及其相关的jQuery知识点。 jQuery是一个轻量级、高...

    jquery购物车ajax

    **jQuery购物车AJAX技术详解** 在Web开发中，实现用户友好的购物车功能是电商网站的核心部分。jQuery，作为一款强大的JavaScript库，为开发者提供了简单易用的API，简化了DOM操作、事件处理和Ajax交互。本篇将深入...

Magicbox
Global site tag (gtag.js) - Google Analytics