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

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

2、lt;!- foreach from=$specification item=spec key=spec_key-><li class="padd loop"><strong>$：v/strong><br/><!- *判斷屬性是復(fù)選還是單選*-><!- 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-><!- *結(jié)束循環(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"><!- *判斷屬性是復(fù)選還是單選*-><!- 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><!- *結(jié)束循環(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您當(dāng)前模板/style.css將下面的代碼增加到最后(如果您的模板調(diào)用的css文件不是style.css那么將下面的代碼加到您調(diào)

17、用的那個(gè)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;/*