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

复制代码

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

position:

absolute;

left:

0;

top:

545px;

width:

405px;

height:

90px;

z-index:

999;

background:

url（images/cartSure_bg.gif）00no-repeat;

font-size:

12px;

}

.mesgCon{

float:

left;

background:

url（images/mesg.png）no-repeat18px9px;

color:

#666;

line-height:

21px;

padding:

000100px;

width:

320px;

}

.mesgConh3{

float:

left;

width:

320px;

color:

#333;

font-size:

14px;

margin:

-1px06px;

height:

auto;

line-height:

20px;

background:

none;

text-align:

left;

padding:

0;

font-weight:

bold;

}

.mesgConinput{float:

left;margin:

011px00}

.mesgCondiv{float:

left;font-size:

13px}

.mesgCondivspan{font-size:

14px;font-weight:

bold;color:

#F80}

.cartSure.btn{float:

left;padding:

5px;width:

390px}

.cartSure.btna{

background:

url（images/close_bg.gif）no-repeat00;

float:

right;

height:

13px;

overflow:

hidden;

text-indent:

-5000px;

width:

38px;

}

.cartSure.btna:

hover{background-position:

0-12px}

复制代码

打开js/common.js文件修改addToCart函数修改后：

functionaddToCart（goodsId,parentId,is_ajax）

{

vargoods=newObject（）;

varspec_arr=newArray（）;

varfittings_arr=newArray（）;

varnumber=1;

varformBuy=document.forms['ECS_FORMBUY'];

varquick=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函数/**

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

*/

functionaddToCartResp**e_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（）;

}

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

elseif（result.error==6）

{

openSpeDiv（result.message,result.goods_id,result.parent）;

}

else

{

alert（result.message）;

}

}

else

{

varcartInfo=document.getElementById（'ECS_CARTINFO'）;

varcart_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

functioncloseTipBox（）{

document.getElementById（'cartSureBox'）.style.display="none";

}

functiondivTipmiddle（result）{

openTipBox（result）;

vara=document.getElementById（"cartSureBox"）;

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

}

functionopenTipBox（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";

}

functionopendiv_booking（）

{

document.getElementById（'buyTip2'）.style.display="block";

}

//购物车提示框JS

functioncloseTipBox（）{

document.getElementById（'cartSureBox'）.style.display="none";

}

复制代码

打开flow.php167行左右添加/*取得商品列表，计算合计*/

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

复制代码

根据以上操作可实现效果大家应该都知道如图：

实现方法：

goods.dwt页面

addToCart（{$goods.goods_id},0,1）">和默认的链接有点点区别大家对比添加

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

none;">

;">关闭