小程序商城--将商品加入购物车缓存

最新推荐文章于 2025-07-28 13:40:57 发布

原创最新推荐文章于 2025-07-28 13:40:57 发布 · 1.2w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #缓存

小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在小程序中实现将商品信息加入到购物车的缓存操作，通过JavaScript代码实现商品数据的存储和读取，确保用户在离开小程序后仍能保留购物车内容。

js代码：

  //添加购物车事件方法
  toCart: function (event) {
    //判断是否选中规格
    this.checkInfo();
    if (!this.data.chooseInfoFlag) {
      wx.showModal({
        title: '提示',
        content: '请选择规格',
        showCancel: false,
        success:{}
      })
    } 

    else {
      //创建动画
      var animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease-in-out'
      });
      this.animation = animation;
      animation.translateY(-336).step();
      this.setData({
        animationData: this.animation.export(),
        maskVisual: 'show'
      });
      //将购物车数据添加到缓存
      var that = this
      //获取缓存中的已添加购物车信息
      var cartItems = wx.getStorageSync('cartItems') || []
      console.log(cartItems)
      //判断购物车缓存中是否已存在该货品
      var exist = cartItems.find(function (ele) {
        return ele.id === that.data.goodsInfoId
      })
      console.log(exist)
      if (exist) {
        //如果存在，则增加该货品的购买数量
        exist.quantity = parseInt(exist.quantity) + that.data.buyCount
      } else {
        //如果不存在，传入该货品信息
        cartItems.push({
          id: that.data.goodsInfoId,
          quantity: that.data.buyCount,
          price: that.data.goodsInfoPrice,
          title: that.data.goodsVo.goodsName,
          goodsPicsInfo: that.data.goodsInfoImg
        })
      }
      //加入购物车数据，存入缓存
      wx.setStorage({
        key: 'cartItems',
        data: cartItems,
        success: function (res) {
          //添加购物车的消息提示框
          wx.showToast({
            title: "添加购物车",
            icon: "success",
            durantion: 2000
          })
        }
      })


    }


  }