ECSHOP商品详情页颜色、尺码选择仿淘宝效果

当前位置：首页 >ECSHOP

ECSHOP商品详情页颜色、尺码选择仿淘宝效果

ECSHOP 2016-2-3 阅读量: 775 TAG: 标签：ecshop

ECSHOP商品详情页颜色、尺码选择仿淘宝效果
11113624-f4ebb601c87c4ce98e61108b438de3c8[1]
修改方法：
在网站模板目录下打开 goods.dws 查找如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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>

修改为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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>

再在网站模板CSS里添加如下CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/*--------------颜色选择器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;
}

再把如下图片另存为 test.gif 放入网站模板图片文件夹里

最后，在页面内找到

这样的东西,在其后面添加一个js函数

1
2
3
4
5
6
7
8
9
10

浅唱6（微信/QQ号：909912499），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！

浅唱6

热门文章