ecshop商品页商品属性分类选择的制作教程

ecshop商品页商品属性分类选择的制作教程来源:郑州月嫂作者: 2013-02-20 09:33这两天用ecshop制作一个商城站时想把里面的商品属性值做成很多大商城常见的可选择分类那种，搜了不少没有提供这方面教程的，找到的也不能使用。

有的都是作为插件卖的，竟然没人分享出来，自己研究了下搞定了，决定在A5免费分享给每位遇到同样问题的朋友，希望能帮助到你。

修改步骤：1、将下面这个图片上传到 themes/您当前模板/images文件夹里面，这里我命名为test.gif。

如果你自己改为其他文件名，那么在下面的修改中就要保持一致。

2、找到 themes/您当前模板/goods.dwt文件，做如下修改：找到下面这段代码：<!-- {* 开始循环所有可选属性 *} --><!-- {foreach from=$specification item=spec key=spec_key} --><li class="padd loop"><strong>{$}:</strong><br /><!-- {* 判断属性是复选还是单选 *} --><!-- {if $spec.attr_type eq 1} --><!-- {if $cfg.goodsattr_style eq 1} --><!-- {foreach from=$spec.values item=value key=key} --> <label for="spec_value_{$value.id}"><input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} onclick="changePrice()" />{$bel} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br /> <!-- {/foreach} --><input type="hidden" name="spec_list" value="{$key}" /> <!-- {else} --><select name="spec_{$spec_key}" onchange="changePrice()"><!-- {foreach from=$spec.values item=value key=key} --> <option label="{$bel}" value="{$value.id}">{$bel} {if $value.price gt 0}{$lang.plus}{elseif$value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option><!-- {/foreach} --></select><input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --><!-- {else} --><!-- {foreach from=$spec.values item=value key=key} --><label for="spec_value_{$value.id}"><input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />{$bel} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br /> <!-- {/foreach} --><input type="hidden" name="spec_list" value="{$key}" /><!-- {/if} --></li><!-- {/foreach} --><!-- {* 结束循环可选属性 *} -->将上面这段代码替换为以下代码：<!-- {* 开始循环所有可选属性 *} --><li style="border:1px solid #FBD2D2; float:left; width:315px; margin-left:5px; background:#FCF0F0; padding:10px;"><!-- {foreach from=$specification item=spec key=spec_key} -->{$}：<div class="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 0}class="cattsel"{/if} onclick="changeAtt(this)" href="java ｓｃｒｉｐｔ:;" name="{$value.id}" title="{$bel}">{$bel}<input style="display:none" id="spec_value_{$value.id}" type="radio" name="spec_{$spec_key}" value="{$value.id}" {if $key eq 0}checked{/if} /></a><!-- {/foreach} --><input type="hidden" name="spec_list" value="{$key}" /><!-- {else} --><select name="spec_{$spec_key}"><!-- {foreach from=$spec.values item=value key=key} --><option label="{$bel}" value="{$value.id}">{$bel} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option><!-- {/foreach} --></select><input type="hidden" name="spec_list" value="{$key}" /><!-- {/if} --><!-- {else} --><!-- {foreach from=$spec.values item=value key=key} --><label for="spec_value_{$value.id}"><input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />{$bel} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br /><!-- {/foreach} --><input type="hidden" name="spec_list" value="{$key}" /><!-- {/if} --></div><!-- {/foreach} --></li><!-- {* 结束循环可选属性 *} -->再找到下面这段代码：/*** 接收返回的信息*/function changePriceResponse(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;}}在上面这段代码下增加以下代码：/*** 颜色选择器*/function changeAtt(t) {stChild.checked='checked';for (var i = 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/您当前模板/style.css，将下面的代码增加到最后（如果您的模板调用的css文件不是style.css，那么将下面的代码加到您调用的那个css文件里面去）：/*--------------颜色选择器CSS添加-------------*/#goodsInfo .catt {width:100%;height:auto;overflow:hidden;padding-bottom:5px;}#goodsInfo .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: #666;text-decoration: none;float:left;}#goodsInfo .catt a:hover {border:#ff6701 2px solid;margin: -1px;margin-right:4px;margin-top:5px;}#goodsInfo .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;}#goodsInfo .catt .cattsel a:hover {border: #ff6701 2px solid;margin:-1px;background: url(images/test.gif) no-repeat bottom right;}/**/好了，更新完毕!然后再说说属性的添加方法：1、在后台商品管理下的商品类型里面，先添加您的一个商品类型，比如包包，然后给这个类型添加可能出现的所有属性，比如，颜色和尺寸(需要客户购买时候选择的属性，添加的时候要选择单选属性，然后值选择从列表里面选择)，然后把所以可能用到的颜色和尺寸添加到列表里面。