Preface

In the past, shopping carts were basically implemented through a large number of DOM operations. The WeChat applet is actually very similar to the usage of vue.js. Next, let’s see how the applet can implement the shopping cart function.

Requirements

First, let’s figure out the needs of the shopping cart.

• Single selection, all selection and cancellation, and the total price will be calculated according to the selected products

• The purchase quantity of a single product increases and Reduce

• Delete items. When the shopping cart is empty, the page will change to the layout of the empty shopping cart

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

• First is a product list (carts). The items in the list need: product image (image), product name (title), unit price (price), quantity (num), Whether it is selected (selected), product id (id)

• and then select all in the lower left corner, a field (selectAllStatus) is required to indicate whether all are selected

• The total price in the lower right corner (totalPrice)

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

I know what I need. Data, we define these first when the page is initialized.

Code implementation

Initialization

Page({
????data:?{
????????carts:[],???????????????//?購物車列表
????????hasList:false,??????????//?列表是否有數(shù)據(jù)
????????totalPrice:0,???????????//?總價，初始為0
????????selectAllStatus:true????//?全選狀態(tài)，默認全選
????},
????onShow()?{
????????this.setData({
??????????hasList:?true,????????//?既然有數(shù)據(jù)了，那設(shè)為true吧
??????????carts:[
????????????{id:1,title:'新鮮芹菜?半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},
????????????{id:2,title:'素米?500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
??????????]
????????});
??????},
})

We usually get the shopping cart list data by requesting the server, so we assign values ??to carts in the life cycle function. I thought about getting the latest status of the shopping cart every time I enter the shopping cart, and onLoad and onReady are only executed once during initialization, so I need to put the request in the onShow function. (Let’s pretend to be some fake data here)

Layout wxml

Repair the static page written before and bind the data.

?<view class="cart-box">
????<!-- wx:for 渲染購物車列表 -->
????<view wx:for="{{carts}}">
????
????????<!-- wx:if 是否選擇顯示不同圖標 -->
????????<icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
????????<icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
????????
????????<!-- 點擊商品圖片可跳轉(zhuǎn)到商品詳情 -->
????????<navigator url="../details/details?id={{item.id}}">
????????????<image class="cart-thumb" src="{{item.image}}"></image>
????????</navigator>
????????
????????<text>{{item.title}}</text>
????????<text>￥{{item.price}}</text>
????????
????????<!-- 增加減少數(shù)量按鈕 -->
????????<view>
????????????<text bindtap="minusCount" data-index="{{index}}">-</text>
????????????<text>{{item.num}}</text>
????????????<text bindtap="addCount" data-index="{{index}}">+</text>
????????</view>
????????
????????<!-- 刪除按鈕 -->
????????<text bindtap="deleteList" data-index="{{index}}">?×?</text>
????</view>
</view>

<!-- 底部操作欄 -->
<view>
????<!-- wx:if 是否全選顯示不同圖標 -->
????<icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/>
????<icon wx:else type="circle" color="#fff" bindtap="selectAll"/>
????<text>全選</text>
????
????<!-- 總價 -->
????<text>￥{{totalPrice}}</text>
</view>

Calculate the total price

The total price = the price of the selected product 1* the price of the selected product 2* the quantity...
According to the formula, you can get

getTotalPrice()?{
????let?carts?=?this.data.carts;??????????????????//?獲取購物車列表
????let?total?=?0;
????for(let?i?=?0;?i<carts.length;?i++)?{?????????//?循環(huán)列表得到每個數(shù)據(jù)
????????if(carts[i].selected)?{???????????????????//?判斷選中才會計算價格
????????????total?+=?carts[i].num?*?carts[i].price;?????//?所有價格加起來
????????}
????}
????this.setData({????????????????????????????????//?最后賦值到data中渲染到頁面
????????carts:?carts,
????????totalPrice:?total.toFixed(2)
????});
}

Other operations on the page that will cause the total price to change need to call this method.

Selection event

It is selected when clicked, and becomes unselected when clicked again. This is actually changing the selected field. Pass data-index="{{index}}" to pass the index of the current product in the list array to the event.

<p>selectList(e) {<br> ? ?const index = e.currentTarget.dataset.index; ? ?// 獲取data- 傳進來的index<br> ? ?let carts = this.data.carts; ? ? ? ? ? ? ? ? ? ?// 獲取購物車列表<br> ? ?const selected = carts[index].selected; ? ? ? ? // 獲取當前商品的選中狀態(tài)<br> ? ?carts[index].selected = !selected; ? ? ? ? ? ? ?// 改變狀態(tài)<br> ? ?this.setData({<br> ? ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice(); ? ? ? ? ? ? ? ? ? ? ? ? ? // 重新獲取總價<br>}<br></p>

Select all events

Select all is to change the selected of each product according to the all-selected status selectAllStatus

<p>selectAll(e) {<br> ? ?let selectAllStatus = this.data.selectAllStatus; ? ?// 是否全選狀態(tài)<br> ? ?selectAllStatus = !selectAllStatus;<br> ? ?let carts = this.data.carts;<br><br> ? ?for (let i = 0; i < carts.length; i++) {<br> ? ? ? ?carts[i].selected = selectAllStatus; ? ? ? ? ? ?// 改變所有商品狀態(tài)<br> ? ?}<br> ? ?this.setData({<br> ? ? ? ?selectAllStatus: selectAllStatus,<br> ? ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 重新獲取總價<br>}<br></p>

Increase or decrease the quantity

Click number, Add 1 to num, click the - sign. If num > 1, then subtract 1

<p>// 增加數(shù)量<br>addCount(e) {<br> ? ?const index = e.currentTarget.dataset.index;<br> ? ?let carts = this.data.carts;<br> ? ?let num = carts[index].num;<br> ? ?num = num + 1;<br> ? ?carts[index].num = num;<br> ? ?this.setData({<br> ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice();<br>},<br>// 減少數(shù)量<br>minusCount(e) {<br> ? ?const index = e.currentTarget.dataset.index;<br> ? ?let carts = this.data.carts;<br> ? ?let num = carts[index].num;<br> ? ?if(num <= 1){<br> ? ? ?return false;<br> ? ?}<br> ? ?num = num - 1;<br> ? ?carts[index].num = num;<br> ? ?this.setData({<br> ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice();<br>}<br></p>

Delete product

Click the delete button to delete the current element from the shopping cart list. After deletion, if the shopping cart is empty, change the shopping cart empty flag hasList to false

deleteList(e)?{
????const?index?=?e.currentTarget.dataset.index;
????let?carts?=?this.data.carts;
????carts.splice(index,1);??????????????//?刪除購物車列表里這個商品
????this.setData({
????????carts:?carts
????});
????if(!carts.length){??????????????????//?如果購物車為空
????????this.setData({
????????????hasList:?false??????????????//?修改標識為false，顯示購物車為空頁面
????????});
????}else{??????????????????????????????//?如果不為空
????????this.getTotalPrice();???????????//?重新計算總價格
????}???
}

Summary

Although the shopping cart function is relatively simple, there are still many knowledge points involved in the WeChat applet, which is suitable Newbies practice to master.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of Implementation of shopping cart function in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!