Examples of implementation code of shopping cart in WeChat mini-app practice and shopping cart in practice

Sample Code for implementing the shopping cart in the practical use of mini programs, and examples of shopping cart in actual use

Hello, everyone. I haven't written it for nearly half a month. Now I have a hard time writing my pen. I haven't updated it for a long time. One reason is that I have to go to work, and I have been busy working recently, another reason is that I have never been recognized for writing articles, so I have no motivation to create more articles. At that time, I really couldn't help myself, so I planned to give up. Thanks to Cao Ming, a Korean graduate student, for supporting me, I am very touched by the hope that I will update my next article and I will be very grateful for the instant recovery of combat power. In fact, your simple likes and comments all give me the greatest support. Well, it's done, the focus of today is that it is not difficult to implement the shopping cart and shopping cart interfaces. The difficulty is to process the logic in the shopping cart. The logic of shopping cart is the most difficult for both small programs and apps, next we will teach you how to implement the shopping cart.

Shopping Cart implementation

Cart. wxml

<Import src = "/template/quantity/index. wxml "/> <scroll-view class =" scroll "scroll-y =" true "> <view class =" separate "> </view> <view wx: for = "{carts}"> <view class = "cart_container"> <image class = "item-select" bindtap = "switchSelect" data-index = "{index} "data-id =" {index} "src =" {item. isSelect? '.. /.. /Images/cart/comment_select.png ':'.. /.. /images/cart/comment_normal.png '} "/> <image class =" item-image "src =" {item. pic }}"> </image> <view class = "column"> <text class = "title" >{{ item. name }}</text> <view class = "row"> <text class = "sku-price" >￥ </text> <text class = "sku-price"> {item. price }}</text> <view class = "sku"> <template is = "quantity" data = "{{... item. count, componentId: index }}"/> </view> </View> <view class = "separate"> </view> </scroll-view> <view class = "bottom_total"> <view class = "bottom_line"> </view> <view class = "row"> <image class = "item-allselect" bindtap = "allSelect" src = "{{ isAllSelect? '.. /.. /Images/cart/comment_select.png ':'.. /.. /images/cart/comment_normal.png '} "/> <text class =" small_text "> select all </text> <text> total: ￥ </text> <text class = "price" >{{ totalMoney }}</text> <button class = "button-red" bindtap = "toBuy" formType = "submit "> settlement </button> </view>

The layout is not very complex. A loop list is used to loop out the shopping cart items and a settlement control at the bottom. You also need to note that scroll-view should be added to the loop list, in this way, when there is a lot of data, you can scroll and not familiar with scroll-view. Please read the previous articles and explain them here.

Cat. wxss

