微信小程序开发技巧集锦(9):添加商品到购物车

发布时间:2025-07-15 20:05

微信小程序里的商品也能通过微信支付购买 #生活知识# #生活小知识# #电子支付#

最新推荐文章于 2024-07-19 23:10:09 发布

八点博客(钏) 于 2019-05-10 15:49:11 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

说明:

购物车数据存入到storage缓存中。

此篇博文主要讲如何在商品详情页面,点击加入购物车按钮,将商品加入购物车,并更新购物车中商品总数量。

步骤:

点击添加购物车按钮

             ||

判断该商品是否已经存在于购物车中 

           ||                       ||

已经存在                   不存在

          ||                         ||

只增加数量              将该商品信息添加到缓存中

具体步骤:

1、从缓存中获取购物车数据 (this._storageKeyName为自定义的缓存名字,如 'cart' )

getCartDataFromLocal(){

var res = wx.getStorageSync(this._storageKeyName);

if(!res){

res = [];

}

return res;

}

2、判断该商品是否已经存在于购物车中 

//判断某个商品是否已经添加到购物车中,返回该商品在缓存数据中的下标index和该商品的信息

//id 为商品在数据库中id,arr为缓存中的购物车数据

_isHasThatOne(id,arr){

var result = {index: -1, data: ''};

for(let i = 0; i < arr.length; i++){

if(arr[i].id == id){

result = {

index: i,

data: arr[i]

}

break;

}

}

return result;

}

3、如果之前有,则新增数量就可以;如果之前没有,则增加(别忘更新数据)

//如果之前有,则新增数量就可以

//如果之前没有,则增加

add(item, counts){

var cartData = this.getCartDataFromLocal();

var isHasInfo = this._isHasThatOne(item.id, cartData);

if(isHasInfo.index == -1){

item.counts = counts;

item.selectStatus = true;

cartData.push(item); //新增数据

}else{

cartData[isHasInfo.index].counts += counts;

}

//更新缓存

wx.setStorageSync(this._storageKeyName, cartData);

}

补:具体代码:

1、view

<view class='cart-box'>

<view class='product-counts'>

<picker class="{{product.stock==0?'disabled':''}}" bindchange='bindPickerChange' range="{{test}}" value=''>

<view>

<text class='counts-tips'>数量</text>

<text class='counts-data'>{{productCount}}</text>

<image class='counts-icon' src='../../imgs/icon/arrow@down.png'></image>

</view>

</picker>

</view>

<view class='middle-border'></view>

<view class='add-cart-btn' bindtap='onAddingToCartTap'>

<text>加入购物车</text>

<image class='cart-icon' src="../../imgs/icon/cart.png"></image>

</view>

</view>

网址:微信小程序开发技巧集锦(9):添加商品到购物车 https://www.yuejiaxmz.com/news/view/1168280

相关内容

微信小程序模板资源集锦
基于微信小程序的购物商城的设计与实现(论文+源码)
基于微信小程序对商城购物系统设计与实现 毕业设计开题报告
生活网上购物小技巧集锦
网上购物小技巧集锦
微信小程序开发项目:环保物品回收平台
商城小程序:开启便捷购物新航道 小程序系统定制开发
优化在线购物体验:关键步骤与技巧,让添加到购物车更便捷
零售业微信小程序:创新购物体验,便捷生活新选择
指尖购物新体验:探秘微信小程序商城的便捷世界

随便看看