ECSHOP商品详细页仿淘宝AJAX效果

ECSHOP教程 来源: ECSHOP教程网www.ecshop119.com 时间:2012-02-09 ECSHOP教程分类:其他ECSHOP教程


用过淘宝的朋友都知道淘宝购买商品的AJAX效果(如图),此方法通过预先隐藏层让ECSHOP模板也能达到类似效果,有需要的朋友可以照着做

 

修改goods.dwt页面的购买按钮如下
<a href=“javascript:addToCart({$goods.goods_id},0,1)”><img src=“images/bnt_cat.gif” /></a>

然后把显示的层添加到这个ECSHOP商品页(goods.dwt)的底部
<div class=“cartSure” id=“cartSureBox” style=“display:none;”>
<div class=“btn”><a href=“javascript:;” onclick=“closeTipBox();”>关闭</a></div>
<div class=“mesgCon”>
<h3>宝贝已成功添加到购物车!</h3>
<div>购物车共有<span id=“ECS_GOODS_NUMBER”></span>种商品 合计:<span id=“ECS_GOODS_PRICE”></span></div><br>
<input type=“image” src=“images/btn_pay.gif” />

</div>
</div>

然后打开js/common.js文件,修改 addToCart函数为
function addToCart(goodsId, parentId,is_ajax)
{
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy)
{
spec_arr = getSelectedAttributes(formBuy);

if (formBuy.elements['number'])
{
number = formBuy.elements['number'].value;
}

quick = 1;
}

goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == “undefined”) ? 0 : parseInt(parentId);

if(is_ajax == 1){
Ajax.call(‘flow.php?step=add_to_cart’, ’goods=’ + goods.toJS**tring(), addToCartResp**e_ajax, ’POST’, ’JSON’);
}else{
Ajax.call(‘flow.php?step=add_to_cart’, ’goods=’ + goods.toJS**tring(), addToCartResp**e, ’POST’, ’JSON’);
}
}

添加几个js函数
function addToCart(goodsId, parentId,is_ajax)
{
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy)
{
spec_arr = getSelectedAttributes(formBuy);

if (formBuy.elements['number'])
{
number = formBuy.elements['number'].value;
}

quick = 1;
}

goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == “undefined”) ? 0 : parseInt(parentId);

if(is_ajax == 1){
Ajax.call(‘flow.php?step=add_to_cart’, ’goods=’ + goods.toJS**tring(), addToCartResp**e_ajax, ’POST’, ’JSON’);
}else{
Ajax.call(‘flow.php?step=add_to_cart’, ’goods=’ + goods.toJS**tring(), addToCartResp**e, ’POST’, ’JSON’);
}
}

然后打开flow.php找到如下代码
$result['confirm_type'] = !emptyempty($_CFG['cart_confirm']) ?

在其上面添加
/* 取得商品列表,计算合计 */
$cart_goods = get_cart_goods();
//$smarty->assign(‘total’, $cart_goods['total']);
$result['goods_price'] = $cart_goods['total']['goods_price'];
$result['goods_number'] = $cart_goods['total']['real_goods_count'];

这样就能实现,剩下的就是图片和CSS方面的东西,可以自己天马行空了
附上CSS参考

 

 

.cartSure{  

position:absolute;  

left:0;  

top:545px;  

width:405px;  

height:90px;  

z-index:999;  

background:url(images/cartSure_bg.gif) 0 0 no-repeat;  

font-size:12px;  

}  

 

.mesgCon{  

float:left;  

background:url(images/mesg.png) no-repeat 18px 9px;  

color:#666;  

line-height:21px;  

padding:0 0 0 100px;  

width:320px;  

}  

 

.mesgCon h3{  

float:left;  

width:320px;  

color:#333;  

font-size:14px;  

margin:-1px 0 6px;  

height:auto;  

line-height:20px;  

background:none;  

text-align:left;  

padding:0;  

font-weight:bold;  

}  

 

.mesgCon input{float:left; margin:0 11px 0 0}  

 

.mesgCon div{float:left; font-size:13px}  

 

.mesgCon div span{font-size:14px; font-weight:bold; color:#F80}  

 

.cartSure .btn{float:left; padding:5px; width:390px}  

 

.cartSure .btn a{  

background:url(images/close_bg.gif) no-repeat 0 0;  

float:rightright;  

height:13px;  

overflow:hidden;  

text-indent:-5000px;  

width:38px;  

}  

 

.cartSure .btn a:hover{background-position:0 -12px} 
 

本文模板屋原创地址: https://www.ecshop119.com/ecshopjc-354.html
模板屋版权所有 © 转载时必须以链接形式注明出处!

ECSHOP模板屋
ecshop开发团队 ecshop开发中心 ecshop模板制作 ecshop模板屋
ECSHOP
ecshop下载 ecshop安装教程 ecshop在线演示 ecshop后台测试
ECSHOP二次开发手册
ecshop教程 ecshop二次开发 ecshop模板教程 ecshop微信配置
ECSHOP商城网站建设
ecshop空间域名 ecshop商城建设 ecshop模板修改 ecshop开发定制
服务支持:7X24小时 151 059 55077
ECShop二次开发
ecshop搭建
qqtelcodeback_top
温馨提示

确定取消
温馨提示

关闭