后台商品列表增加图片[TianYan 小技巧讲座06]

2016-07-07 16:47 来源：www.chinab4c.com 作者：ecshop专家

功能设置原因:
我们现在很多商家,对自己的商铺和发布的商品很不负责,商品名称简单写 "衣" "FS2000" 等,根本就不知道是什么商品.在客服人员进行商品归类的时候,都需要挨个点开商品详细信息,然后再修改商品名称.效率太低,我在商品列表中增加一个商品图片显示小功能,这样就知道商品大概是什么东西了.

修改模板 goods.index.htm 文件
<!--{foreach from=$goods_list item=goods}-->
<tr class="tatr2">
<td class="firstCell"><input type="checkbox" class="checkitem" value="{$goods.goods_id}"/></td>
<td>
<!--TianYan 嵌入商品图片缩图-->
<!--{if $goods.default_image}-->
<img src="{res file=style/images/tianyan/image.gif}">
<!--{else}-->
<img src="{res file=style/images/tianyan/noimage.gif}" >
<!--{/if}-->
<div id="StDv{$goods.goods_id}" style="position:absolute; width:200px; height:200px; z-index:1; visibility: hidden">
<table width="100%" border="0" cellspacing="1" cellpadding="1" height="100%" bgcolor="#666666" style='border:5px #ffffff solid;filter:progidXImageTransform.Microsoft.Shadow(Color=#333333,Direction=220,strength=3);'>
<tr align="right" bgcolor="#CCCCCC">
<tdheight="5" valign="top"align="right">
<img src="{res file=style/images/tianyan/closewindow.gif}" width="12" height="12"onClick="StDv{$goods.goods_id}.style.visibility='hidden'">
</td>
</tr>
<tr bgcolor="#FFFFFF" align="center">
<tdonClick="StDv{$goods.goods_id}.style.visibility='hidden'">
<!--{if $goods.default_image}-->
<img src="../{$goods.default_image}"width="200" border="0">
<!--{/if}-->
</td>
</tr>
</table>
</div>
<!--TianYan 嵌入商品图片缩图 结束-->
<span ectype="inline_edit" fieldname="goods_name" fieldid="{$goods.goods_id}" required="1" class="editable" title="{$lang.editable}">{$goods.goods_name|escape}</span></td>
<td>{$goods.store_name|escape}</td>
<td><span ectype="inline_edit" fieldname="brand" fieldid="{$goods.goods_id}" required="1" class="editable" title="{$lang.editable}">{$goods.brand|escape}</span></td>
<td>{$goods.cate_name|nl2br}</td>
<td class="table-center"><!-- {if $goods.if_show} --><img src="{res file=style/images/positive_enabled.gif}" /><!--{else}--><img src="{res file=style/images/positive_disabled.gif}" /><!-- {/if} --></td>
<td class="table-center"><!-- {if $goods.closed} --><img src="{res file=style/images/negative_enabled.gif}" ectype="inline_edit" fieldname="closed" fieldid="{$goods.goods_id}" fieldvalue="1" title="{$lang.editable}"/><!--{else}--><img src="{res file=style/images/negative_disabled.gif}" ectype="inline_edit" fieldname="closed" fieldid="{$goods.goods_id}" fieldvalue="0" title="{$lang.editable}"/><!-- {/if} --></td>
<td>{$goods.views|default:0}</td>
<td><a target="_blank" href="{$site_url}/index.php?app=goods&id={$goods.goods_id}">{$lang.view}</a></td>
</tr>
<!--{foreachelse}-->

附件内容:
ecmall 技术支持开发插件,功能定制QQ群52492705


回答：
用上了，赞一个

高手啊，顶一下

希望官方能收录,感谢楼主提供.

不错 我用着呢， 如果能实现 鼠标移到上面就能把图像显示出来，鼠标移开图片自动消失就更好了

这么好的帖子怎么沉了呢?!
楼上叶叶的建议很好啊,谁能奉献改进一下啊?!

应该容易，
理论上是将<img src="{res file=style/images/tianyan/image.gif}" onClick="StDv{$goods.goods_id}.style.visibility='visible'">
这一句改成<img src="{res file=style/images/tianyan/image.gif}" onMouseover="StDv{$goods.goods_id}.style.visibility='visible'" onMouseout="StDv{$goods.goods_id}.style.visibility='hidden'">这样就可以了，测试通过。

修改的文件utf8版



谢谢楼主和7楼的，我用着呢，不过在对商品的管理过程中，发现如果能直接显示出商品的缩略图，那就更好了，谁能奉献改进一下啊?!

不错，支持一个

原帖由 叶叶 于 2009-9-15 22:15 发表
谢谢楼主和7楼的，我用着呢，不过在对商品的管理过程中，发现如果能直接显示出商品的缩略图，那就更好了，谁能奉献改进一下啊?!


把
<img src="{res file=style/images/tianyan/image.gif}"
改成
<img src="../{$goods.default_image}" width="60" height="45"
缩图长宽自行调整


不过我发现版主这个小技巧在FireFox之下没有作用 .


经过修改可在safari4.03 ie8 chorm4 firfox3.53 下运行。

因为emall用的是jquery所以我们将
<img src="{res file=style/images/tianyan/image.gif}" onMouseover="StDv{$goods.goods_id}.style.visibility='visible'" onMouseout="StDv{$goods.goods_id}.style.visibility='hidden'">
里面的onmouseover = 改成
<img src="../{$goods.default_image}" width="60" height="45" onMouseover='$("#StDv{$goods.goods_id}").show();' onMouseout='$("#StDv{$goods.goods_id}").hide();'>
那么就把楼上的缩略图一起加进来了，然后再使用jquery的show和hide方法来完成效果。
还要将
<div id="StDv{$goods.goods_id}" style="position:absolute; width:200px; height:200px; z-index:1; visibility: hidden">
改成
<div id="StDv{$goods.goods_id}" style="position:absolute; width:200px; height:200px; z-index:1;display:none;">

下面是修改好的文件。


FireFox之下没有作用

xiexie

版主你好赞！

顶了，这么热心。现在就用上