[分享] 【原创教程】为网站添加新品角标和推荐角标 [复制链接]

作者：疆飞
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

[/quote]


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

开始修改

[quote]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个推荐等级，大家也可以根据需要自己添加更多的推荐角标。