Implementation of product attribute classification in WeChat mini program mall project

This article mainly introduces the product attribute value linkage selection of the WeChat mini program mall project in detail. It has a certain reference value. Interested friends can refer to

Continuation of the previous article Article: Addition and Subtraction of Shopping Quantity in WeChat Mini Program

The addition and subtraction of shopping quantity mentioned in

, now let’s talk about the linkage selection of product attribute value.

In order to give students an intuitive understanding, I went to the e-commerce website and took a picture, which is the part shown in the red circle

Now I will introduce this small component to you. In the small program, how to write

The picture below is the picture of this project:

##wxml:

<view class="title">商品属性值联动选择</view> 
<!--options--> 
<view class="commodity_attr_list"> 
 <!--每组属性--> 
 <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex"> 
 <!--属性名--> 
 <view class="attr_name">{{attrValueObj.attrKey}}</view> 
 <!--属性值--> 
 <view class="attr_value_box"> 
 <!--每个属性值--> 
 <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?&#39;attr_value_active&#39;:&#39;&#39;):&#39;attr_value_disabled&#39;}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}" 
 data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view> 
 </view> 
 </view> 
</view> 
<!--button--> 
<view class="weui-btn-area"> 
 <button class="weui-btn" type="primary" bindtap="submit">确定</button> 
</view>

wxss：

.title { 
 padding: 10rpx 20rpx; 
 margin: 10rpx 0; 
 border-left: 4rpx solid #ccc; 
} 
 
/*全部属性的主盒子*/ 
.commodity_attr_list { 
 background: #fff; 
 padding: 0 20rpx; 
 font-size: 26rpx; 
 overflow: hidden; 
 width: 100%; 
} 
/*每组属性的主盒子*/ 
.attr_box { 
 width: 100%; 
 overflow: hidden; 
 border-bottom: 1rpx solid #ececec; 
} 
/*属性名*/ 
.attr_name { 
 width: 20%; 
 float: left; 
 padding: 15rpx 0; 
} 
/*属性值*/ 
.attr_value_box { 
 width: 80%; 
 float: left; 
 padding: 15rpx 0; 
 overflow: hidden; 
} 
/*每个属性值*/ 
.attr_value { 
 float: left; 
 padding: 0 10rpx; 
 margin: 0 10rpx; 
 border: 1rpx solid #ececec; 
} 
/*每个属性选中的当前样式*/ 
.attr_value_active { 
 background: #FFCC00; 
 border-radius: 10rpx; 
 color: #fff; 
 padding: 0 10rpx; 
} 
/*禁用属性*/ 
.attr_value_disabled { 
 color: #ccc; 
} 
 
/*button*/ 
.btn-area { 
 margin: 1.17647059em 15px 0.3em; 
} 
 
.btn { 
 margin-top: 15px; 
 background-color:#FFCC00; 
 color: #fff; 
} 
.btn:first-child { 
 margin-top: 0; 
}

js：

In the data part, data is generally obtained through the access interface. Network access is not used here. In order to simplify the demo, a set of data is directly placed in the data object.

