Pop-up shopping cart component

Autumn has come, can milk tea be far behind? Family! Have to give yourself the first cup of autumn milk tea pinch ~

We often see this kind of pop-up shopping cart in many online order mini programs or shopping software.

Are there any friends wondering how this thing is made? This article will inspire you, so keep reading!

1. Component service description

  • The shopping bag style is the function bar at the bottom, showing the total number and amount selected by the user. Only after the user selects a certain milk tea, the shopping bag at the bottom will appear. Of course, after canceling all milk tea orders, it will disappear again. Of course! Your balance will disappear after you complete the order (smile)!

  • Click the shopping bag and the details of milk tea will pop up. Users can perform data operations on the ordering information, such as clearing, adding one and subtracting one. Under these operations, the number and total amount of shopping bags will be updated accordingly. In fact, you can not reduce and empty the function, can only add single, such words, can be punished! But kao!



  • Click the gray space to exit the shopping cart details and return to the store page. If there is no order, the shopping bag will disappear.

2. Component data processing

First, to achieve the effect that the shopping bag appears and disappears with the order status, we need to use a Boolean variable isCar. When the order status changes, the method judges the length of the order object array, and then sets the value of isCar through this.setData. The value of isCar is judged by the block label to achieve the display effect of shopping bags.

<block wx:if="{{isCar}}"> // shopping details <panel orders="{{orders}}"/> // shopping bags <view class="car" bindtap="gotoDetail" class="null"> <view class="shopBag"> <image src="/assets/images/shopBag.png"></image> </view> <view Class ="number">{{orderNumber}}</view> <view class="total-price">￥{{totalPrice}}</view> <view class="sure-button" Bindtap = "gotoPay" > chosen < / view > < view > < view > < / block >Copy the code

Second, in order to match data, we bind click events in the purchase button of each milk tea, and transfer corresponding data of milk tea through data- in the label, so as to facilitate subsequent data transmission and data operation.

<view class="product-button" bindtap="car" data-price="{{items.price}}" data-pic="{{items.pic}}" Data - desc = "{{items. Desc}}" data - the title = "{{items. The title}}" data - num = "{{1}}" > < / view > of choose and buyCopy the code

Third, the component needs to display the detailed information of milk tea, so we need to transfer the order data orders of the milk tea you have ordered to the component. As the data is modified by real-time operation, we only need to modify the data in the page Orders with this.setData, and the real-time order data can be output through the loop in the component.

<panel orders="{{orders}}"/>
Copy the code

3. Highlights of component layout design

There are three caveats to the layout of this component:

1. Flexible layout

2. Data presentation

3. Exit in the blank

3.1 Flexible layout of milk tea information display

The left side of each milk tea display window is the picture, and the right side is the layout of description information. Therefore, we first use a big box (class name: drink) to pack all the information of a milk tea, and then use another box (class name: DRINk_desc) to pack the details of the right side, which is the same as the image. The drink class is set to an elastic layout, so as soon as we set the width of the image, drink_DESC fills the remaining width. Because the information for drink_desc on the right is expanded as a column, we use a handy style called flex-direction: column; : Arrange the boxes vertically and then adjust the information display format. Specific code:

WXML <view class="drink" wx:for="{{orders}}" wx:key="index" wx:for-item="order"> <image src="{{order.pic}}"></image> <view class="drink_desc"> <view class="title">{{order.title}}</view> <view AdjustQuantity = adjustQuantity < adjustQuantity = adjustQuantity < adjustQuantity = adjustQuantity class="subtracts" bindtap="subNum" data-index="{{index}}"> <image src=".. /.. /assets/icons/subtracts.png"></image> </view> <view class="num" data-num="{{order.num}}">{{order.num}}</view> <view class="add" bindtap="addNum" data-index="{{index}}"> <image src=".. /.. /assets/icons/add.png"></image> </view> </view> </view> </view> // wxss .drink { position: relative; height: 180rpx; width: 80%; padding: 10rpx 40rpx; display: flex; align-items: center; Border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); margin-left: 5%; } .drink_desc { margin-left: 20rpx; display: flex; line-height: 40rpx; flex-direction: column; }Copy the code

3.2 Excessively long data is displayed in the scroll view

Because the shopping details are always at the bottom of the page, and the height is fixed, so when there are too many products, they cannot be all displayed. At this time, we can use wechat’s srcoll-view label, add an srcoll-view label where scrolling is needed, and set a fixed height. When the sub-box inside exceeds the height, scrolling can be realized, ensuring the complete display of data.

3.3 Exit from the blank space of shopping bag details

There is no exit button in the shopping details, only when clicking the blank, can return to the store. To achieve this effect, we set the largest box to the elastic layoutdisplay: flex, first determine the height of the data details part, and then set the blank box above as WXSS styleflex: 1, so that the blank box can fill the remaining height, and adjust the color of the blank box. Then I’ll add clicksquitMethod, you can achieve the desired effect.

