商品顏色尺寸美化選擇功能教程(2.7.2版本)
**** Hidden Message *****1:css控制本来要显示的radio为一小矩形.
2:当点击此小矩形时,js使此radio选中,同时改变此小矩形的外观样式.
[b]牵涉到的修改文件(default模板为例)[/b]
/themes/default/style.css
/themes/default/goods.dwt
注:此路径待修改模板路径.
[b]修改步骤:[/b]
[color=Blue][b]一:控制样式[/b][/color]
1.打开/themes/ecshop/images
加添图片test.gif.
2.打开/themes/ecshop/style.css
最下面添加:[code]/*--------------颜色选择器CSS添加-------------*/
.catt{width:100%;height:auto;overflow:hidden;padding-bottom:5px;}
.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;}[/code]3.打開/themes/ecshop/goods.dwt
注:以下修改以原版ecshop2.7.0版本default(模板名稱)為基準
未修改前第347-351行[code]<!-- {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()" />
{$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
<!-- {/foreach} -->[/code]改成[code]<div class="catt">
<!-- {foreach from=$spec.values item=value key=key} -->
<a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:;" name="{$value.id}" title="[{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}]">{$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>
<!-- {/foreach} -->
</div>[/code]此處為是了將radio換成那種小矩形樣式顯示在頁面.
二:增加js控製樣式與選中行為
在頁面內找到<script>這樣的東西,在其後面添加一個js函數[code]function changeAtt(t) {
t.lastChild.checked='checked';
for (var i = 0; i<t.parentNode.childNodes.length;i++) {
if (t.parentNode.childNodes.className == 'cattsel') {
t.parentNode.childNodes.className = '';
}
}
t.className = "cattsel";
changePrice();
}[/code]此处是为了控制 选择页面上的颜色 同时也选中了对应的隐藏input 从而来更改商品属性.如:价钱...等.
如果是用户修改过的goods.dwt可搜索:function changePrice()在其上面添加.
[color=Red]说明:[/color]
1.以上修改会将商品属性部分所有radio修改.
2.由于用户goods.dwt可能都被修改过,用户请根据自己的实际情况修改.
3:对于颜色选择功能,这是目前本论坛上最简单的实现方法.
文中所用附件 test.gif如下:
[img]http://bbs.ecshop.com/attachment.php?aid=Mjk1NTl8MTMxNzY4Zjl8MTM0Nzg1MDU5N3w3MGMxTWtXME9mYkZGU3MreWF2TTA4Umk1RnhHVXNCek5JMnd1Zm1Ed3UwOHNQQQ%3D%3D&noupdate=yes[/img]
需要二次开发的可以联系我。[email][email protected][/email] 是怎樣美化啊
來看看囉 [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]接收起來!感謝~ 好東西收起來 [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
感謝分享，不過test.gif檔案似乎不見了。 這是什麼？看看 如何做尺寸的美化 來看看 順便看可不可以改上 我來學習一下!! 是怎樣美化啊
來看看囉 感謝板大分享^^ 是怎樣美化啊
來看看囉 一直很想改
但一直失敗
來試試大大的分享
謝謝囉;d 不過test.gif檔案似乎不見了
請問一下要在那裡下載 viphf2014 不好意思我照上面修改完之後
是成功改變了，可是變的好奇怪我不管選那一個他都會被選起來，可是卻消除不掉
[url]http://www.acrodynamic.url.tw/rbaby/goods.php?id=18[/url] 在麻煩板主大大幫我看一下是什麼問題 [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
找了好久喔 感謝分享!! [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
試試看 [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
回覆了還是無法下載= = [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
................................ [b] [url=http://ecshop.tw/bbs/redirect.php?goto=findpost&pid=18431&ptid=4197]1#[/url] [i]viphf2014[/i] [/b]
是怎樣美化啊
來看看囉 感謝分享 是怎樣美化啊~~~~~~~ 有點不是很懂，可能要閱讀一下囉！
希望可以有網站範例可以看，或者是圖片輔助說明啊！
頁:
[1]