把 ecshop 商品详情页进行美化修改一下,默认的 ecshop 商品详情页主图不能切换,想要看大图的话,需要进行再次点击,然后显示商品大图,对于用户的体验不太好,看来只好在当前页面进行修改了,本来有两个方案,第一个就是点击大图的话就在当前页面放大商品图,第二个就是当鼠标经过的时候切换成大图,客户最终选定了第二个方案,当鼠标经过的时候切换成大图,好吧,夏日博客就按照这个来进行修改,方法也很简单。
第一步,打开 ecshop 商品详情页模板 goods.dwt 文件,在两个 head 之间添加如下的代码:
-
<script type="text/javascript">function change_img(img_src){ document.getElementsByName("goods_img")[0].src=img_src;}</script>
第二步,查找如下代码:
-
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" />
修改为如下代码:
-
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" name="goods_img" width="250" height="250" />
第三步,打开 /library/goods_galler.lbi 文件,查找如下的代码:
-
<!-- {foreach from=$pictures item=picture}--><li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" /></a></li><!--{/foreach}-->
-
-
//改为:
-
-
<!-- {foreach from=$pictures item=picture}--><li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.img_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" /></a></li><!--{/foreach}-->
好了,一切OK,我们来对比一下第三步的这两段代码,实际上只是添加了 onmouseOver="change_img(this.src)" 这一句而已,简单吧。
(责任编辑:最模板) |