ecshop仿淘宝商品详细页加入购物车效果

仿淘宝商品详细页加入购物车效果 效果大家应该都知道 如图：[attach]40857[/attach]

     实现方法：

     goods.dwt页面 <a href="javascript:addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加

     要显示的层添加到这个叶面的底部

 要显示的层添加到这个叶面的底部

<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>

我把样式也贴出来 供大家参考

.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:right;

height:13px;

overflow:hidden;

text-indent:-5000px;

width:38px;

}

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

打开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.toJSONString(), addToCartResponse_ajax, 'POST', 'JSON');

}else{

Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJSONString(), addToCartResponse, 'POST', 'JSON');

}

}

添加几个js函数

/* *

* 处理添加商品到购物车的反馈信息

*/

function addToCartResponse_ajax(result)

{

if (result.error > 0)

{

// 如果需要缺货登记，跳转

if (result.error == 2)

{

// if (confirm(result.message))

// {

// location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;

// }

opendiv_booking();

}

// 没选规格，弹出属性选择框

else if (result.error == 6)

{

openSpeDiv(result.message, result.goods_id, result.parent);

}

else

{

alert(result.message);

}

}

else

{

var cartInfo = document.getElementById('ECS_CARTINFO');

var cart_url = 'flow.php?step=cart';

if (cartInfo)

{

cartInfo.innerHTML = result.content;

}

if (result.one_step_buy == '1')

{

location.href = cart_url;

}

else

{

switch(result.confirm_type)

{

case '1' :

if (confirm(result.message)) location.href = cart_url;

break;

case '2' :

if (!confirm(result.message)) location.href = cart_url;

break;

case '3' :

divTipmiddle(result);

//refresh_cart();

document.getElementById('jdiv').innerHTML = result.cj;

break;

default :

break;

}

}

}

}

//购物车提示框JS

function closeTipBox(){

document.getElementById('cartSureBox').style.display="none";

}

function divTipmiddle(result){

openTipBox(result);

var a = document.getElementById("cartSureBox");

a.style.left=(document.body.clientWidth/2-a.clientWidth/2+245)+"px";

}

function openTipBox(result){

document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;

document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;

document.getElementById('cartSureBox').style.display="block";

}

function opendiv_booking()

{

document.getElementById('buyTip2').style.display="block";

}

//购物车提示框JS

function closeTipBox(){

document.getElementById('cartSureBox').style.display="none";

}

打开flow.php 167行左右添加

/* 取得商品列表，计算合计 */

$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'];