1 购物车,其实就是把用户选择商品的关键信息在详情页(或含有加入购物车的页面)储存起来,拿到购物车页面展示,对,就是这么简单......
so我们的工作就三部
- 把购物车需要的数据储存起来
- 购物车页面拿到数据并展示以及一些计算操作
- 把购物车中要买的信息记录下来并传到订单页
一 商品数据分析与储存形式
1、商品需要的数据 goods
商品编号: goods-id
商品名称: goods-name
商品价格: goods-price
商品款式: goods-style
商品尺码: goods-size
商品库存: goods-stock
商品数量 : goods-amount
商品图片: goods-img
..............................
一件商品: {}
n件商品: [{},{},{}]
n件商品: {10001:{},10002:{}}
2 具体实践
① {10001:{},10002:{}}形式
思路:我们先说第一种储存方式的,var cart = {}
{
"1001":{
goods-id: 1001,
goods_amount:10.....
}
}
1 我们先读取本地储存(可以是cookie,可以使h5webstorage,你知道他们的却别即可
var cart = $.cookie("mls-cart") | '{}'; //如果有,拿过来,没有,拿到的是{},也就是创建了一个对象
cart = JSON.parse(cart);
//创建数据结构
//判断cart是否已存在当前商品,不存在,加入当前商品,存在,数量+当前所选数量
if(!cart[goodsId]){
cart[goodsId] = {
goodsId: goodsId,
goodsAmount: parseInt( amount )
};
}else{
cart[goodsId].goodsAmount += parseInt(amount);
}
//写入到cookie
② [{},{}]形式,这是大多数网站,app都通用的形式
var cart = [{}];
1 还是先读取本地储存
var cartHistory = localStorage.getItem('zdh-cart');
//拿到的数组可能有值,也可能为undefined,(第一次,没存呀那沃恩要做判断了)
var cart = (cartHistory)?JSON.parse(cartHistory):new Array();
//拿到要储存的对象
var goodsInfo={
goodsId: id,
goodsAmount: goodsnum
};
var isExisted=false; //是否存在的
//遍历购物车数组,看是否是第一次储存,(就是看他有没有,也就是数组中每个对象的id===我们这儿的id,就是有,反之没有)
for(var i=0; i<cart.length; i++){
if (cart[i].goodsId === goodsInfo.goodsId) {
// 更新商品信息
cart[i].goodsAmount += parseInt(goodsInfo.goodsAmount);
isExisted = true;
break;
}
}
//如果不存在,则直接添加到购物车
if(!isExisted){
cart.push(goodsInfo);
}
// 将购物车信息存储到本地
localStorage.setItem("zdh-cart",JSON.stringify(cart));