先上图给大家看看效果,点这里打开案例(安惠美)(后期可能会找不到这个商品,现在再测试阶段)
现在你能看到的这个页面中,尺寸、文本描述是单选框(属性是我乱写的名字),上门安装是复选框。效果就看到这里,请君跳过图片,开始看实现过程:
NopCommerce的属性View全部在Product下面_ProductAttributes.cshtml生成的,所以,整个的操作都是在_ProductAttributes.cshtml这个文件中。
打开这个文件,首先里面会有它生成各种控件用的一大段forearch,如图
他这个里面一个Case就是一种控件,我重写的是单选和复选,所以改他的RadioList和CheckBox就好了,先来看单选的代码,说明在注释中
case AttributeControlType.RadioList: { @*单选框他会有很多个选项,foreach,高手忽略这句*@ @foreach (var pvaValue in attribute.Values) { @*把他的单选按钮给通过Display:none隐藏起来*@ @*下面是给用户显示的被美容过的单选按钮,我没法往出来贴CSS,想办法完了给大家一个下载地址吧*@ @if (!string.IsNullOrEmpty(pvaValue.PictureUrl)) { @*下面是商品属性所关联的图片*@ } @pvaValue.Name @(!String.IsNullOrEmpty(pvaValue.PriceAdjustment) ? " [" + pvaValue.PriceAdjustment + "]" : null) } } break;
单选按钮
既然把单选按钮给隐藏了,那怎么再让用户去选中他呢?答案是,通过JS,当用户点击外面的那个漂亮版单选框的时候,去找���那个单选控件,然后给他选中(注意,单选框没有再点击一次反选这么一说)
JS代码如下,注释在里面了
单选的JS
单选的就这样子就搞定了,如果遇到问题,在下面跟回复。
---------------------------------------------------------分割线,复选框开始-------------------------------------------------------------------------------
生成复选框的代码(跟单选框一个道理,没写注释,有问题的下面回复)
$(".chose .item .radio_a").click(function() { var thisToaggle = $(this).is('.radio_a') ? $(this) : $(this).prev();//找到元素 var checkBox = thisToaggle.prev();//找到他对应的单选按钮 checkBox.attr('checked','checked');//给他选中,这块如果不手动给他选中,在计算价格的时候会有Bug checkBox.trigger('click');//执行这个单选按钮的单击事件,目的是为了让他改变价格 var name = checkBox.attr("name"); $("[name=" + name + "]").next("a").parent(".chose .item").removeClass("selected");//其他的单选按钮移除选中效果 thisToaggle.parent('.chose .item').addClass('selected');//当前单选按钮添加选中效果 return false; });
复选框
复选框跟单选框有点不一样,因为单选框没有再点击一次反选这么一说,但是复选框点第一次,是选中,第二次,就是不选中了,所以,再单选应对那个JS的bug的时候,就会有问题,认真看了单选JS的会知道,先给他把选中属性"checkBox.attr('checked','checked');"给改了,然后再去执行Click事件,如果用作复选框,就相当于复选框你先给他选中,然后再执行一个Click事件,就又成不选中了,但是如果不去手动执行"checkBox.attr('checked','checked');”价格计算又会有bug(你可以注释掉单选的那句看看那个Bug,东西太多,说起来会很费劲的)
逼得我没办法,把nop原来是click去执行价格的重新计算改成了onmoursedown,效果应该是一样的,我反正没遇到过bug,怎么改见下面的代码:
1.在生成界面代码的下面,又Nop生成js的一大堆代码,这里也是switch case(这个是Nop去改变价格的),看图:
找到复选框的,把Click,改成MouseDown,如图:
再下面他还有一组Switch Case(这个是Nop去改变左边商品图片的),把那个里面的click,也改成mousedown,如图
好了,生成的东西就改完了,最后我放JS出来:
$(".chose .item .radio_b").click(function() { var thisToaggle = $(this).is('.radio_b') ? $(this) : $(this).prev(); var checkBox = thisToaggle.prev(); checkBox.prop('checked',!checkBox.prop('checked'));//如果没选中,给他选中,如果选中了,给他改成没选中 checkBox.trigger('mousedown');//执行mousedown事件 var name = checkBox.attr("name"); $("[name=" + name + "]").next("a").parent(".chose .item").toggleClass("selected"); return false; });
大功告成!没啥需要修改的了....
我那个单选框美化的CSS没法给大家,给大家另外我百度找的一组,看起来也不错。点此下载
最后把Nop生成的JS放出来,感兴趣的看看他的实现思路
1 67 68 69 70 71 72 73 132
祝大家生活愉快~