您现在的位置是:首页 > cms教程 > ecshop商城教程ecshop商城教程
ecshop商品详细页仿淘宝AJAX效果的实现方法
映易2023-11-10 23:50:01ecshop商城教程已有人查阅
导读用过淘宝的朋友都知道淘宝购买商品的AJAX效果,此方法通过预先隐藏层让ECSHOP模板也能达到类似效果,有需要的朋友可以照着做修改goods.dwt页面的购买按钮如下
用过淘宝的朋友都知道淘宝购买商品的AJAX效果,此方法通过预先隐藏层让ECSHOP模板也能达到类似效果,有需要的朋友可以照着做修改goods.dwt页面的购买按钮如下
附上CSS参考
<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}
本文标签:
很赞哦! ()
上一篇:ecshop模板开发教学
相关文章
随机图文
ecshop实现不同文章分类下的文章详情页使用不同的详情页模板
ECSHOP实现不同文章分类下的文章详情页使用不同的详情页模板使用ECSHOP系统做网站时,文章系统功能比较单一ecshop关注管理设置使用说明
如客户对某款商品比较喜欢,很希望可以及时获得这款商品的信息,就可以使用关注管理功能,使用该功能后,可以及时关注该商品的变化,待到条件合适时购买。ecshop首页或列表页显示商品描述的实现方法
ecshop后台商品编辑的地方有一个录入“商品简单描述”的框框,但是录入的“商品简单描述”没有很好的在前台显示出来,而只是在商品详细页的 description 里,供搜索引擎读取。ecshop伪静态修改生成纯静态页面设置方法
伪静态已经基本上可以满足大部分人的需求,如果不满足的还可以根据前面的一篇文章对重写规则进行修改,以满足自己的需求。但是本文所要描述的是
留言与评论 (共有 条评论) |