2018年04月6日网站服务器迁移完成……

ecshop开发之首页特价商品倒计时实现(图文)

ecshop 苏 demo 1902℃ 0评论

今天遇到一个关于ecshop开发的问题,根据客户的需求自己弄来修改了一下做出了ecshop开发之首页特价商品倒计时的模块,拿来和大家共享一下,希望和大家多多交流一些ecshop开发的经验。

我们先来说说实现的第一步;
上传 images和library文件夹的文件到对应的目录,首页最终的实现效果如图:

1

背景图图片大家可以自己做放到images里,本篇ecshop开发之首页特价商品倒计时模块用到的library代码我会在最后给大家写出。

我们要在 includes/lib_goods.php中,找到
$goods[$idx][‘url’] = build_uri(‘goods’, array(‘gid’ => $row[‘goods_id’]), $row[‘goods_name’]);
在这段代码的后面添加:
/* 促销时间倒计时 */
$time = gmtime();
if ($time >= $row[‘promote_start_date’] && $time <= $row[‘promote_end_date’])
{
$goods[$idx][‘gmt_end_time’]  = local_date(‘M d, Y H:i:s’,$row[‘promote_end_date’]);
}
else
{
$goods[$idx][‘gmt_end_time’] = 0;
}

在你ecshop模板的css文件中添加对应附件的css属性

设置
1,后台设置促销促销商品,这个系统默认的设置就行,
2,设置促销显示模块,如果你没有修改此文件的话就直接覆盖目录里面的libs.xml文件;代码如下:
第一行代码改为<?xml version=”1.0″ encoding=”gb2312″ ?> 因为我是用gb2312编码。其他代码复制
http://www.sscode.com/ecshopmoban/2010-08-11/723.html就可以了。

如果你的模板修改了那么就在:
<file name=”index.dwt”>
<region name=”左边区域”>
<lib>cart</lib>
后面增加:
<lib>recommend_promotion</lib>
最后的代码就是:
<file name=”index.dwt”>
<region name=”左边区域”>
<lib>cart</lib>  <lib>recommend_promotion</lib>
<lib>brands</lib>,
3.在后台模板这里设置显示位置和数量。此修改的显示在左右两边数量为两个商品,可以根据自己需要修改下css和显示的位置。
/* CSS Document */
.f4_c{color:#316103; font-weight:600; font-size:16px; text-decoration:underline;}
.f4_t{color:#328225;}
.f7{color:#b93035;}

#sales{width:204px;
}
#sales .goodBox{margin:10px 0px 10px 10px; _margin-left:5px;}
#sales .goodBox .goodList p{text-align: center; color:#3f3f3f;}
#sales .goodBox .goodList p a{color:#0e6c02; text-decoration:none;}
#sales .goodBox .goodList p a:hover{color:#ff6600; text-decoration:none;}
#sales .goodList{width:160px; margin:0px 14px 15px 14px;}
#sales .goodList img{ width:100px; height:100px;margin-bottom:6px; margin-top:5px; text-align:center; margin-left:25px;
}
#sales .goodList p{ margin-top:3px; text-align:center;}

文章的最后给出library:
<meta http-equiv=”Content-Type” content=”text/html; charset=gbk”>
<!– {if $promotion_goods} –>
<script >
var Tday = new Array();
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
var DifferHour = -1
var DifferMinute = -1                                 更多ecshop开发相关知识在http://www.ecshopdev.com
var DifferSecond = -1
function clock(key)
{
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var timevalue = “”+((hour > 12) ? hour-12:hour)                ecshop开发相关知识在http://www.ecshopdev.com
timevalue +=((minute < 10) ? “:0″:”:”)+minute
timevalue +=((second < 10) ? “:0″:”:”)+second
timevalue +=((hour >12 ) ? ” PM”:” AM”)
var convertHour = DifferHour
var convertMinute = DifferMinute
var convertSecond = DifferSecond
var Diffms = Tday[key].getTime() – time.getTime()
DifferHour = Math.floor(Diffms / daysms)
Diffms -= DifferHour * daysms
DifferMinute = Math.floor(Diffms / hoursms)
Diffms -= DifferMinute * hoursms
DifferSecond = Math.floor(Diffms / Secondms)
Diffms -= DifferSecond * Secondms
var dSecs = Math.floor(Diffms / microsecond)

if(convertHour != DifferHour) a=”<font class=f4_c><strong>”+DifferHour+”</strong></font>天”;
if(convertMinute != DifferMinute) b=”<font class=f4_c><strong>”+DifferMinute+”</strong></font>时”;
if(convertSecond != DifferSecond) c=”<font class=f4_c><strong>”+DifferSecond+”</strong></font>分”
d=”<font class=f4_c><strong>”+dSecs+”</strong></font>秒”
if (DifferHour>0) {a=a}
else {a=”}
document.getElementById(“leftTime”+key).innerHTML = a + b + c + d; //显示倒计时信息

}                             </script>
<div id=”sales” class=”f_l clearfix” style=”background:url(images/xstjbg.gif) no-repeat; width:204px; height:455px; margin-left:6px;”>
<div class=”clearfix goodBox” style=” margin-top:60px;”>
<!–{foreach from=$promotion_goods key=key item=goods name=”promotion_foreach”}–>
{if $smarty.foreach.promotion_foreach.index <= 3}
<div class=”goodList”>
<font class=”f4_t” size=”2″>剩余</font><font class=”f4_t” id=”leftTime{$key}”>{$lang.please_waiting}</font>
<a href=”http://blog.163.com/litianyichuanqi@126/blog/{$goods.url}”><img src=”http://blog.163.com/litianyichuanqi@126/blog/{$goods.thumb}” border=”0″ alt=”{$goods.name|escape:html}”/></a><br />
<p><a href=”http://blog.163.com/litianyichuanqi@126/blog/{$goods.url}” title=”{$goods.name|escape:html}”>{$goods.short_name|escape:html}</a></p>
<font class=”f1″>
<!– {if $goods.market_price neq “”} –>               ecshop开发相关知识在http://www.ecshopdev.com
<font style=”color:#727171; font-size:12px;”>市场价:{$goods.market_price}</font><b><font style=”color:#727171; font-size:12px;”></font></b>
<!– {else}–>
{$goods.market_price}
<!–{/if}–>
</font><br />
本店价:<font class=”f7″>{$goods.promote_price}</font><br>
</div>
{/if}
<script>
Tday[{$key}] = new Date(“{$goods.gmt_end_time}”);

window.setInterval(function()
{clock({$key});}, 1000);
</script>
<!–{/foreach}–>
</div>
</div>

<!– {/if} –>
ok,这就完成了ecshop开发首页特价商品倒计时,喜欢ecshop开发朋友如有好的想法也可以留言和我交流,希望ecshop开发经验积累能越来越丰富。

 

打赏

转载请注明:苏demo的别样人生 » ecshop开发之首页特价商品倒计时实现(图文)

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情