WeChat applet shopping cart implementation code-Mini Program Development-php.cn

This article mainly introduces the implementation code example of the shopping cart in the WeChat Mini Program Practical Chapter. It introduces the functional implementation of the shopping cart in detail. It has certain reference value. Those who are interested can learn about it. I hope it can help everyone.

The interface of the shopping cart is not difficult to implement. The difficulty is to deal with the logic inside. Whether it is a small program or an APP, the logic of the shopping cart is the most difficult. Now I will teach you how to implement the shopping cart. , first the renderings:

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?&#39;../../images/cart/comment_select.png&#39;:&#39;../../images/cart/comment_normal.png&#39;}}" />

   <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>
  </view>
  <view class="separate"></view>
 </view>
</scroll-view>
<view class="bottom_total">
 <view class="bottom_line"></view>

 <view class="row">
  <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?&#39;../../images/cart/comment_select.png&#39;:&#39;../../images/cart/comment_normal.png&#39;}}" />
  <text class="small_text">全选</text>
  <text>合计:￥ </text>
  <text class="price">{{totalMoney}}</text>
  <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
 </view>
</view>

Copy after login

The layout is not very complicated. It is a circular list that loops out the shopping cart items, plus a bottom control for settlement. It should also be reminded that a layer of scroll-view should be added outside the circular list, so that when there is a lot of data , you can scroll. If you are not familiar with scroll-view, please read the previous articles by yourself, which have explanations

cat.wxss

/* pages/cart/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; /* 红色 */
}
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;
}

Copy after login

## There is nothing much to say about the #wxss style. Just understand its properties and call the class. Let’s focus on cart.js. The entire logic is in it.

cart.js

// pages/cart/cart.js
var Temp = require(&#39;../../template/contract.js&#39;);
Page(Object.assign({}, Temp.Quantity, {
 data: {
  isAllSelect:false,
  totalMoney:0,
  // 商品详情介绍
  carts: [
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
    name:"日本资生堂洗颜",
    price:200,
    isSelect:false,
    // 数据设定
    count: {
     quantity: 2,
     min: 1,
     max: 20
    },
   },
   {
    pic: &#39;http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg&#39;,
    name: "倩碧焕妍活力精华露",
    price: 340,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: &#39;http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg&#39;,
    name: "特效润肤露",
    price: 390,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 3,
     min: 1,
     max: 20
    },
   },
   {
    pic: &#39;http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg&#39;,
    name: "倩碧水嫩保湿精华面霜",
    price: 490,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: &#39;http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg&#39;,
    name: "兰蔻清莹柔肤爽肤水",
    price: 289,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 10,
     min: 1,
     max: 20
    },
   },
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    name: "LANCOME兰蔻小黑瓶精华",
    price: 230,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
  ],
 },
 
 //勾选事件处理函数 
 switchSelect: function (e) {
  // 获取item项的id，和数组的下标值 
  var Allprice = 0,i=0;
  let id = e.target.dataset.id,
 
  index = parseInt(e.target.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;
  }
  //是否全选判断
  for (i = 0; i < this.data.carts.length; i++) {
   Allprice = Allprice + this.data.carts[i].price;
  }
  if (Allprice == this.data.totalMoney)
  {
   this.data.isAllSelect=true;
  }
  else 
  {
   this.data.isAllSelect = false;
  }
  this.setData({
   carts: this.data.carts,
   totalMoney: this.data.totalMoney,
   isAllSelect: this.data.isAllSelect,
  })
 },
 //全选
 allSelect: function (e) {
  //处理全选逻辑
  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,
  })
 },
 // 去结算
 toBuy() {
  wx.showToast({
   title: &#39;去结算&#39;,
   icon: &#39;success&#39;,
   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,
  });
 }
}));

Copy after login

Introduce the parameters used

isAllSelect: Whether to select all
totalMoney:Total amount
carts: shopping cart product data

switchSelect check button logic processing required

Determine whether all are checked. If all are checked, the select all button at the bottom should light up. The basis for judgment is whether the price is equal to the total price. Of course, this is only a way of judging. Readers can also judge by the number of checks.
For the checked or canceled buttons, perform addition and subtraction calculations of the total price
this.setData, update the data, this is the key point, Every time after processing the data, remember to update the data

allSelect Logical processing of the select all button

To select all, check each item The selected icon lights up, and then the total price is calculated. If not all are selected, it will be grayed out. The total price is 0
this.setData updates the data

WeChat applet data processing

1. Modify data method

data:{
 name:&#39;我是初始化的name&#39;
}

Copy after login

1. this.data. name

this.data.name=&#39;我是代码君data&#39;

Copy after login

2, this.setData

 this.setData({
   name:&#39;我是代码君setData&#39;
  })

Copy after login

Both methods are available. To change the data, the advantage of this.setData is that it can have a refreshing effect, that is, update the data in real time

2. Modify the object array

data:{
person:{
 name:&#39;代码君&#39;,
 city:&#39;厦门&#39;
}
}

Copy after login

Modify all objects

this.setData({
   person:{
    name:&#39;新代码君&#39;,
    city:&#39;湖南&#39;
   }
  })

Copy after login

Modify some data

this.setData({
   &#39;person.name&#39;: &#39;代码君只修改名字&#39;
  })
//多个数组用这个
this.setData({
   &#39;person[0].name&#39;: &#39;代码君只修改名字&#39;
  })

Copy after login

三, add and delete data

1, add data concat

//假设这一段是我们要新增的数组
var newarray = [{
    name:&#39;增加的数据--&#39;+new Date().getTime() ,
}];
//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);
//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

Copy after login

2, delete data splice() deletes the data, and then returns the Deleted data

//删除
 remove:function (e){
  var dataset = e.target.dataset;
  var Index = dataset.index;
  //通过index识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1
  this.data.list.splice(Index,1);
  //渲染数据
  this.setData({
    list:this.data.list
  });
 }

Copy after login

3. Clear data

//清空
 clear:function (){
  //其实就是让数组变成一个空数组即可
   this.setData({
     list:{}
   });
 }

Copy after login

Summary

Today I mainly explain how js handles data logic, and also explains the addition, deletion, modification and query of data. This is a necessary knowledge item. You need to practice more when you go back. Well, that’s it for today, I wish you all a happy weekend~

Related recommendations:

Simple drag-and-drop shopping cart function implemented in JS

Detailed explanation of angular.js implementation of the shopping cart function

AngularJS implementation of the shopping cart select all and reverse selection function example sharing

The above is the detailed content of WeChat applet shopping cart implementation code. For more information, please follow other related articles on the PHP Chinese website!