杭州神话信息技术有限公司

标题: 【原创教程】为网站添加新品角标和推荐角标 [打印本页]
作者: 疆飞    时间: 2012-12-23 13:35:40     标题: 【原创教程】为网站添加新品角标和推荐角标

本帖最后由 疆飞 于 2012-12-23 21:09 编辑

本教程主要针对天天团购的首页产品列表添加一个新品和推荐角标功能！

作者：疆飞
QQ:932557101
blog：http://www.jiangfei.net
演示站点：http://www.jt001.cn
说明：新品角标根据发布时间自动判断，大家可以根据自己的喜好设置发布几天内显示为新品，推荐角标需要使用产品设置中产品详情内的 “我们说：官方自己的说法” 功能来修改，就是说，设置了角标后不能在使用“我们说：官方自己的说法” 功能。此功能不影响网站的运营和使用。大家可以根据实际情况来选择是否需要使用本功能。
本教程需要修改的文件：
/templates/html/igos/meituan/index.htm
/templates/default/styles/main.css
/templates/default/detail.html
/templates/admin/product_mgr.html
添加文件
在 /templates/default/styles/ 添加
.............../img/newtuan.png
.............../img/tuanhot1.png
.............../img/tuanhot2.png
.............../img/tuanhot3.png

效果演示：

[attach]4340[/attach]

[attach]4341[/attach]



(代码修改有风险，请谨慎操作，操作前请务必备份文件。)
开始修改


1、找到 /templates/html/igos/meituan/目录下的 index.htm文件。
2、打开并编辑 index.htm 文件
3、找到代码：
  1. <div class="t_area_out item m_item" >
复制代码


4、在 <div class="t_area_out item m_item" > 的下一行添加代码：
  1. <!--产品角标-->
  2. <!--新品角标-->{if $item['overtime']-$item['begintime']-$item['time_remain'] < 432000 }<div class="newtuan"></div>{/if}
  3. <!--推荐角标-->{if $item['wesay']}<div class="tuanhot$item['wesay']"></div>{/if}
  4. <!--产品角标结束-->
复制代码
5、将代码 <div class="t_area_out item m_item" > 替换为
  1. <div class="t_area_out item m_item" style="position:relative">
复制代码


6、找到/templates/default/styles/目录下的 main.css 文件。
7、打开并编辑 main.css 文件，在最下面一行添加下面的代码：
  1. .newtuan{ position:absolute; left:-5px; top:-5px; height:73px; width:73px;background:url(img/newtuan.png) 0 0; z-index:999}
  2. .tuanhot1{ position:absolute; left:-5px; top:-5px; height:73px; width:73px; background:url(img/tuanhot1.png) 0 0; z-index:999}
  3. .tuanhot2{ position:absolute;  left:-5px; top:-5px; height:73px; width:73px; background:url(img/tuanhot2.png) 0 0; z-index:999}
  4. .tuanhot3{ position:absolute;  left:-5px; top:-5px; height:73px; width:73px;  background:url(img/tuanhot3.png) 0 0; z-index:999}
复制代码
8、将附件中的img.rar 下载后解压，然后将img上传至 /templates/default/styles/ 目录内。
9、找到/templates/default目录中detail.html的文件。
10、打开并编辑 detail.html文件 找到下面的代码并删除它。
  1. {if $product['wesay']}
  2. <h4>我们说</h4>
  3. <div class="t_detail_txt"{if meta('p_hs_'.$product['id'])} style="width:670px; "{/if}>
  4. <p ><span style="font-size:14px;"><span style="font-family: 宋体;">{$product['wesay']}</span></span></p>
  5. </div>
  6. {/if}
复制代码
11、找到/templates/admin/目录内的 product_mgr.html文件
12、打开并编辑product_mgr.html文件，找到下面的代码并删除它。
  1. <tr> <td width="100" class="td_title">我们说：<br/>官方自己的说法<br/><font color="#999">*留空前台不显示</font></td> <td> <textarea name="wesay" class="editor" style="width:600px;">{$p['wesay']}</textarea> </td> </tr>
复制代码
13、找到代码：
  1. <td width="100" class="td_title">显示优先级：</td> <td> <input name="order" type="text" size="3" value="{echo (int)$p['order']}" />  （数字越大，显示位置越靠前，用于同时团购多个产品的时候）
  2. </td> </tr>
复制代码
在他的后台面添加代码：
  1. <td width="100" class="td_title">推荐等级：<br/></td><td><font color="#999">输入推荐编号，留空为不推荐（1 为推荐、2 为抽奖、3 为秒杀）</font><br/><textarea name="wesay" style="width:600px;">{$p['wesay']}</textarea></td></tr>
复制代码
14、登录后台更新缓存，修改完成！

使用方法
新品天数判断的设置方法。默认我设置为5天内显示为新品，大家可以根据自己的需要修改。修改方法如下：
首先我们看下新品角标代码：<!--新品角标-->{if $item['overtime']-$item['begintime']-$item['time_remain'] < 432000 }<div class="newtuan"></div>{/if}
其中432000就是5天的秒数。而1天是86400秒，如果你想让新发布的团购在3天内显示为新品，而超过3天不显示，那就修改432000 为 259200，如何得出的 259200？ 用3乘以86400即可。

推荐角标设置。在产品设置中或发布产品时可以在基本信息的最下方看到 推荐等级设置，我们可以在后面填写1或2或3，我只内置了3个推荐等级，大家也可以根据需要自己添加更多的推荐角标。

教程结束！


懒人包：将templates 文件夹直接上传至你的团购网站根目录，覆盖即可。懒人包仅针对天天团购默认模版，如果你修改或订制过模版，不建议覆盖懒人包。如果你是默认模版，直接覆盖懒人包即可！
[attach]4338[/attach]

[attach]4339[/attach]
  1. <td width="100" class="td_title">显示优先级：</td> <td> <input name="order" type="text" size="3" value="{echo (int)$p['order']}" />  （数字越大，显示位置越靠前，用于同时团购多个产品的时候）
  2. </td> </tr>
复制代码

作者: 疆飞    时间: 2012-12-23 13:36:05

沙发
作者: 子荆    时间: 2012-12-23 13:41:02

呵呵搜藏了
作者: suliman    时间: 2012-12-23 19:52:56

顶 2群的兄弟。
作者: 许诺一生    时间: 2012-12-26 10:35:54

不错不错!!用起来真不错 !给顶了
作者: ★fager/aiq    时间: 2013-1-1 15:22:04

不错的教程！
作者: mjbg    时间: 2013-1-20 18:25:59

都是有才的哥



欢迎光临 杭州神话信息技术有限公司 (http://www.cenwor.com/) Powered by Discuz! X2