ecshop产品增加颜色、尺码

admin · 发表于 2015-3-5 15:23:41

在模板的goods.dws文件中找到如下代码

<li class="padd loop">
<strong>{$spec.name}:</strong><br />
<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()" />
{$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
<input type="hidden" name="spec_list" value="{$key}" />
<select name="spec_{$spec_key}" onchange="changePrice()">
<option label="{$value.label}" value="{$value.id}">{$value.label} {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>
</select>
<input type="hidden" name="spec_list" value="{$key}" />
<label for="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.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
<input type="hidden" name="spec_list" value="{$key}" />
</li>

复制代码

把上述代码替换成如下代码

<li class="padd">
<div class="catt"><strong class="catb">{$spec.name}:</strong>
<a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:;" name="{$value.id}">{$value.label}<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>
</div>
<input type="hidden" name="spec_list" value="{$key}" />
<div class="blank10"></div>
<label for="spec_value_{$value.id}">
<input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
{$value.label}</label>
<input type="hidden" name="spec_list" value="{$key}" />
</li>

复制代码

在该模板文件head部分，增加如下css代码

<style type="text/css">
/*--------------颜色选择器CSS添加-------------*/
.catt .catb {
height:auto;
overflow:hidden;
line-height:30px;
float:left;
}
.catt {
width:100%;
height:auto;
overflow:hidden;
padding-bottom:5px;
text-decoration:none;
}
.catt a {
border:#c8c9cd 1px solid;
text-align:center;
background-color:#fff;
margin-left:5px;
margin-top:6px;
padding-left:10px;
padding-right:10px;
display:block;
white-space:nowrap;
color:#000;
text-decoration:none;
float:left;
}
.catt a:hover {
border:#ff6701 2px solid;
margin:-1px;
margin-left:4px;
margin-top:5px;
}
.catt a:focus {
outline-style:none;
}
.catt .cattsel {
border:#ff6701 2px solid;
margin:-1px;
background:url("images/test.gif") no-repeat bottom right;
margin-left:4px;
margin-top:5px;
}
.catt .cattsel a:hover {
border:#ff6701 2px solid;
margin:-1px;
background:url("images/test.gif") no-repeat bottom right;
}
</style>

复制代码

在head区域中的script脚本部分增加如下js代码

function changeAtt(t) {
t.lastChild.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();
}

复制代码

最后把下图另存为test.gif文件，上传到网站根目录的images文件夹下即可

		自动登录	找回密码
密码			立即加入

[其它CMS] ecshop产品增加颜色、尺码

本帖子中包含更多资源

相关帖子