电子商务网站建设

电子商务网站建设

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

仿淘宝商品详细页参加购物车效果效果大家应该都知道如图:

购买此商品可使用：100积分

X关闭

宝贝已成功添加到购物车!

购物车共有3种商品合计：¥570.00元

去购物车结算

立刻购买［宜放入购物车

购遇量：1¥110元

实现方法：

goods,dwt页面<ahref=*javascrip::addToCart((Sgoods.goodsid),0,1)*><img

src=*images/bnt_cat.gif*/></a>和默认的链接有点点区别大家比照添加

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

<divclass="cartSure"id=，，cartSureBox，/style=z，display:none;z，>

<divclass=，,btn，/Xahref=?,javascript:onclick="closeTipBox0;关闭</aX/div>

<divclass="mcsgCon”>

<h3>宝贝已成功添加到购物车！</h3>

<div>购物车共有<spanid=z，ECS_G00DS_NLMBER，，X/span>种商品合计：<span

id="ECS_GOODS_PRICEz，X/spanX/div><br>

<inputtype="image"src=*images/btn_pay.gif/，/>

</div>

</div>

复制代码

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

.cartSure{

position:absolute;

left:0;

top:545px;

width:405px;

height:90px;

z-index:999;

background:url(imagcs/cartSurebg.gif)00no-repcat;

font-size:12px;

)

.mesgCon{

float:left;

background:url(images/mesg.png)no-repeat18px9px;

color:#666;

line-height:21px;

padding:000lOOpx;

width:320px;

)

.mesgConh3{

float:left;

width:320px;

color:#3331

font-size:14px;

margin：-lpx06px;

height:auto;

line-height:20px;

background:none;

text-align:left;

padding:0;

font-weight:bold;

)

.mesgConinput{float:left;margin:01Ipx00)

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

.mesgCondivspan{font-size:14px;font-weight:bold;color:tiF80}

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

.cartSure.btna{

background:url(images/closebg.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(goodsld,parentld,is_ajax)

(

vargoods=newObject();

varspecarr=newArray();

varfittings_arr=newArray();

varnumber=1;

varformBuy=document,forms[*ECS_FORMBUY,];

varquick=0;

//检查是否有商品规格

if(formBuy)

(

spec_arr=getSe1ectedAttributes(formBuy);

if(formBuy.elements]'number*])

{

number=formBuy.elementsnumber*].value;

)

quick=1;

)

goods,quick=quick;

goods,spec=specarr;

goods.goods_id=goodsld;

goods;,numhnr=nnmhnr;

goods,parent=(typeof(parentld)=="undefined")?0:parselnt(parentld);

if(is_ajax==1){

Ajax,cal1('flow.php?step=addto_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(resulI.message);

)

)

else

(

varcartinfo=document.getElementByld('ECSCARTINFO');

varcarturl='flow.php?step=cart,;

if(cartinfo)

cartInfo.innerllTML=result,content;

)

if(result.one_step_buy=='T)

(

location,href=cart_url;

)

else

(

switch(result,confirmtype)

(

case'1':

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

break;

case'2':

if(Iconfirm(result,message))location,href=cart_url;

break;

case'3':

divTipmiddle(result);

//refresh_cart();

document.getElementByld(*jdiv*).innerHTML=result.cj;

break;

default:

break;

)

)

)

)

〃购物车提示框JS

functioncloseTipBox(){

document.gctElcmentById(，cartSurcBox，).style.display=Anonc，/;

)

functiondivTipmiddle(resul:){

openTipBox(result);

vara=document.getElementByld(，/cartSureBox，/);

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

)

functionopenTipBox(result){

document.getElementByld(*ECS_GOODS_PRICE，).innerHTML=result.goods_price;

document.getElementByld(*ECSGOODS_NL-MBER，).innerHTML=result,goodsnumber;

document.getElementById(，CcirtSureBox*).style,display="block”;

)

functionopendiv_booking()

(

document.getElementByld(,buyTip2,).style.display="block”;

)

〃购物车提示框JS

functioncloseTipBox(){

document.getElementByld(*cartSureBox，).style.display="none";

)

复制代码

翻开flow,php167行左右添加

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

$cart_goods=get_cart_goods();

//$smarty->assigntotal,,$cart_goodstotal*]);

Sresultfgoods_price，]=$cart_goods[,totaT][*goods_price，];

$result[*goods_number']=$cart_goods[*total']['real_goods_count，];

复制代码

根据以上操作可实现

仿淘宝商品详细页实现尺码颜色关联显示库存

效果如下：

选择码数：|40/30][20

选择颜色：|红外白

购买数量：1¥130元立刻购买IW放入购物车

goods,dwt修改如何b：

<!―{foreachfrom=$spec.valuesitem=valuekey=key}—>

<a{ifSkeyeq0}class="cattsel”{/if}onclick^^changeAtt(this,{$value.id},{Sgoocs.goods_id})w

hrof=*javascript:;z，namc=〃{$valuc.id}“title=*[(ifSvaluc.pricegt0}{Slang,plus}{clseif

Svalue.priceIt0){$lang.minus}{/if}{Svalue.format_price|abs}]z，>{$vcilue.label)<input

style=z，display:none*id=z，spec_value_{$value.id)*type="radio"name=z*spec_{Sspeckey)*

value=*{$value.id}*{if$keyeq0}checked{/if}/></a>

<!-{/foreach)->

复制代码

在显示详细信息适宜的地方加

<fontstylc="color:#CCCCCC;*>(库存：<fontid=*，shows_number?z>{$goods.goodsnumber}

{$goods.measure_unit}</font>)</font>

复制代码

这是动态加教库存的地方

选择打钩这个样式论坛有人发过也不是很难我不在详细贴出

在goods.dwt加js代码；

functionchangeAtt(t,a,goods_id){

t.lastChild.chockcd=,checked';

for(vari=0;i<t.parentNode.chiIdNodes.length;i++){

if(t.parentNode.chiIdNodes4].classNamc==*cattsoT){

t.pexrentNode.chiIdNodes[i].className=''；

)

)

t.className="cattsel”;

varforinBuy=document,forms]'ECS_FORMBUY，];

spec_arr=getSelectedAttributes(formBuy);

Ajax,call(,goods.php?act=gc:_products_info,,'id='+spcc_arr+5&goods_id=,+goodsid,

shows_number,'GET','JSON');

changePrice();

)

functionshowsnumber(resul:)

if(rnsult.prndne.tniimhpr!=undnfinod)

$(tshowsnumber*).innerHTML=result,productnumber+*;

)

else