ECSHOP默认的团购列表奇丑无法，一流资源网最近利用ECSHOP制作商城网站时，将团购列表美化了下： 修改方法如下：
第一步：打开 group_buy_list.dwt 文件，使用以下代码替换此文件中的所有代码：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="Keywords" content="{$keywords}" />
- <meta name="Description" content="{$description}" />
- <!-- TemplateBeginEditable name="doctitle" -->
- <title>{$page_title}</title>
- <!-- TemplateEndEditable -->
- <!-- TemplateBeginEditable name="head" -->
- <!-- TemplateEndEditable -->
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <link rel="shortcut icon" href="favicon.ico" />
- <link rel="icon" href="animated_favicon.gif" type="image/gif" />
- <link href="{$ecs_css_path}" rel="stylesheet" type="text/css" />
- {* 包含脚本文件 *}
- {insert_scripts files='common.js'}
- <script type="text/javascript" src="js/action.js"></script>
-
- </head>
- <body>
- <!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem -->
- <div class="block1">
- <!-- #BeginLibraryItem "/library/ur_here.lbi" --><!-- #EndLibraryItem -->
- </div>
- <div class="block1 clearfix">
- <div id="pageLeft" class="fl">
- <!-- TemplateBeginEditable name="左边区域" -->
- <!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem -->
- <!-- #BeginLibraryItem "/library/promotion_info.lbi" --><!-- #EndLibraryItem -->
- <!-- #BeginLibraryItem "/library/history.lbi" --><!-- #EndLibraryItem -->
- <!-- TemplateEndEditable -->
- </div>
- <div id="pageRight" class="fr">
-
- <div class="goodsTitle">{$lang.group_buy_goods}</div>
- <div class="grouplist clearfix">
- <!-- {if $gb_list} 如果有团购活动 -->
- <!-- {foreach from=$gb_list item=group_buy} 循环团购活动开始 -->
- <div class="group_buy_listb clearfix">
- <div class="title"><a href="{$group_buy.url}" target="_blank">{$group_buy.goods_name|escape:html}</a></div>
- <div class="groupImg">
- <a href="{$group_buy.url}" target="_blank"><img src="{$group_buy.goods_thumb}" border="0" alt="{$group_buy.goods_name|escape:html}" width="250" height="250" /></a>
- </div>
- <div class="groucon">
- <div class="grouconl">
- <div class="a">{$group_buy.formated_cur_price}</div>
-
- </div>
- <div class="grouconr">
- <p class="ckxq"><a href="{$group_buy.url}" target="_blank"></a></p>
- </div>
- </div>
- </div>
- <!--{/foreach}-->
- <!-- {else} -->
- <div class="tips">{$lang.group_goods_empty}</div>
- <!-- {/if} -->
- </div>
- <!-- #BeginLibraryItem "/library/pages.lbi" --><!-- #EndLibraryItem -->
- </div>
- </div>
-
-
- <!-- #BeginLibraryItem "/library/page_footer.lbi" --><!-- #EndLibraryItem -->
- </body>
- </html>
CSS代码：
- .group_buy_listb {width:250px; float:left; margin:10px; padding:10px 20px;_padding:10px 19px; border:solid 1px #ddd}
- .group_buy_listb:hover {border:solid 1px #000}
- .group_buy_listb .title {width:250px; height:50px; line-height:20px; overflow:hidden; font-weight:bold}
- .group_buy_listb .title a {}
- .group_buy_listb .groupImg { width:250px; height:250px; overflow:hidden}
- .group_buy_listb .groupImg img {width:250px; height:250px}
- .group_buy_listb .groucon {width:250px; overflow:hidden}
- .group_buy_listb .grouconl {float:left; width:161px; height:60px; overflow:hidden}
- .group_buy_listb .grouconl .a {font-size:28px;font-weight: 700;font-family: verdana; color:#E5383A; width:161px; height:60px; line-height:60px}
- .group_buy_listb .grouconr {float:right; width:89px; height:60px; overflow:hidden}
- .group_buy_listb .grouconr .ckxq {width:89px; height:30px; background:url(./images/xqannui.jpg) no-repeat left top; margin-top:15px}
- .group_buy_listb .grouconr .ckxq a {display:block; width:89px; height:30px}
- .grouplist {padding: 12px 7px 10px 7px; background: #FFFFFF;}
素材：
另外，我这里放弃了显示阶梯价格，而是直接调用了团购当前价格，所以还必须按修改一个文件，否则无法显示价格。 ECSHOP团购列表页调用显示当前价格教程：http://www.16css.com/ecshop/653.html
AD：史上最全ECSHOP教程技巧：http://www.16css.com/ecshop/ | 
发表于 2014-2-22 17:26
| 
