数据应该是后台传来,在这我是用数组模拟的,根据数组长度生成对应的数据,代码会用到封装好的cookie,我把cookie上传到资源里了,需要的可以下
商品页代码:(这些代码是写在script标签内的)
//数组中存储的数据,图片路径根据自己的修改即可
var data = [{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},{
"id":10002,
"title":"婚纱照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},{
"id":10003,
"title":"加湿器",
"price":100,
"imgUrl":"img/photo3.jpg"
}];
//生成结构
var oUl = document.getElementById("productList");
var str = "";
for(var i = 0; i < data.length; i++){
str += "<li><img src='"+data[i].imgUrl+"'><p>"+data[i].title+"</p><p>"+data[i].price+"</p><input class='addBtn' type='button' data-id='"+data[i].id+"' value='加入购物车'></li>";
}
oUl.innerHTML = str;
//加入购物车
var cartNum = document.getElementById("cartNum");
var oNum = cartNum.children[0];
var count = 0;
var addBtns = document.getElementsByClassName("addBtn");
//定义一个对象,去保存id和数量 判断cookie里有没有存过数据,有就用,没有就赋值为{}
if(getCookie("cart")){
var obj = JSON.parse(getCookie("cart"));//将json字符串转换成对象的
}else{
var obj = {};
}
//取所有购物车商品数量
for(var i in obj){
count += obj[i];
}
oNum.innerHTML = count;
for(var i = 0; i < addBtns.length; i++){
addBtns[i].onclick = function(){
//存数据时 存id:num cart {"10001":1,"10002":3}
//考虑如果取到加入购物车的商品id
var prodId = this.getAttribute("data-id");
if(obj[prodId]==undefined){
obj[prodId] = 1;
}else{
obj[prodId]++;
}
//把这个对象存到cookie
//console.log(obj);
var objToStr = JSON.stringify(obj);//将js对象(数组,对象)转换成JSON格式的字符串
setCookie("cart",objToStr,7);
//显示购物篮中的数量
oNum.innerHTML = ++count;
}
}
购物车页面的代码:(这些代码也是写在script标签内的)
/*var data = [{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},{
"id":10002,
"title":"婚纱照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},{
"id":10003,
"title":"加湿器",
"price":100,
"imgUrl":"img/photo3.jpg"
}];*/
var data = {"10001":{
"id":10001,
"title":"蒙牛",
"price":60,
"imgUrl":"img/photo1.jpg"
},"10002":{
"id":10002,
"title":"婚纱照",
"price":19999,
"imgUrl":"img/photo2.jpg"
},"10003":{
"id":10003,
"title":"加湿器",
"price":100,
"imgUrl":"img/photo3.jpg"
}};
var oList = document.getElementById("cartList");
var obj = {};
//从cookie中取出数据加入到页面中
if(getCookie("cart")){
obj = JSON.parse(getCookie("cart"));
}
var str = "";
for(var i in obj){
/*for(var j = 0; j < data.length; j++){
if(i==data[j].id){
str += "<li><img src='"+data[j].imgUrl+"'><span>"+data[j].title+"</span><span>"+data[j].price+"</span><span>"+obj[i]+"</span></li>"
}
}*/
str += "<li><img src='"+data[i].imgUrl+"'><span>"+data[i].title+"</span><span>"+data[i].price+"</span><span>"+obj[i]+"</span></li>"
}
oList.innerHTML = str;
到这购物车就实现了