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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值