Home > Article > WeChat Applet > How to implement e-commerce shopping cart logic in WeChat mini program development
Let me share with you a logical process for selecting all items in the mini program shopping cart. I would like to thank my sister for teaching me that a developer must be rigorous in making things. No matter how ugly the UI design is, the You must follow some logic.
First of all, what we have to do is, when the user clicks on the third product, the select all button will automatically select it, or after selecting all, as long as there is If a product is not selected, the Select All button must also be changed. Let me show you the code first:
You need to define some data that you need to render each time when the page is onload
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true}):this.setData({
selectAllStatus: false});
this.getTotalPrice();
},The above code first does the single-select page rendering effect. The code in the judgment part is the most important step in processing the selection logic. I believe you have noticed here that I defined an empty array of allclick in the data, and then the next logic:
takes out the corresponding when the button is selected The item's subscript is placed in the new arr. Here, because my previous settlement logic has been completed, I just push the data into the array casually, but it can actually be processed as more important data corresponding to the product.
If the button is not selected, the data corresponding to the subscript found for this item will be removed from the new arr
After completing the above two steps, determine the length of arr and the length of cart every time the button status changes.
This is my processing, it can also be recycled, there are many ways to achieve it, I just put it out for reference for friends who have never been in contact~
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true}):this.setData({
selectAllStatus: false});
this.getTotalPrice();
},This code also processes the all-selected state first, and then processes the associated state.
When When all is selected and unchecked, all buttons in the product information are changed to false and the allclick array is cleared directly.
When all are selected, change all the buttons in the product information to true, first clear them, then push them again, and then assign values.
After these few steps, all the logic of selecting all has been solved
I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to use switchTab in WeChat applet development
How to write code for WeChat applet development
The above is the detailed content of How to implement e-commerce shopping cart logic in WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!