商品SKU【layui模块】

模块名称:商品SKU【layui模块】
使用方法:

var SKU = sku.init({ id:'sku', item: item, data:data });

参数说明: 
 

var item = [{"id":1,"name":"颜色","sub":[{"id":1,"name":"黑"},{"id":2,"name":"白"},{"id":3,"name":"蓝"}]},{"id":2,"name":"尺寸","sub":[{"id":4,"name":"S"},{"id":5,"name":"M"},{"id":6,"name":"L"}]}];

var data = [{"ids":[{"1":"1"},{"2":"4"}],"price":0,"stock":0,"sku":0}];

文档地址: https://weibo.com/yinxu46 
获取代码:​ https://github.com/yinxu46/sku 
企业网站: https://www.1000duo.cn 

 

 

 





  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要引入layui库和jQuery库: ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.js"></script> ``` 然后,我们可以通过以下方式来实现一个SKU选择器: 1. 定义属性和SKU列表 ```javascript var attrs = [ {name: '尺码', values: ['S', 'M', 'L', 'XL']}, {name: '颜色', values: ['红色', '黄色', '蓝色']} ]; var skus = [ {attrs: ['S', '红色'], price: 100, stock: 10}, {attrs: ['S', '黄色'], price: 110, stock: 5}, {attrs: ['S', '蓝色'], price: 120, stock: 2}, {attrs: ['M', '红色'], price: 130, stock: 7}, {attrs: ['M', '黄色'], price: 140, stock: 8}, {attrs: ['M', '蓝色'], price: 150, stock: 3}, {attrs: ['L', '红色'], price: 160, stock: 6}, {attrs: ['L', '黄色'], price: 170, stock: 4}, {attrs: ['L', '蓝色'], price: 180, stock: 1}, {attrs: ['XL', '红色'], price: 190, stock: 0}, {attrs: ['XL', '黄色'], price: 200, stock: 0}, {attrs: ['XL', '蓝色'], price: 210, stock: 0} ]; ``` 2. 渲染属性选择器 ```javascript var $attrs = $('#attrs'); $.each(attrs, function(i, attr) { var $attr = $('<div class="layui-form-item"></div>'); $attr.append('<label class="layui-form-label">'+attr.name+'</label>'); var $values = $('<div class="layui-input-block"></div>'); $.each(attr.values, function(j, value) { $values.append('<input type="checkbox" name="'+attr.name+'" title="'+value+'">'); }); $attr.append($values); $attrs.append($attr); }); ``` 3. 监听属性变化,更新SKU信息 ```javascript $('#attrs input').on('change', function() { var selectedAttrs = []; $('#attrs input:checked').each(function() { selectedAttrs.push($(this).attr('title')); }); var sku = getSKU(selectedAttrs); $('#price').text(sku ? sku.price : '未知'); $('#stock').text(sku ? sku.stock : '0'); }); function getSKU(selectedAttrs) { var sku = null; $.each(skus, function(i, _sku) { if (matchAttrs(_sku.attrs, selectedAttrs)) { sku = _sku; return false; } }); return sku; } function matchAttrs(attrs1, attrs2) { if (attrs1.length != attrs2.length) { return false; } for (var i = 0; i < attrs1.length; i++) { if (attrs1[i] != attrs2[i]) { return false; } } return true; } ``` 4. 渲染价格和库存信息 ```html <div class="layui-form-item"> <label class="layui-form-label">价格</label> <div class="layui-input-block"> <span id="price">未知</span>元 </div> </div> <div class="layui-form-item"> <label class="layui-form-label">库存</label> <div class="layui-input-block"> <span id="stock">0</span>件 </div> </div> ``` 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SKU选择器</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.js"></script> </head> <body> <form class="layui-form layui-form-pane" style="margin: 20px;"> <div id="attrs"></div> <div class="layui-form-item"> <label class="layui-form-label">价格</label> <div class="layui-input-block"> <span id="price">未知</span>元 </div> </div> <div class="layui-form-item"> <label class="layui-form-label">库存</label> <div class="layui-input-block"> <span id="stock">0</span>件 </div> </div> </form> <script> var attrs = [ {name: '尺码', values: ['S', 'M', 'L', 'XL']}, {name: '颜色', values: ['红色', '黄色', '蓝色']} ]; var skus = [ {attrs: ['S', '红色'], price: 100, stock: 10}, {attrs: ['S', '黄色'], price: 110, stock: 5}, {attrs: ['S', '蓝色'], price: 120, stock: 2}, {attrs: ['M', '红色'], price: 130, stock: 7}, {attrs: ['M', '黄色'], price: 140, stock: 8}, {attrs: ['M', '蓝色'], price: 150, stock: 3}, {attrs: ['L', '红色'], price: 160, stock: 6}, {attrs: ['L', '黄色'], price: 170, stock: 4}, {attrs: ['L', '蓝色'], price: 180, stock: 1}, {attrs: ['XL', '红色'], price: 190, stock: 0}, {attrs: ['XL', '黄色'], price: 200, stock: 0}, {attrs: ['XL', '蓝色'], price: 210, stock: 0} ]; var $attrs = $('#attrs'); $.each(attrs, function(i, attr) { var $attr = $('<div class="layui-form-item"></div>'); $attr.append('<label class="layui-form-label">'+attr.name+'</label>'); var $values = $('<div class="layui-input-block"></div>'); $.each(attr.values, function(j, value) { $values.append('<input type="checkbox" name="'+attr.name+'" title="'+value+'">'); }); $attr.append($values); $attrs.append($attr); }); $('#attrs input').on('change', function() { var selectedAttrs = []; $('#attrs input:checked').each(function() { selectedAttrs.push($(this).attr('title')); }); var sku = getSKU(selectedAttrs); $('#price').text(sku ? sku.price : '未知'); $('#stock').text(sku ? sku.stock : '0'); }); function getSKU(selectedAttrs) { var sku = null; $.each(skus, function(i, _sku) { if (matchAttrs(_sku.attrs, selectedAttrs)) { sku = _sku; return false; } }); return sku; } function matchAttrs(attrs1, attrs2) { if (attrs1.length != attrs2.length) { return false; } for (var i = 0; i < attrs1.length; i++) { if (attrs1[i] != attrs2[i]) { return false; } } return true; } </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值