Page({ 
 data: { 
 firstIndex: -1, 
 //准备数据 
 //数据结构：以一组一组来进行设定 
 commodityAttr: [ 
 { 
 priceId: 1, 
 price: 35.0, 
 "stock": 8, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "2" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "白色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "小" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "S" 
 } 
 ] 
 }, 
 { 
 priceId: 2, 
 price: 35.1, 
 "stock": 9, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "黑色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "小" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "M" 
 } 
 ] 
 }, 
 { 
 priceId: 3, 
 price: 35.2, 
 "stock": 10, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "绿色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "大" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "L" 
 } 
 ] 
 }, 
 { 
 priceId: 4, 
 price: 35.2, 
 "stock": 10, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "绿色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "大" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "L" 
 } 
 ] 
 } 
 ], 
 attrValueList: [] 
 }, 
 onShow: function () { 
 this.setData({ 
 includeGroup: this.data.commodityAttr 
 }); 
 this.distachAttrValue(this.data.commodityAttr); 
 // 只有一个属性组合的时候默认选中 
 // console.log(this.data.attrValueList); 
 if (this.data.commodityAttr.length == 1) { 
 for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) { 
 this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue; 
 } 
 this.setData({ 
 attrValueList: this.data.attrValueList 
 }); 
 } 
 }, 
 /* 获取数据 */ 
 distachAttrValue: function (commodityAttr) { 
 /** 
 将后台返回的数据组合成类似 
 { 
 attrKey:&#39;型号&#39;, 
 attrValueList:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;] 
 } 
 */ 
 // 把数据对象的数据（视图使用），写到局部内 
 var attrValueList = this.data.attrValueList; 
 // 遍历获取的数据 
 for (var i = 0; i < commodityAttr.length; i++) { 
 for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) { 
 var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList); 
 // console.log(&#39;属性索引&#39;, attrIndex); 
 // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置 
 if (attrIndex >= 0) { 
 // 如果属性值数组中没有该值，push新值；否则不处理 
 if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) { 
 attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue); 
 } 
 } else { 
 attrValueList.push({ 
 attrKey: commodityAttr[i].attrValueList[j].attrKey, 
 attrValues: [commodityAttr[i].attrValueList[j].attrValue] 
 }); 
 } 
 } 
 } 
 // console.log(&#39;result&#39;, attrValueList) 
 for (var i = 0; i < attrValueList.length; i++) { 
 for (var j = 0; j < attrValueList[i].attrValues.length; j++) { 
 if (attrValueList[i].attrValueStatus) { 
 attrValueList[i].attrValueStatus[j] = true; 
 } else { 
 attrValueList[i].attrValueStatus = []; 
 attrValueList[i].attrValueStatus[j] = true; 
 } 
 } 
 } 
 this.setData({ 
 attrValueList: attrValueList 
 }); 
 }, 
 getAttrIndex: function (attrName, attrValueList) { 
 // 判断数组中的attrKey是否有该属性值 
 for (var i = 0; i < attrValueList.length; i++) { 
 if (attrName == attrValueList[i].attrKey) { 
 break; 
 } 
 } 
 return i < attrValueList.length ? i : -1; 
 }, 
 isValueExist: function (value, valueArr) { 
 // 判断是否已有属性值 
 for (var i = 0; i < valueArr.length; i++) { 
 if (valueArr[i] == value) { 
 break; 
 } 
 } 
 return i < valueArr.length; 
 }, 
 /* 选择属性值事件 */ 
 selectAttrValue: function (e) { 
 /* 
 点选属性值，联动判断其他属性值是否可选 
 { 
 attrKey:&#39;型号&#39;, 
 attrValueList:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;], 
 selectedValue:&#39;1&#39;, 
 attrValueStatus:[true,true,true] 
 } 
 console.log(e.currentTarget.dataset); 
 */ 
 var attrValueList = this.data.attrValueList; 
 var index = e.currentTarget.dataset.index;//属性索引 
 var key = e.currentTarget.dataset.key; 
 var value = e.currentTarget.dataset.value; 
 if (e.currentTarget.dataset.status || index == this.data.firstIndex) { 
 if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) { 
 // 取消选中 
 this.disSelectValue(attrValueList, index, key, value); 
 } else { 
 // 选中 
 this.selectValue(attrValueList, index, key, value); 
 } 
 
 } 
 }, 
 /* 选中 */ 
 selectValue: function (attrValueList, index, key, value, unselectStatus) { 
 // console.log(&#39;firstIndex&#39;, this.data.firstIndex); 
 var includeGroup = []; 
 if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选 
 var commodityAttr = this.data.commodityAttr; 
 // 其他选中的属性值全都置空 
 // console.log(&#39;其他选中的属性值全都置空&#39;, index, this.data.firstIndex, !unselectStatus); 
 for (var i = 0; i < attrValueList.length; i++) { 
 for (var j = 0; j < attrValueList[i].attrValues.length; j++) { 
 attrValueList[i].selectedValue = &#39;&#39;; 
 } 
 } 
 } else { 
 var commodityAttr = this.data.includeGroup; 
 } 
 
 // console.log(&#39;选中&#39;, commodityAttr, index, key, value); 
 for (var i = 0; i < commodityAttr.length; i++) { 
 for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) { 
 if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) { 
 includeGroup.push(commodityAttr[i]); 
 } 
 } 
 } 
 attrValueList[index].selectedValue = value; 
 
 // 判断属性是否可选 
 for (var i = 0; i < attrValueList.length; i++) { 
 for (var j = 0; j < attrValueList[i].attrValues.length; j++) { 
 attrValueList[i].attrValueStatus[j] = false; 
 } 
 } 
 for (var k = 0; k < attrValueList.length; k++) { 
 for (var i = 0; i < includeGroup.length; i++) { 
 for (var j = 0; j < includeGroup[i].attrValueList.length; j++) { 
 if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) { 
 for (var m = 0; m < attrValueList[k].attrValues.length; m++) { 
 if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) { 
 attrValueList[k].attrValueStatus[m] = true; 
 } 
 } 
 } 
 } 
 } 
 } 
 // console.log(&#39;结果&#39;, attrValueList); 
 this.setData({ 
 attrValueList: attrValueList, 
 includeGroup: includeGroup 
 }); 
 
 var count = 0; 
 for (var i = 0; i < attrValueList.length; i++) { 
 for (var j = 0; j < attrValueList[i].attrValues.length; j++) { 
 if (attrValueList[i].selectedValue) { 
 count++; 
 break; 
 } 
 } 
 } 
 if (count < 2) {// 第一次选中，同属性的值都可选 
 this.setData({ 
 firstIndex: index 
 }); 
 } else { 
 this.setData({ 
 firstIndex: -1 
 }); 
 } 
 }, 
 /* 取消选中 */ 
 disSelectValue: function (attrValueList, index, key, value) { 
 var commodityAttr = this.data.commodityAttr; 
 attrValueList[index].selectedValue = &#39;&#39;; 
 
 // 判断属性是否可选 
 for (var i = 0; i < attrValueList.length; i++) { 
 for (var j = 0; j < attrValueList[i].attrValues.length; j++) { 
 attrValueList[i].attrValueStatus[j] = true; 
 } 
 } 
 this.setData({ 
 includeGroup: commodityAttr, 
 attrValueList: attrValueList 
 }); 
 
 for (var i = 0; i < attrValueList.length; i++) { 
 if (attrValueList[i].selectedValue) { 
 this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true); 
 } 
 } 
 }, 
 /* 点击确定 */ 
 submit: function () { 
 var value = []; 
 for (var i = 0; i < this.data.attrValueList.length; i++) { 
 if (!this.data.attrValueList[i].selectedValue) { 
 break; 
 } 
 value.push(this.data.attrValueList[i].selectedValue); 
 } 
 if (i < this.data.attrValueList.length) { 
 wx.showToast({ 
 title: &#39;请完善属性&#39;, 
 icon: &#39;loading&#39;, 
 duration: 1000 
 }) 
 } else { 
 wx.showToast({ 
 title: &#39;选择的属性：&#39; + value.join(&#39;-&#39;), 
 icon: &#39;sucess&#39;, 
 duration: 1000 
 }) 
 } 
 } 
})

Operation effect:

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

Related recommendations:

The effect of sidebar classification in the WeChat mini program mall

WeChat mini program mall project Shopping quantity addition and subtraction

Tools required for WeChat mini program shopping mall system development

##

The above is the detailed content of Implementation of product attribute classification in WeChat mini program mall project. For more information, please follow other related articles on the PHP Chinese website!