微信小程序实现加入购物车功能_微信小程序将商城货品加入购物车代码

文件wxml

<view class="footer-three" catchtap="addShop" data-id="{{item}}">加入购物车</view>
1

js

let carts = wx.getStorageSync(‘carts’) || []; 去缓存找购物车

 addShop(){//加入购物车
    let carts = wx.getStorageSync('carts')||[];//获取储存中的购物车
    let index = carts.findIndex(v=>v.goods_id===this.data.swiperList.goods_id)
    //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
    //如果储存里的商品id=本地数据商品id 则返回此元素位置
    if(index===-1){//如果购物车为空
      this.data.swiperList.num=1;//添加一个数量属性
      this.data.swiperList.selected=true;//添加一个判断是否勾选的属性
      carts.push(this.data.swiperList)//把本地商品添加进购物车
      wx.setStorageSync('carts', carts)//添加成功后储存购物车
    }else{//购物车不为空
      carts[index].num++;//一样的商品数量叠加
      wx.setStorageSync('carts', carts)//重新储存购物车
    }
    wx.showToast({//加入后的提示弹框
      title: '加入成功',
      icon:'success',
      mask:true,
    })
    console.log(carts)
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21