Simple example of shopping cart in WeChat mini program

This article mainly introduces relevant information about a simple example of the WeChat mini program shopping cart. Friends who need it can refer to

WeChat mini program. Here is a small demo that implements the shopping cart function. If you need this function Friends can refer to it.

Abstract: Add or subtract product quantity, summarize price, select all or none

Design ideas:

1. From the Internet Upload the array in the following Json data format 1. Shopping cart id: cid 2. Title title 3. Quantity num 4. Image address 5. Price price 6. Subtotal 7. Whether selected

is selected 2. Click Repeat If the marquee toggle operation is already selected, it will become unselected by clicking. On the contrary, the click will be based on index as the identifier instead of cid, which facilitates traversal

3. Select all operation The first click will select all, and then click again Click to unselect all, and the select all button itself will also follow the toggle transformation

4. Click the settlement button to take out the selected cid array for submission to the server through the network. Here is a toast as a demonstration of the result. .

5. Use stepper to perform addition and subtraction operations, also use index as the identifier, and write back the num value after clicking.

6. Layout, select all and align with the bottom of the checkout button, the shopping cart mall adaptive height, similar to Android weight.

Steps:

Initial data rendering

1.1 Layout and style sheet

The top is a product list, and the bottom It is a select all button and an immediate settlement button

The left part of the product list is the product thumbnail, the upper right is the product title, and the lower right is the product price and quantity. The product quantity uses WXStepper to implement addition and subtraction operations

js: Initialize a data source, which is often obtained from the network. For related interfaces, see: https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

Layout file

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

Style sheet

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

1.2 Integrate WXStepper

1.2.1 Copy component content

[2016-10-16]

Copy the content of stepper.wxss to cart.wxss

Copy the contents of stepper.wxml to cart.wxml

The difference from the previous single component is that the array minusStatuses needs to be defined here to correspond to each plus and minus button. Of course, there is no problem in merging it into carts.

       minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']

The original static character WXStepper is replaced with the following code

 <view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js code bindMinus and bindPlus are transformed as follows:

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

The effect is as shown:

##[2016-10-17]

Correction of saving the number of manual changes to an array

1.3 Integrating LXCheckboxGroup

Copy the layout file code to wxml. Here you need to judge the selected status. Generally, the shopping cart check status is recorded in Network.

The index value is used to pass value js and used for traversal.

 <!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

The check box is centered

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

Bind the click check box event to invert the selection state.

  bindCheckbox: function(e) {
    /*绑定点击事件，将checkbox样式改变为选中与非选中*/
    //拿到下标值，以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

Rendering:

1.4 Add select all and immediate settlement buttons

1.4.1 Modify the layout file to achieve The above buttons are aligned at the bottom, using flex and fixed height.

Reduce it to 3 lines to see if it is still at the bottom; in addition, make sure it is suspended at the bottom and will not be scrolled by the scrolling of the list items.

 <view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

I used Settlement Now before, but I found that it was impossible to achieve dispersed alignment of all selected components and the settlement button, and it did not respond to the following styles

  display: flex;
  flex-direction: row;
  justify-content: space-between;

Style Table

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 Select all and unselect all events

Implement the bindSelectAll event and change the all-selected state

First define a data value to record the all-selected state

selectedAllStatus: false

Event implementation:

 bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据，关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

1.4.3 Immediate settlement displays the currently selected cid for When submitted to the Internet, the product quantity should be included in the cid. The back-end design should only focus on the cid and uid

The layout file should also bury the toast. JS only needs to change the display of the toast.

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

Bind the event bindCheckout for immediate settlement and pop up the cid pop-up window

 bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += &#39; &#39;;
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 Bottom floating fixed

1.5.1 Product list.carts-list Add margin-bottom: 80rpx; and modify the top margin to zero so that the bottom components and separation do not appear repeatedly. Padding: 0 40rpx;

1.5.2 Bottom button.carts-footer Add background: white;

1.5 .3 .carts-footer join

  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

##1.6 Summary

1.6.1 First define a data source and bury it in the layout file

total: ''

{{total}}

1.6.2 General summary function

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: &#39;￥&#39; + total
    });
  }

Then bindMinus This.sum() is called in bindPlus bindCheckbox bindSelectAll onLoad

As shown in the figure:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat mini program makes takeout menu ordering function

How to implement it in the development of WeChat mini program E-commerce shopping cart logic

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