ecshop首页滚动显示最新订单插件开发思路及步骤

  众多的ecshop商家用户想在自己的商城首页中增加首页滚动显示最新订单，以便用户能及时了解到商城的热销商品。

那么我们完全可以自己去添加这样的一个功能，优易软件为大家整理如何增加首页滚动显示最新订单的思路和步骤

具体如下：

ecshop插件， ecshop订单插件

1. 在根目录修改index.php 文件：

找到这行代码：$smarty->assign('shop_notice',     $_CFG['shop_notice']);       // 商店公告

在这行代码下面加入这代码:

   $smarty->assign('order_list',   order_query());  // 
首页订单

2、在index.php 最后面加一个函数:

/**
* 调用订单滚动
*
* @access private
* @return array
*/
function order_query()
{
$sql = 'SELECT order_sn, add_time, order_status, pay_status, shipping_status FROM ' . $GLOBALS['ecs']-
 
>table('order_info') . ' ORDER BY order_id desc limit 0,20 ';/* 显示最新20条订单，可修改这个数来控制显示
 
条数 */
$row = $GLOBALS['db']->getAll($sql);
 
/* 格式话数据 */
foreach ($row AS $key => $value)
{
$row[$key]['short_order_time'] = local_date('y-m-d', $value['add_time']);
/* 订单状态 */
if ($value['order_status'] == OS_CONFIRMED || $value['order_status'] == OS_UNCONFIRMED)
{
/* 订单付款状态 */
if ($value['pay_status'] == PS_UNPAYED)
{
$row[$key]['order_status'] = '未付款';
}
if ($value['pay_status'] == PS_PAYING)
{
$row[$key]['order_status'] = '付款中';
}
if ($value['pay_status'] == PS_PAYED)
{
$row[$key]['order_status'] = '已付款';
}
/* 订单付款状态结束*/
/* 订单发货状态 */
if ($value['shipping_status'] == SS_PREPARING)
{
$row[$key]['order_status'] = '制作中';
}
if ($value['shipping_status'] == SS_SHIPPED)
{
$row[$key]['order_status'] = '已配送';
}
if ($value['shipping_status'] == SS_RECEIVED)
{
$row[$key]['order_status'] = '收货确认';
}
/* 订单发货状态结束*/
 
}
if ($value['order_status'] == OS_CANCELED)
{
$row[$key]['order_status'] = '取 消';
}
if ($value['order_status'] == OS_INVALID)
{
$row[$key]['order_status'] = '无 效';
}
if ($value['order_status'] == OS_RETURNED)
{
$row[$key]['order_status'] = '退 货';
}
/* 订单状态结束*/
}
 
return $row;
}

复制代码

3.在模版文件夹themes\xxx\library\ 把原来order_query.lbi模板内容改为以下内容（注意备份原文件）：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if empty($order_query)} -->
<script type="text/javascript">
//<![CDATA[
var invalid_order_sn = "{$lang.invalid_order_sn}"
//]]>
function gID(id)
{
return document.getElementById(id);
}
</script>
 
<div>
<div>
<div><span></span></div>
<div>
<div>
<div id="ordr_cs">
<div>订单查询</div><div title="请输入订单号查询">
<form name="ecsOrderQuery" action="javascript:;" id="ecsOrderQuery">
<input type="text" name="order_sn" size="13" /> <input type="image" onclick="orderQuery()" value="提交" 
 
src="images/search-submit2.gif" />
</form>
</div>
</div>
<!-- //这是前20条订单循环开始-->
<div id="ECS_ORDER_QUERY" title="最新20条订单浏览">
<div id="ordr_top">
<div id="dgxj">订购时间</div><div id="ddh">订单号</div><div id="zt">状 态</div> 
</div>
<div id=ordrdemo> 
<ul id=ordrdemo1>
{foreach from=$order_list item=order}
<li><a href="user.php">{$order.short_order_time}<span id="order_sn">{$order.order_sn}</span><span 
 
