java实现商品sku_jquery实现商品sku多属性选择功能(商品详情页)
SKU=Stock Keeping Unit(库存量单位)。即库存进出计量的基本单元,可以是以件,盒,托盘等为单位。
SKU是用来定价和管理库存的,比如一个产品有很多颜色,很多配置,每个颜色和配置的组合都会形成新的产品,这时就产生很多SKU,sku在传统线下行业也是一个非常常用的概念,尤其是服装行业,同款不同尺码不同色都是独立的SKU,需要有独立的条形码,独立的库存管理等。
实现效果
源码
商品SKU选择DEMO3
ul,li{ padding:0px; margin:0px;}
#panel{ width:500px; margin:30px auto;}
.goods_attr{ overflow:hidden;}
.goods_attr .label {font: 12px/30px '宋体';color: #777;width: 50px;;padding-right: 10px;float: left; display:block;}
.goods_attr ul {float:left;width:300px;}
.goods_attr li{color:#333;overflow:hidden;position:relative;float:left;text-align:center; vertical-align:middle; border:1px solid #999;text-indent:0; cursor:pointer}
.goods_attr li.b{border:1px dotted #CCC;color:#DDD; pointer:none;}
.goods_attr li.b img {opacity:0.4;}
.goods_attr li.sel{ border:1px solid #c80a28;color:#333;}
.goods_attr li.text{margin:5px 10px 5px 0; height:23px;line-height:23px;text-indent:0;padding:0 23px;font-style:normal;}
.goods_attr li.img{ margin-right:10px;width:35px;height:35px; line-height:35px;text-align:center;}
var keys = {
'attr1':['10','11','12'],
'attr2':['20','21','22','23'],
'attr3':['30','31','32'],
'attr4':['40','41']
};
//SKU,Stock Keeping Uint(库存量单位)
var sku_list=[
{'attrs':'10|20|30|40','num':120},
{'attrs':'10|21|30|40','num':10},
{'attrs':'10|22|30|40','num':28},
{'attrs':'10|22|31|41','num':220},
{'attrs':'10|22|32|40','num':130},
{'attrs':'11|23|32|41','num':120},
{'attrs':'11|22|32|41','num':120},
{'attrs':'11|22|31|41','num':120},
{'attrs':'11|22|31|40','num':120},
{'attrs':'12|22|31|40','num':120},
];
//显示html结构
function show_attr_item(){
var html='';
//k是下标,跟php不同
for(k in keys){
html+='
html+='
- '
for(k2 in keys[k]){
_attr_id=keys[k][k2];
html+='
';
html+=''+_attr_id+'';
html+='';
html+='
'
}
html+='
';
html+='
';
}
$('#panel_sel').html(html);
}
//显示数据
function show_data(sku_list){
var str="";
for( k in sku_list){
str+=sku_list[k]['attrs']+"\t"+sku_list[k]['num']+"\n";
}
$('#panel_sku_list pre').html(str);
}
show_data(sku_list);
show_attr_item();
//返回对象中的一个数组,有attr属性
function filterProduct(ids){
var result=[];
$(sku_list).each(function(k,v){
_attr='|'+v['attrs']+'|';
_all_ids_in=true;
for( k in ids){
if(_attr.indexOf('|'+ids[k]+'|')==-1){
_all_ids_in=false;
break;
}
}
//把数组中的id所在那行的所有元素都压入result。最后返回
if(_all_ids_in){
result.push(v);
}
});
return result;
}
function filterAttrs(ids){
var products=filterProduct(ids);
//console.log(products);
var result=[];
$(products).each(function(k,v){
//括号内的还是返回一个数组,concat函数是拼接一个或多个函数。
result=result.concat(v['attrs'].split('|'));
});
return result;
}
//已选择的节点数组
function _getSelAttrId(){
var list=[];
$('.goods_attr li.sel').each(function(){
list.push($(this).attr('val'));
});
return list;
}
//注册点击事件
$('.goods_attr li').click(function(){
if($(this).hasClass('b')){
return ;//被锁定了
}
if($(this).hasClass('sel')){
$(this).removeClass('sel');
}else{
$(this).siblings().removeClass('sel');
$(this).addClass('sel');
}
var select_ids=_getSelAttrId();
// console.log(select_ids);
已经选择了的规格
var ids=filterAttrs(select_ids);
//如果id不在已选id所在行组成的数组中,则然他禁止点击
$('#panel_sel').find('li').each(function(k2,li2){
if($.inArray($(li2).attr('val'),ids)==-1){
$(li2).addClass('b');
}else{
$(li2).removeClass('b');
}
});
});
部分截图展示说明,一个div放置数据,一个放置效果。模拟后台,结构是根据jquery语法动态展示的。
一些jquery语法解释
key是对应动态展示的效果,可以扩展属性值。sku_list是存在的属性组合。
存在的是指,在这里是有attr1,attr2,attr3,attr4(相当于颜色,尺寸,内存,型号)这4种规格,里面有2x4x3x2=48种组合,而实际上售卖的组合只有9种,就是sku__list列出来的。
一些函数说明
这2个函数是动态展示数据和结构,依据是上面图中的2个数组。keys和sku_list
总结
以上所述是小编给大家介绍的jquery实现商品sku多属性选择功能(商品详情页),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
java实现商品sku_jquery实现商品sku多属性选择功能(商品详情页)相关推荐
- 商品管理系统--分类、品牌、属性、商品、价格、图片管理
商品管理系统界面 分类管理 系统说明 本系统当前没有实现所有的功能,而是描述了实现思路,设计了主要功能和流程,设计了系统框架,并简要演示了几个功能:可以方便在这个系统基础上进行开发完善即可.后续的功能 ...
- 京东商品详情页API接口、京东商品销量API接口、京东商品列表API接口、京东APP详情API接口、京东详情API接口,京东SKU信息接口
京东商品详情页API接口.京东商品销量API接口.京东商品列表API接口.京东APP详情API接口.京东详情API接口,京东SKU信息接口,通过商品ID提取商品详情页各项数据,包含商品标题,sku i ...
- 京东商品详情页API接口、京东详情API接口、京东商品销量API接口、京东商品列表API接口、京东APP详情API接口、京东SKU信息接口,京东API接口
通过商品ID或是商品url中的商品ID调用提取京东商品详情页API接口.京东商品销量API接口.京东商品列表API接口.京东APP详情API接口.京东详情API接口,京东SKU信息接口拿到商品详情页各 ...
- 获得拼多多商品详情(商品主图、sku)
拼多多详情接口可以通过商品ID提取商品详情页各项数据,包含商品标题,skuid.价格.优惠价,收藏数.下单人数.月销售量.SKU图.标题.详情页图片等页面上有的数据均可以拿到,大家都知道,拼多多的反爬 ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- 42、生鲜电商平台-商品的spu和sku数据结构设计与架构
说明:Java开源生鲜电商平台中商品的spu和sku数据结构设计与架构,包括数据库图标与架构分析. 1. 先说明几个概念. 电商网站采用在商品模块,常采用spu+sku的数据结构算法,这种算法可以将商 ...
- 淘宝/Tmall商品详情页视频数据接口(视频数据,销量数据,sku属性数据,页面上有的数据均可以拿到,支持高并发)
Tmall商品详情页视频数据接口(视频数据,销量数据,sku属性数据,页面上有的数据均可以拿到,支持高并发)接口代码教程如下: 1.公共参数 名称 类型 必须 描述 key String 是 调用ke ...
- 淘宝商品详情页视频接口(视频参数,sku属性参数,销量参数等页面上的数据均可以采集,支持高并发请求)
淘宝商品详情页视频接口(视频参数,sku属性参数,销量参数等页面上的数据均可以采集,支持高并发请求)接口代码教程如下: 1.公共参数 名称 类型 必须 描述 key String 是 调用key(必须 ...
- 多多进宝商品列表接口,商品销量,店铺昵称,sku价格,sku属性,商品运费等接口代码展示
多多进宝商品列表接口,商品销量,店铺昵称,sku价格,sku属性,商品运费等接口代码展示如下: 1.公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL ...
最新文章
- CSS浏览器兼容性问题详解总结
- AbstractListView源码分析9
- c#中如何实现拷贝对象
- 焊接空间臂_焊接烟尘净化器设备哪种好
- 剖析 Apache 顶级项目 SkyWalking 的源码 ,看看它有什么好?
- mysql预编译表名_JDBC预编译语句表名占位异常
- Java Byte数组与Long的相互转化
- 函数最值题目及答案_高考数学攻克压轴题:圆锥曲线取值范围和最值问题解题模型...
- MAC读写NTFS移动硬盘的解决办法
- 安卓智能手机完全装机手册,让安卓拥有无限可能!
- 10分钟带你彻底搞懂企业服务总线
- win7计算机系统减肥,win7系统怎么瘦身?教您系统瘦身方法
- 互联网电影院带来新突破,5G+4K’
- 《PyCharm2019安装教程》
- 戴尔计算机的机械硬盘容量,新款戴尔g3加装机械硬盘教程终极版
- linux沙盒程序,沙盒应用程序如何?
- python源程序扩展名有那两种_Python源程序的扩展名是:
- yum不能使用了,怎么办?记下来!!!
- TCP:利用Socket编程技术实现客户端向服务端上传一个图片。
- 分类号检索不好用?那是因为你压根没用对分类