实现京东商品详情页面的商品切换功能

功能介绍：根据选择商品参数不同，选择后跳转到对应的商品详情页面

数据库表

Sku商品属性与销售属性对应关系表（sku_sale_attr_value）：

查询语句

SELECT GROUP_CONCAT(sale_attr_value_id ORDER BY sale_attr_value_id SEPARATOR "|") vauleIds, sku_idFROM sku_sale_attr_valueWHERE spu_id = #{spuId}GROUP BY sku_id

查询结果

可以以List<Map<String, Object>>得到商品属性集合与sku商品id的关系集合，将该集合返回至前台页面

前台页面实现选择参数、切换商品

spuSaleAttrFun(index, spuSaleAttrValueId) {debuggerthis.isAddCart = truevar valuesSkuJson = JSON.parse(this.valuesSkuJson);//根据索引替换已选中的spuSaleAttrValueIdthis.selectValuesSkus[index] = spuSaleAttrValueIdvar valuesSku = this.selectValuesSkus.join('|')//查看新组装的数据是否存在skuId，如果存在跳到该页面，如果不存在控制选中状态var curSkuId = valuesSkuJson[valuesSku]if (curSkuId) {if(curSkuId != this.skuId) {window.location.href = '/' + curSkuId + '.html'} else {this.isAddCart = true}} else {//控制购物车是否可选this.isAddCart = false}//控制销售属性是否选中this.spuSaleAttrList.forEach((spuSaleAttr, i) => {spuSaleAttr.spuSaleAttrValueList.forEach((spuSaleAttrValue) => {if (index == i) {if (spuSaleAttrValueId == spuSaleAttrValue.id) {spuSaleAttrValue.isChecked = 1} else {spuSaleAttrValue.isChecked = 0}}})})},

实现京东商品详情页面的商品切换功能相关推荐

ios仿淘宝商品详情页面粘贴商品规格弹出模板
基于Vue+SpringCloudAlibaba微服务电商项目实战-商品服务-015：亿万级别商品详情页面实现动态优化
015:亿万级别商品详情页面实现动态优化 1 亿万级别商品详情页面如何设计 2 使用Nginx缓存商品详情页面 3 使用FreeMarker生成静态化模板页面 4 openresty+lua实现亿级别 ...
企业WEB项目实现商品详情页面展示功能
概述在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面.其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情.延迟一秒加载使用ajax c) 商品的 ...
Python爬虫实战之一：requests-爬取京东商品详情页面
本实战项目是中国大学MOOC国家精品课程<Python网络爬虫与信息提取>(by 嵩天北京理工大学)学习笔记. 目录 1.爬取目标 2.爬取链接 3.技术路线 4.全部代码及输出 5.总 ...
淘宝京东拼多多抖音淘特1688等多平台商品APP详情API接口（商品详情页面数据接口，商品销量接口，关键词搜索商品销量接口）
淘宝京东拼多多抖音淘特1688等多平台商品APP详情API接口(商品详情页面数据接口,商品销量接口,关键词搜索商品销量接口)代码对接如下: 1.公共参数名称类型必须描述 key String ...
仿淘宝商品详情页面Android
[致谢]:qifengdeqingchen [博客地址]:http://blog.csdn.net/qifengdeqingchen/article/details/51659735 1.需求: 要实 ...
Python爬虫实战之二：requests-爬取亚马逊商品详情页面
本实战项目是中国大学MOOC国家精品课程<Python网络爬虫与信息提取>(by 嵩天北京理工大学)学习笔记.代码段均可在ide中运行by now(2021-11-29). 目录 1.爬 ...
淘淘商城第106讲——改造商品详情页面中的加入购物车板块
在上一讲中,我就说过,关于购物车模块,之前的京东和淘宝并不一样,之前的京东允许用户在没有登录的情况下就添加商品进购物车,而且加到购物车里面的商品可以一直保存着.其实这是将购物车信息写入到了Cookie ...
小红书商品详情API接口（商品详情页面数据接口）
小红书商品详情API接口(商品详情页面数据接口)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中,点击获取请求key和secr ...

实现京东商品详情页面的商品切换功能

这里写自定义目录标题

实现京东商品详情页面的商品切换功能

功能介绍：根据选择商品参数不同，选择后跳转到对应的商品详情页面

数据库表

查询语句

查询结果

前台页面实现选择参数、切换商品

实现京东商品详情页面的商品切换功能相关推荐

最新文章

热门文章