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

Ecshop商城商品屬性篩選插件制作方法分享這兩天用ecshop制作一個(gè)商城站時(shí)想把里面的商品屬性值做成很多大商城常見的可選擇分類那種，搜了不少沒有提供這方面教程的，找到的也不能使用。有的都是作為插件賣的，竟然沒人分享出來，自己研究了下搞定了，免費(fèi)分享給每位遇到同樣問題的朋友，希望能幫助到你。修改步驟：1、 將下面這個(gè)圖片上傳到themes/您當(dāng)前模板/images文件夾里面，這里我命名為testgf。如果你自己改為其他文件名，那么在下面的修改中就要保持一致。A2、 找到themes/您當(dāng)前模板/goods.dwt文件，做如下修改：找到下面這段代碼：<!--{*開始循環(huán)所有可選屬性*}--><!--{foreachfrom=$specificationitem=speckey=spec_key}--><liclass="paddloop"><strong>{$}:</strong><br/><!--{*判斷屬性是復(fù)選還是單選*}--><!--{if$spec.attr_typeeq1}--><!--{if$cfg.goodsattr_styleeq1}--><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><labelfor="spec_value_{$value.id}"><inputtype="radio"name="spec_{$spec_key}"value="{$value.id}"id="spec_value_{$value.id}"{if$keyeq0}checked{/if}onclick="changePrice()"/>{$value.label}[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_pricelabs}]</label><br/><!--{/foreach}--><inputtype="hidden"name="spec_list"value="{$key}"/><!--{else}--><selectname="spec_{$spec_key}"onchange="changePrice()"><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><optionlabel="{$value.label}"value="{$value.id}">{$value.label}{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{if$value.priceneq0}{$value.format_price}{/if}</option><!--{/foreach}--></select><inputtype="hidden"name="spec_list"value="{$key}"/><!--{/if}--><!--{else}--><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><labelfor="spec_value_{$value.id}"><inputtype="checkbox"name="spec_{$spec_key}"value="{$value.id}"id="spec_value_{$value.id}"onclick="changePrice()"/>{$value.label}[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_pricelabs}]</label><br/><!--{/foreach}--><inputtype="hidden"name="spec_list"value="{$key}"/><!--{/if}--></li><!--{/foreach}--><!--{*結(jié)束循環(huán)可選屬性*}-->將上面這段代碼替換為以下代碼：<!--{*開始循環(huán)所有可選屬性*}--><listyle="border:lpxsolid#FBD2D2;float:left;width:315px;margin-left:5px;background:#FCFOFO;padding:10px;"><!--{foreachfrom=$specificationitem=speckey=spec_key}-->{$}：<divclass="catt"><!--{*判斷屬性是復(fù)選還是單選*}--><!--{if$spec.attr_typeeq1}--><!--{if$cfg.goodsattr_styleeq1}--><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><a{if$keyeq0}class="cattsel"{/if}onclick="changeAtt(this)"href="javascript:;"name="{$value.id}"title="{$value.label}">{$value.label}<inputstyle="display:none"id="spec_value_{$value.id}"type="radio"name="spec_{$spec_key}"value="{$value.id}"{if$keyeq0}checked{/if}/></a><!--{/foreach}--><inputtype="hidden"name="spec_list"value="{$key}"/><!--{else}--><selectname="spec_{$spec_key}"><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><optionlabel="{$value.label}"value="{$value.id}">{$value.label}{if$value.pricegt0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq0}{$value.format_price}{/if}</option><!--{/foreach}--></select><inputtype="hidden"name="spec_list"value="{$key}"/><!--{/if}--><!--{else}--><!--{foreachfrom=$spec.valuesitem=valuekey=key}--><labelfor="spec_value_{$value.id}"><inputtype="checkbox"name="spec_{$spec_key}"value="{$value.id}"id="spec_value_{$value.id}"onclick="changePrice()"/>{$value.label}[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]</label><br/><!--{/foreach}--><inputtype="hidden"name="spec_list"value="{$key}"/><!--{/if}--></div><!--{/foreach}--></li><!--{*結(jié)束循環(huán)可選屬性*}-->再找到下面這段代碼：/***接收返回的信息*/functionchangePriceResponse(res){if(res.err_msg.length>0){alert(res.err_msg);}else{document.forms['ECS_FORMBUY'].elements['number'].value=res.qty;if(document.getElementById('ECS_GOODS_AMOUNT'))document.getElementById('ECS_GOODS_AMOUNT').innerHTML=res.result;}}在上面這段代碼下增加以下代碼：/***顏色選擇器*/functionchangeAtt(t){t.lastChild.checked='checked';for(vari=0;i<t.parentNode.childNodes.length;i++){if(t.parentNode.childNodes[i].className=='cattsel'){t.parentNode.childNodes[i].className='';}}t.className="cattsel";changePrice();}3、打開themes您當(dāng)前模板/style.css,將下面的代碼增加到最后(如果您的模板調(diào)用的css文件不是style.css，那么將下面的代碼加到您調(diào)用的那個(gè)css文件里面去)：/* 顏色選擇器CSS添加 */#goodslnfo.catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}#goodslnfo.catta{border: #c8c9cd1pxsolid;text-align: center;background-color:#fff;margin-right:5px;margin-top:6px;padding-left: 10px;padding-right: 10px;display: block;white-space:nowrap;color:#666;text-decoration:none;float:left;}#goodslnfo.catta:hover{border:#ff67012pxsolid;margin:-lpx;margin-right:4px;margin-top:5px;}#goodslnfo.catta:focus{outline-style:none;}#goodslnfo.catt.cattsel{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;margin-right:4px;margin-top:5px;}#goodslnfo.catt.cattsela:hover{border:#ff67012pxsolid;margin:-1px;background:url(images/test.gif)no-repeatbottomright;}/**/好了，更新完畢!然后再說說屬性的添加方法：1、 在后臺商品管理下的商品類