/* Pages/cart. wxss */. cart_container {display: flex; flex-direction: row ;}. scroll {margin-bottom: 120rpx ;}. column {display: flex; flex-direction: column ;}. row {display: flex; flex-direction: row; align-items: center ;}. sku {margin-top: 60rpx; margin-left: 100rpx ;}. sku-price {color: red; position: relative; margin-top: 70rpx ;}. price {color: red; position: relative ;}. title {font-size: 38rpx; margin-top: 40rpx ;}. small_text {font-size: 28rpx; margin-right: 40rpx; margin-left: 10rpx ;}. item-select {width: 40rpx; height: 40rpx; margin-top: 90rpx; margin-left: 20rpx ;}. item-allselect {width: 40rpx; height: 40rpx; margin-left: 20rpx ;}. item-image {width: 180rpx; height: 180rpx; margin: 20rpx ;}. bottom_line {width: 100%; height: 2rpx; background: lightgray ;}. bottom_total {position: fixed; display: flex; flex-direction: column; bottom: 0; width: 100%; height: 120rpx; line-height: 120rpx; background: white ;}. button-red {background-color: # f44336;/* red */} button {position: fixed; right: 0; color: white; text-align: center; display: inline-block; font-size: 30rpx; border-radius: 0rpx; width: 30%; height: 120rpx; line-height: 120rpx ;}

There is nothing to say about the wxss style. To understand its attributes, just call the class. Focus on cart. js. The logic of the entire article is here.

Cart. js

// Pages/cart. jsvar Temp = require ('.. /.. /template/contract. js'); Page (Object. assign ({}, Temp. quantity, {data: {isAllSelect: false, totalMoney: 0, // product details carts: [{pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg", name: "Shiseido Japan", price: 200, isSelect: false, // data setting count: {quantity: 2, min: 1, max: 20 },{ pic: 'http: // mz.djmall.xmisp.cn/files/product/20161201/148 058301941.jpg ', name: "Clinique rejuvenation essence", price: 340, isSelect: false, // data setting count: {quantity: 1, min: 1, max: 20 },}, {pic: 'http: // expires, name: "special effects lotion", price: 390, isSelect: false, // data setting count: {quantity: 3, min: 1, max: 20 },{ pic: 'http: // expires, name: "Clinique moisturizing cream", price: 490, isSel Ect: false, // data setting count: {quantity: 1, min: 1, max: 20},}, {pic: 'http: // mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg', name: "Lancome Qingying skin lotion", price: 289, isSelect: false, // data settings count: {quantity: 10, min: 1, max: 20 },{ pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg", name: "LANCOME black bottle essence", price: 230, isSelect: false, // data set count: {quanti Ty: 1, min: 1, max: 20},},],}, // select the event processing function switchSelect: function (e) {// obtain the id of the item, and the array's lower mark value var Allprice = 0, I = 0; let id = e.tar get. dataset. id, index = parseInt(e.tar get. dataset. index); this. data. carts [index]. isSelect =! This. data. carts [index]. isSelect; // if (this. data. carts [index]. isSelect) {this. data. totalMoney = this. data. totalMoney + this. data. carts [index]. price;} else {this. data. totalMoney = this. data. totalMoney-this. data. carts [index]. price;} // whether to select all for (I = 0; I <this. data. carts. length; I ++) {Allprice = Allprice + this. data. carts [I]. price;} if (Allprice = this. data. totalMoney) {this. data. isA LlSelect = true;} else {this. data. isAllSelect = false;} this. setData ({carts: this. data. carts, totalMoney: this. data. totalMoney, isAllSelect: this. data. isAllSelect,})}, // select all allSelect: function (e) {// process all selected logic let I = 0; if (! This. data. isAllSelect) {for (I = 0; I <this. data. carts. length; I ++) {this. data. carts [I]. isSelect = true; this. data. totalMoney = this. data. totalMoney + this. data. carts [I]. price ;}} else {for (I = 0; I <this. data. carts. length; I ++) {this. data. carts [I]. isSelect = false;} this. data. totalMoney = 0;} this. setData ({carts: this. data. carts, isAllSelect :! This. data. isAllSelect, totalMoney: this. data. totalMoney,})}, // settle toBuy () {wx. showToast ({title: 'unsettled ', icon: 'success', duration: 3000}); this. setData ({showDialog :! This. data. showDialog}) ;}, // handleQuantityChange (e) {var componentId = e. componentId; var quantity = e. quantity; this. data. carts [componentId]. count. quantity = quantity; this. setData ({carts: this. data. carts ,});}}));

Describes the parameters used.

1. IsAllSelect: whether to select all
2. TotalMoney: Total Amount
3. Carts: Shopping Cart item data

Logic processing required by the switchSelect check button

1. Check whether all items have been selected. If all items are selected, the All button at the bottom should be lit. Check whether the price is equal to the total price. Of course, this is only a way to determine whether all items are selected, you can also determine the number of checked items,
2. Calculates the addition and subtraction of the total price of the selected or canceled buttons.
3. This. setData: update data. this is the focus. Remember to update data after each data processing.

Logical processing of all select buttons

1. Select All to light up each item, and then count the total price. If not all options are selected, set it to gray, and the total price to 0.
2. This. setData update data

Small Program Data Processing

I. data modification methods

Data: {name: 'I am the initialized name '}

1. this. data. name

This. data. name = 'I am code Jun data'

2. this. setData

This. setData ({name: 'I am the code setdata '})

Both methods can change the data. The advantage of this. setData is that the data can be refreshed in real time.

2. Modify the object Array

Data: {person: {name: 'codejun ', city: 'xiamen '}}

Modify all objects

This. setData ({person: {name: 'New code jun', city: 'hunan '}})

Modify part of data

This. setData ({'person. name': 'Code only modifies name'}) // use this for multiple arrays. setData ({'person [0]. name': 'Code only modifies name '})

3. add and delete data

1. Add data concat

// Assume that this section is the added array var newarray = [{name: 'added data -- '+ new Date (). getTime (),}]; // forward -- use newarray and this. data. list join this. data. list = newarray. concat (this. data. list); // backward -- use this. data. list and newarray work together this. data. list = this. data. list. concat (newarray );

2. Delete the data splice () and return the deleted data.

// Delete remove: function (e) {var dataset = e.tar get. dataset; var Index = dataset. index; // identify the number of items to be deleted through index. The second data is the number of items to be deleted, usually 1 this. data. list. splice (Index, 1); // renders the data this. setData ({list: this. data. list });}

3. Clear Data

// Clear: function () {// you can convert the array into an empty array. this. setData ({list :{}});}

Summary

Today, I mainly explain how js processes data logic and how to add, delete, modify, and query data. This is a required knowledge item. Now let's talk about it today. Have a good weekend ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.