id="order_status">{$order.order_status}</span></a></li> 
{/foreach}
</ul>
<ul id=ordrdemo2></ul> 
</div> 
</div>
</div>
</div>
<div><span></span></div>
</div>
</div>
<script type="text/javascript">
var speed=50;
gID("ordrdemo2").innerHTML=gID("ordrdemo1").innerHTML;
function Marquee(){
if(gID("ordrdemo2").offsetTop-gID("ordrdemo").scrollTop<=0)
{
gID("ordrdemo").scrollTop-=gID("ordrdemo1").offsetHeight;
}
else
{
gID("ordrdemo").scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
gID("ordrdemo").onmouseover=function() {clearInterval(MyMar);}
gID("ordrdemo").onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>
<!-- //这是前20条订单循环结束--> 
 
<!-- {else} -->
 
<div>
<ul>
<!-- {if $order_query.user_id} -->
<li><strong>{$lang.order_number}</strong><br />
<a href="user.php?act=order_detail&order_id={$order_query.order_id}" >{$order_query.order_sn}</a>
</li>
<!-- {else} -->
<li><strong>{$lang.order_number}</strong><br />
{$order_query.order_sn}
</li>
<!-- {/if} -->
<li><strong>{$lang.order_status}</strong><br />
{$order_query.order_status}
</li>
<!-- {if $order_query.invoice_no } -->
<li><strong>{$lang.consignment}</strong><br />
{$order_query.invoice_no}
</li>
<!-- {/if} -->
<!-- {if $order_query.shipping_date} -->
<li><strong>{$lang.shipping_date}</strong><br />
{$order_query.shipping_date}
</li>
<!-- {/if} -->
</ul>
</div>
<!-- {/if} -->

复制代码

4、在style.css文件中添加以下CSS样式(注意：不要同原CSS标记有冲突，有相同自己修改标记):

/** 首页订单上向滚动**/
#ECS_ORDER_QUERY
{ position: relative; width: 100%; height: 200px; text-align:center; top: -28px; }
.order_query{ width:240px; height: 240px; }
#order_sn{ position: relative; left: 8px; }
#order_status{ position: relative; left: 16px; }
#ordr_cs{ background:url(images/hisbg1.jpg) repeat-x; clear:both; width: 200px; /*分类标题背景重复部分*/
}
#ordr_top { position: relative; width: 100%; height: 18px; border-bottom: 1px solid orange;
parent; 
}
#ordrdemo
{ position: relative; top: 5px; overflow:hidden; height:235px; float: left; }
#ordrdemo1
{ text-align: center; overflow:hidden; }
#ordrdemo1 a{ background-color: transparent; text-decoration:none; position: relative; left: 5px; float: 
 
left; cursor: pointer; }
#ordrdemo1 a:hover{ color:orange; background-color: transparent; text-decoration:none; position: 
 
relative; float: left; cursor: pointer; }
#ordrdemo1 li { font-family: Arial, Helvetica, sans-serif; height: 18px; text-align: center; width: 
 
210px; border-top: 1px dashed orange; list-style-type: none; order-right-style: solid; }
#ordrdemo2 { text-align: center; overflow:hidden; width:210px; }
#ordrdemo2 a{ background-color: transparent; text-decoration:none; position: relative; left: 5px; float: 
 
left; cursor: pointer; }
#ordrdemo2 a:hover{ color:orange; background-color: transparent; text-decoration:none; position: 
 
relative; float: left; cursor: pointer; }
#ordrdemo2 li { font-family: Arial, Helvetica, sans-serif; height: 18px; text-align: center; width: 
 
210px; border-top: 1px dashed orange; list-style-type: none; order-right-style: solid; }
.ordr_cs_2 { font:bold 13px Arial, Helvetica, sans-serif; color:#333333; position: relative; top: -34px; 
 
left: 47px; height:22px; padding:8px 0 0 35px;
/*分类标小图标和文字设置部分*/
}
.ordr_cs_arrow { font:bold 13px Arial, Helvetica, sans-serif; color:#333333; position: relative; left: -
 
6px; height:22px; padding:8px 0 0 35px;
/*分类标小图标和文字设置部分*/
}
#dgxj { position: relative; left: -3px; width: 70px; height: 15px; float: left; margin: 0; }
#ddh { position: relative; left: 0; width: 70px; height: 15px; float: left; margin: 0; }
#zt { position: relative; left: 10px; width: 70px; height: 15px; float: left; margin: 0; }
 
.module{ width:100%; margin-bottom:10px; display:block; clear:both;}
.module .top{ height:7px; background:url(images/bg_long.gif) repeat-x; font-size:1px; width: 100%; 
 
overflow:hidden; }
.module .top_R{ padding:0 12px 0 0; background:#fff url(images/borders_R.gif) repeat-y 100% 0; }
.module .top span{height:7px; width:8px; float:right; height:8px; background:url(images/module_bg1.jpg) 
 
no-repeat top right; font-size:1px;}
.module .content{ padding:0 0 0 12px; background:#fff url(images/borders_L.gif) repeat-y; }
.module .bottom{height:7px; background:url(images/bg_long.gif) repeat-x 0 -15px; display:block; 
 
overflow:hidden; font-size:1px;}
.module .bottom span{height:7px; width:8px; float:right; background:url(images/module_bg2.jpg) no-repeat 
 
top right; font-size:1px;}