Shulou(Shulou.com)05/31 Report--

The editor of this article introduces in detail "how to realize the shopping cart function in WeChat Mini Programs". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to realize the shopping cart function in WeChat Mini Programs" can help you solve your doubts. Let's follow the editor's train of thought to learn new knowledge.

Demand

Let's first find out the needs of the shopping cart.

Single, all, and cancel, and the total price will be calculated with the selected item

Increase and decrease in the number of purchases of individual goods

Delete the item. When the shopping cart is empty, the page becomes the layout of the empty shopping cart

According to the design drawing, we can implement the static page first. Next, take a look at what kind of data a shopping cart needs.

First of all, there is a list of items (carts). The items in the list need: commodity map (image), trade name (title), unit price (price), quantity (num), whether to select (selected), commodity id (id).

Then to select all in the lower left corner, you need a field (selectAllStatus) to indicate whether all are selected.

Total price in the lower right corner (totalPrice)

Finally, you need to know if the shopping cart is empty (hasList)

Knowing that we need this data, let's define it first when the page is initialized.

Code implementation

Initialization

Page ({data: {carts: [], / / shopping cart list hasList:false, / / whether there is data totalPrice:0 in the list, / / total price, initially 0 selectAllStatus:true / / all selected status, default all selected}, onShow () {this.setData ({hasList: true, / / now that you have data) Let's call it true carts: [{id:1,title:' fresh celery half catty', image:'/image/s5.png',num:4,price:0.01,selected:true}, {id:2,title:' vegetable 500g fresh celery half catty', image:'/image/s5.png',num:4,price:0.01,selected:true}, {id:2,title:' vegetable 500g fresh celery half catty', image:'/image/s5.png',num:4,price:0.01,selected:true}, {PNG vegetable rice 500g fresh celery half catty', image:'/image/s5.png',num:4,price:0.01,selected:true}]})) },)

The shopping cart list data we usually get by requesting the data from the server, so we assign values to carts in the lifecycle function. Considering that every time I enter the shopping cart, I need to get the latest status of the shopping cart, while onLoad and onReady are only executed once during initialization, so I need to put the request in the onShow function. (let's impersonate some fake data here.)

Layout wxml

Fix the static page written before and bind the data.

{{item.title}} ¥{{item.price}}-{{item.num}} + × choose all ¥{{totalPrice}}

Calculate the total price

Total price = price of selected item 1 * quantity + price of selected item 2 * quantity +.

According to the formula, we can get

GetTotalPrice () {let carts = this.data.carts; / / get shopping cart list let total = 0; for (let I = 0; I 1, minus 1

/ / increase the quantity addCount (e) {const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts [index] .num; num = num + 1; carts [index] .num = num; this.setData ({carts: carts}); this.getTotalPrice ();}, / / reduce the number of minusCount (e) {const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts [index] .num If (num

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.