电商产品详情页多规格尺码选择,根据库存禁用

原创
09/14 23:24
阅读数 99
<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>商品SKU选择DEMO3</title>
</head>
<body>
<style type="text/css">

 .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.disabled {border:1px dotted #CCC;color:#DDD; pointer:none;}
 .goods_attr li.disabled img {opacity:0.4;}
 .goods_attr li.active{ 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;}
 .goods_attr li div.image, .goods_attr li div.color {
    width: 50px;
    height: 50px;
 }
</style>
<div id="panel_sel">
 </div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
 var keys = {
 '颜色':[{'10':{'title':'红色', 'image': 'http://v.bootstrapmb.com/2018/7/7mte1489/img/6.png', 'color':''}},{'11':{'title':'绿色', 'image': 'http://v.bootstrapmb.com/2018/7/7mte1489/img/4.png', 'color':''}}, {'12':{'title':'蓝色', 'image': 'http://v.bootstrapmb.com/2018/7/7mte1489/img/3.png', 'color':''}}],
 '材质':[{'20':{'title':'黄金', 'image': '', 'color':'red'}},{'21':{'title':'乌金', 'image': '', 'color':'black'}}],
 '尺码':[{'30':{'title':'S', 'image': '', 'color':''}},{'31':{'title':'M', 'image': '', 'color':''}},{'32':{'title':'L', 'image': '', 'color':''}}],
 };

 //SKU,Stock Keeping Uint(库存量单位)
 var sku_list=[
     {'attrs':'10|20|30','stock':1},
     {'attrs':'10|20|31','stock':2},
     {'attrs':'10|20|32','stock':3},
     {'attrs':'10|21|30','stock':4},
     {'attrs':'10|21|31','stock':5},
     {'attrs':'10|21|32','stock':6},

     {'attrs':'11|20|30','stock':7},
     {'attrs':'11|20|31','stock':8},
     {'attrs':'11|20|32','stock':9},
     {'attrs':'11|21|30','stock':10},
     {'attrs':'11|21|31','stock':11},
     {'attrs':'11|21|32','stock':12},

     {'attrs':'12|20|30','stock':0},
     {'attrs':'12|20|31','stock':14},
     {'attrs':'12|20|32','stock':15},
     {'attrs':'12|21|30','stock':0},
     {'attrs':'12|21|31','stock':1},
     {'attrs':'12|21|32','stock':0},
     
 ];

 var voptionIds = [];

 //显示html结构
 function show_attr_item(){
     var html='';
     for(k in keys){
      html+='<div class="goods_attr" > <span class="label">'+k+'</span>';
      html+='<ul>'
      for(k2 in keys[k]){
          attri_values=keys[k][k2];
          $.each(attri_values, function(_attr_id, data) {
              voptionIds.push(_attr_id);
              html+='<li class="text disabled" val="'+_attr_id+'" >';
              if(data.image !=='') {
                html+='<span><div class="image"><img title="'+data.title+'" src="'+data.image+'"/></div></span>';
              } else if(data.color !== '') {
                html+='<span><div title="'+data.title+'" class="color" style="background:'+data.color+'"></div></span>';
              } else {
                html+='<span>'+data.title+'</span>';
              }
              html+='<s></s>';
              html+='</li>';
          })
      }
      html+='</ul>';
      html+='</div>';
     }
     $('#panel_sel').html(html);

     checkStock(voptionIds);
 }

 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.active').each(function(){
      list.push($(this).attr('val'));
     });
     return list;
 }

 //注册点击事件
 $('.goods_attr li').click(function(){
     if($(this).hasClass('disabled')){
        return ;//被锁定了
     }
     if($(this).hasClass('active')){
        $(this).removeClass('active');
     }else{
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
     }
     var select_ids=_getSelAttrId();
      // console.log(select_ids);
      ////已经选择了的规格
     var ids=filterAttrs(select_ids);

     var attrIndex = $(this).parent().parent().index();

     $(".goods_attr:gt("+attrIndex+")").find("li").removeClass("active");
     $(".goods_attr:gt("+attrIndex+")").find("li").addClass("disabled");

     if(!$('.goods_attr li.active').length) {
        checkStock(voptionIds);
     } else {
         var leftOptions = [];
        $.each($('.goods_attr:gt('+attrIndex+') li'), function() {
            leftOptions.push($(this).attr('val'));
        })
        checkedAndLeftOptions(leftOptions);
     }

 });


function checkedAndLeftOptions(ids)
{
    var checkedOp = [];
    $.each($('.goods_attr li.active'), function() {
        activeId = $(this).attr('val');
        checkedOp.push(activeId);
    })

    selectedActive = '|'+checkedOp.join('|')+'|';

    $.each(sku_list, function(sli, slv) {
        attris = '|'+slv.attrs+'|';
        if(attris.indexOf(selectedActive) !== -1) {
            $.each(ids, function(i, k) {
                if(attris.indexOf('|'+k+'|') !== -1 && slv.stock>0) {
                    $(".goods_attr li[val="+k+"]").removeClass('disabled');
                }
            })
        }
    })
}

function checkStock(voptions) {
    $.each(voptions, function(i, k) {
        $.each(sku_list, function(sli, slv) {
            attris = '|'+slv.attrs+'|';
            if(slv.stock>0 && attris.indexOf('|'+k+'|') !== -1) {
                $(".goods_attr li[val="+k+"]").removeClass('disabled');
            }
        })
    })
 }
</script>
</body>
</html>

 

运行效果,图片地址自己替换

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部