前言

商品收藏其实是可以衡量商品好坏和受欢迎程度的一个标准，根据标准可以设置商品权重。

商品权重：销量+商品评分+好评+收藏量+点击率+转化率等等

1、提高曝光，获取自然流量

千人千面下，收藏或购买过的商品，会在各个资源位优先展示。如“好友收藏的店”、购买过的商品“、”好友浏览过“等再一次曝光，拿到更多的自然流量。

2、表示商品本身具有爆款潜力

我们在测款的时候，收藏率一般大于10%，证明商品具有一定的竞争力，后期收藏率持续上升，证明商品潜力越来越大，可作为爆款打造。

3、收藏之后具有高转化率

能收藏商品的买家必定是对商品有购买意向的，也就是说这批买家的非常精准的，我们只要找到他们没有购买的原因，从而提高收藏的转化率。

一、商品收藏⻚⾯

1.业务逻辑

获取本地存储中的数据进⾏渲染
点击商品可以跳转到商品详情⻚⾯

2. 关键技术

⼩程序⾃定义组件
本地存储加载收藏数据

二、商品收藏⻚⾯代码

1.页面代码

// pages/collect/index.js
Page({/*** 页面的初始数据*/data: {collect:[],tabs: [{id: 0,value: "商品收藏",isActive: true},{id: 1,value: "品牌收藏",isActive: false},{id: 2,value: "店铺收藏",isActive: false},{id: 3,value: "浏览器足迹",isActive: false}]},onShow(){const collect=wx.getStorageSync("collect")||[];this.setData({collect});},handleTabsItemChange(e) {// 1 获取被点击的标题索引const { index } = e.detail;// 2 修改源数组let { tabs } = this.data;tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);// 3 赋值到data中this.setData({tabs})}
})

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"><view class="collect_main"><view class="collect_title"><text class="collect_tips active">全部</text><text class="collect_tips">正在热卖</text><text class="collect_tips">即将上线</text></view><view class="collect_content"><navigator class="goods_item" wx:for="{{collect}}" wx:key="goods_id"url="/pages/goods_detail/index?goods_id={{item.goods_id}}"><!-- 左侧 图片容器 --><view class="goods_img_wrap"><image mode="widthFix"src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image></view><!-- 右侧 商品容器 --><view class="goods_info_wrap"><view class="goods_name">{{item.goods_name}}</view><view class="goods_price">￥{{item.goods_price}}</view></view></navigator></view></view></Tabs>

.collect_main {background-color: #f3f4f6;
}
.collect_main .collect_title {padding: 40rpx 0;
}
.collect_main .collect_title .collect_tips {padding: 15rpx;border: 1rpx solid #ccc;margin-left: 25rpx;background-color: #fff;
}
.collect_main .collect_title .active {color: var(--themeColor);border-color: currentColor;
}
.collect_main .collect_content .goods_item {display: flex;border-bottom: 1px solid #ccc;background-color: #fff;
}
.collect_main .collect_content .goods_item .goods_img_wrap {flex: 2;display: flex;justify-content: center;align-items: center;
}
.collect_main .collect_content .goods_item .goods_img_wrap image {width: 70%;
}
.collect_main .collect_content .goods_item .goods_info_wrap {flex: 3;display: flex;flex-direction: column;justify-content: space-around;
}
.collect_main .collect_content .goods_item .goods_info_wrap .goods_name {display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
.collect_main .collect_content .goods_item .goods_info_wrap .goods_price {color: var(--themeColor);font-size: 32rpx;
}

2.效果

【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯相关推荐

【愚公系列】2022年11月微信小程序-优购电商项目-商品支付页面
文章目录前言 1. 商品⽀付页面设计规范一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品购物车页面相关代码 1.页面代码 2.效果前言 1. 商品⽀付页面设计规范第 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品详情页面
文章目录前言一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品详情⻚⾯相关代码 1.页面代码 2.效果前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...
【愚公系列】2022年11月微信小程序-优购电商项目-授权页面
文章目录前言 1. 授权页面一.授权页面 1.业务逻辑 2.涉及的接口数据二.授权页面相关代码 1.页面代码 2.效果前言前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...
【愚公系列】2022年11月微信小程序-优购电商项目-首页设计
文章目录前言一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果前言对于小程序电商首 ...
【愚公系列】2022年11月微信小程序-优购电商项目-意见反馈页面
文章目录前言一.意见反馈页面 1. 业务逻辑 2. 关键技术二.意见反馈页面代码 1.图片上传组件 2.页面代码 3.效果前言对于需要收集产品上线后用户实际使用感受的,意见反馈绝对是一个很好 ...
【愚公系列】2022年10月微信小程序-优购电商项目-⾃定义组件传参
文章目录前言一.id和data-xxx传参二.导航传值三.父子组件传值前言组件传参是小程序中非常重要的一个功能,因为小程序大多都是组件形式存在的. 一.id和data-xxx传参 view ...
【愚公系列】2022年10月微信小程序-优购电商项目-商品分类
文章目录前言一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品分类代码 1.相关代码 2.效果前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...
【愚公系列】2022年10月微信小程序-优购电商项目-小程序模板语法
文章目录前言一.数据绑定 1. 普通写法 2. 组件属性 3. bool类型二.运算 1. 三元运算 2. 算数运算 3. 逻辑判断 4. 字符串运算 5. 注意三.列表渲染 1. wx:fo ...
【愚公系列】2022年11月微信小程序-本地生活项目-首页
文章目录前言 1.本地生活服务平台的优势一.首页二.效果前言从线下企业到线上企业的整合是传统产业和互联网技术的有机结合.它看起来像一个简单的平台,但是它将给消费者和用户带来极大的便利.在电子 ...

【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯

文章目录

前言

一、商品收藏⻚⾯

1.业务逻辑

2. 关键技术

二、商品收藏⻚⾯代码

1.页面代码

2.效果

【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯相关推荐

最新文章

热门文章

【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯

文章目录

前言

一、商品收藏⻚⾯

1.业务逻辑

2. 关键技术

二、商品收藏⻚⾯代码

1.页面代码

2.效果

【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯相关推荐

最新文章

热门文章

【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯

【愚公系列】2022年11月微信小程序-优购电商项目-商品收藏⻚⾯相关推荐