Ecshop商城商品属性筛选插件制作方法

1、Ecshop商城商品属性筛选插件制作方法分享这两天用ecshop制作一个商城站时想把里面的商品属性值做成很多大商城常见的可选择分类那种，搜了不少没有提供这方面教程的，找到的也不能使用。有的都是作为插件卖的，竟然没人分享岀来，自己研究了 下搞定了，免费分享给每位遇到同样问题的朋友，希望能帮助到你。修改步骤：1将下面这个图片上传到themes您当前模板/images文件夹里面，这里我命名为test.gif。如果你自己改为其他文件名，那么在下面的修改中就要保持一致。2、找到themes/您当前模板/goods.dwt文件，做如下修改：找到下面这段代码：<!-*开始循环所有可选属性*->&

2、lt;!- foreach from=$specification item=spec key=spec_key-><li class="padd loop"><strong>$：v/strong><br/><!- *判断属性是复选还是单选*-><!- if $spec.attr_type eq 1-><!- if $cfg.goodsattr_style eq 1-><!- foreach from=$spec.values item=value key=key-&

3、gt;vlabel for="spec_value_$value.id">vinput type="radio" name="spec_$spec_key" value="$value.id" id="spec_value_$value.id" if $key eq 0checked/if onclick="changePrice()" />$value.label if $value.price gt 0$lang.pluselseif $value.price

4、 lt 0$lang.minus/if $value.format_price|abs </label><br /><!- /foreach->vinput type="hidden" name="spec_list" value="$key" /><!- else->vselect name="spec_$spec_key" onchange="changePrice()"><!- foreach from=$spec.valu

5、es item=value key=key->voption label="$value.label" value="$value.id">$value.label if $value.price gt 0$lang.pluselseif $value.price lt 0$lang.minus/ifif $value.price neq 0$value.format_price/ifv/option>v!- /foreach->v/select>vinput type="hidden" name=&qu

6、ot;spec_list" value="$key" />v!- /if->v!- else->v!- foreach from=$spec.values item=value key=key->vlabel for="spec_value_$value.id">vinput type="checkbox" name="spec_$spec_key" value="$value.id" id="spec_value_$value.id"

7、 onclick="changePrice()" />$value.label if $value.price gt 0$lang.pluselseif $value.price lt 0$lang.minus/if $value.format_price|abs v/label>vbr /><!- /foreach->vinput type="hidden" name="spec_list" value="$key" /><!- /if-></li>&l

8、t;!- /foreach-><!- *结束循环可选属性*->将上面这段代码替换为以下代码：<!- *开始循环所有可选属性*-><li style="border:1px solid #FBD2D2; float:left; width:315px; margin-left:5px; background:#FCFOFO; padding:10px;"><!- foreach from=$specification item=spec key=spec_key->$:<div class=&quo

9、t;catt"><!- *判断属性是复选还是单选*-><!- if $spec.attr_type eq 1-><!- if $cfg.goodsattr_style eq 1-><!- foreach from=$spec.values item=value key=key-><a if $key eq 0class="cattsel"/if onclick="changeAtt(this)" href="java scriptname="$value.id&qu

10、ot; title="$value.label">$value.label<input style="display:none" id="spec_value_$value.id" type="radio"name="spec_$spec_key"value="$value.id" if $key eq 0checked/if /></a><!- /foreach-><input type="hidden"

11、name="spec_list" value="$key" /><!- else-><select name="spec_$spec_key"><!- foreach from=$spec.values item=value key=key-><option label="$value.label"0$lang.pluselseif$value.price0$value.format_price/if</option>value="$value.

12、id">$value.labellt0$lang.minus/ififif $value.price gt$value.priceneq<!- /foreach-></select><input type="hidden" name="spec_list" value="$key" /><!- /if-><!- else-><!- foreach from=$spec.values item=value key=key-><label for

13、="spec_value_$value.id"><input type="checkbox" name="spec_$spec_key" value="$value.id"id="spec_value_$value.id"onclick="changePrice()" />$value.label if $value.price gt 0$lang.pluselseif $value.price lt 0$lang.minus/if$value.format

14、_price|abs </label><br /><!- /foreach-><input type="hidden" name="spec_list" value="$key" /><!- /if->v/div><!- /foreach-></li><!- *结束循环可选属性*->再找到下面这段代码:*接收返回的信息*/function changePriceResponse(res)if (res.err_msg .1 ength

15、 > 0)alert(res.err_msg);elsedocument.forms'ECS_FORMBUY'.elements'numbe门.value = res.qty;if (document.getElementByld('ECS_GOODS_AMOUNT') document.getElementByld('ECS_GOODS_AMOUNT').innerHTML = res.result;在上面这段代码下增加以下代码：*颜色选择器*/function changeAtt(t) t.l astChild.checked=

16、'checked'for (var i = 0; i<t.parentNode.childNodes.length;i+) if (t.parentNode.childNodesi.className = 'cattsel') t.parentNode.childNodesi.className =''t.className = "cattsel"changePrice();3、打开themes您当前模板/style.css将下面的代码增加到最后(如果您的模板调用的css文件不是style.css那么将下面的代码加到您调

17、用的那个css文件里面去)：/* 颜色选择器 CSS添加*/#goodslnfo .catt width:100%;height:auto;overflow:hidden;padding-bottom:5px;#goodslnfo .catt a border:#c8c9cd 1px solid;text-align:center;background-color:#fff;margin-right:5px;margin-top:6px;padding-left:10px;padding-right:10px;display:block;white-space:nowrap;color: #6

18、66;text-decoration: none;float:left;#goodslnfo .catt a:hover border:#ff6701 2px solid;margin: -1px;margin-right:4px;margin-top:5px;#goodslnfo .catt a:focus outline-style:none;#goodsInfo .catt .cattsel border:#ff6701 2px solid;margin: -1px;background: url(images/test.gif) no-repeat bottom right;margin-right:4px;margin-top:5px;#goodslnfo .catt .cattsel a:hover border: #ff6701 2px solid;margin:-1px;background: url(images/test.gif) no-repeat bottom right;/*