4. Component service logic

1. Component appearance mode

We bind a click event, gotoDetail(), to the shopping bag tag. We need the component’s selectComponent selector, which gets the component object by ID, so we need to give the component an ID. Once you get the component, you can call its own shopBag method in Method. The shopBag() method sets the Boolean flag variable to false. Hidden =”{{flag}}”, hidden=”{{flag}}”, hidden=”{{flag}}”, hidden=”{{flag}}”, hidden=”{{flag}}”, hidden=”{{flag}}”

<view class="page" hidden="{{flag}}">
Copy the code
// Component tag <panel Orders ="{{orders}}" id="panel"/> // gotoDetail() {this.panel = this.selectComponent('#panel'); this.panel.shopBag(); } // shopBag() {this.setData({flag: false})}Copy the code

2 Exit from the blank area of the component

Similarly, to disappear is to bind a quit() method to the blank area tag of the component and set flag to true to make the component disappear. However, there is a problem that when the user emptens or reduces the items in the shopping bag to zero on the details page, the length of the shopping bag Orders is 0, which is the shopping bag should disappear, so we should determine the length of orders after exit, if it is 0, then assign isCar to false and the shopping bag disappears. This. TriggerEvent (“quit”). Quit is the name of bind in the component tag.

// Quit () quit() {this.triggerEvent("quit"); This.setdata ({flag: true})} // index.js quit() quit(){if(this.data.orders.length == 0){this.setData({isCar: False})}} / / component < panel orders = "{{the orders}}" id = "panel" bind: quit = "quit" / >Copy the code

3. Perform component data operations

In the details page, you can add, subtract and clear the quantity.

1. Increase or decrease

We focus on subtraction because the adding and subtracting data operations are similar and the subtracting data operations are more complex. Order reduction is triggered when the button in the component is clicked. Since the data component is not directly involved in the storage of data, it is just a display of data, so we still need to add add and sub events in the component label. AddNum and sunNum methods are triggered when the user clicks the plus or minus button, unlike quit. These two methods need to transfer parameters, that is, array subscript, to modify the corresponding milk tea data, so the three steps to transfer array subscript data:

  1. Component data transmissionStep 1: We need to loop output in the componentordersData secretly buried a subscript datadata-index;

    Step 2: InmethodTo obtain the subscript data, then usethis.triggerEventMethod is transmitted through the second parameter, the information transmitted to the parent pagemes(String);

    Step 3: In the parent page of the JS file method, passparseInt()Methods theStringtoIntWe get the index we wantindex;

  1. Specific data operations: In order to quickly respond to data and solve business asynchronous problems, our data needs to be stored in the page data first, and then updated to the cloud database when a trigger event, such as going to the payment interface, is triggered. Therefore, we only need to modify the num, orderNumber, and totalPrice values in the corresponding subscript object of the Orders array in data. After modifying the data, If num is 0, use the splice method to remove the object from the array. This is used with quit. When the length of orders is 0, the shopping bag disappears when you quit. Add order, not used as a blank operation, other operations and subtraction similar.

  2. In ES6, use this.setData({}) as an assignment. If the name of the variable in the method is the same as the name of the variable in data, only the assigned variable in data can be written to improve code readability.

<panel orders="{{orders}}" id="panel" bind:add="addNum" bind:sub="subNum" bind:clearAll="clearAll" bind:quit="quit"/> // Method addNum and subNum () addNum (e) {let index = e.c. with our fabrication: urrentTarget. Dataset. The index; this.triggerEvent("add", {mes:index}) }, subNum(e) { let index = e.currentTarget.dataset.index; This. TriggerEvent ("sub", {mes:index})} subNum(e) {let index = parseInt(e.diail.mes); let orders = this.data.orders; let orderNumber = this.data.orderNumber; let totalPrice = this.data.totalPrice; --orders[index].num; --orderNumber; totalPrice = totalPrice - parseInt(orders[index].price); if(orders[index].num == 0){ orders.splice(index, 1); } this.setData({orders,orderNumber,totalPrice}); }Copy the code

2. To empty

Emptying shopping bags is simpler than adding and subtracting, but also requires component methods, again via this.triggerEvent(“clearAll”), but without transferring any data, sets the total, the total number of cups to 0, and emptying the Orders array.

clearAll(){
      let orders = this.data.orders;
      let orderNumber = 0;
      let totalPrice = 0;
      orders = [];
      this.setData({isCar:true, orders,orderNumber,totalPrice})
    }
Copy the code

At this point, the basic functionality of this component is complete! Detailed project code is available in Gitee.

Thanks for watching ❤!!