Ecshop商城商品屬性篩選插件制作方法

1、Ecshop商城商品屬性篩選插件制作方法分享這兩天用ecshop制作一個商城站時想把里面的商品屬性值做成很多大商城常見的可選擇分類那種，搜了不少沒有提供這方面教程的，找到的也不能使用。有的都是作為插件賣的，竟然沒人分享岀來，自己研究了 下搞定了，免費分享給每位遇到同樣問題的朋友，希望能幫助到你。修改步驟：1將下面這個圖片上傳到themes您當前模板/images文件夾里面，這里我命名為test.gif。如果你自己改為其他文件名，那么在下面的修改中就要保持一致。2、找到themes/您當前模板/goods.dwt文件，做如下修改：找到下面這段代碼：<!-*開始循環(huán)所有可選屬性*->&

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-><!- *結束循環(huán)可選屬性*->將上面這段代碼替換為以下代碼：<!- *開始循環(huán)所有可選屬性*-><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><!- *結束循環(huán)可選屬性*->再找到下面這段代碼:*接收返回的信息*/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;/*