ECSHOP商品页仿淘宝AJAX效果

修改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}

人要有梦想，有了梦想才会努力奋斗，