2023年-电子商务网站建设

电子商务网站建设仿淘宝商品详细页加入购物车效果仿淘宝商品详细页加入购物车效果效果大家应该都知道如图:购买此商品可使用100积分X关闭宝贝已成功添加到败物车！购物车共有3种商品合计¥

570.00元去购物车结算购买数量1¥110元立刻购买I W放入购物车实现方法goods.dwt页面a href=javascripl:addToCart{$goods.goods_id}.

0.1imgsrc=iniagcsZbnt_cat.gif和默认的链接有点点区别大家对比添加要显示的层添加到这个叶面的底部div class=cartSurc id=cartSurcBoxstyle=display:none;div class=btna href=javascript:;onclick=closeTipBox;^ffl/a/divdiv class=mesgConh3宝贝已成功添加到购物车！/h3div购物车共有〈span id=,,ECS_GOODS_NUMBERx/span种商品合计spanid=ECS_GOODS_PRICE/spanx/divxbrinput type=image src=images/btn_pay.gif//div/div复制代码我把样式也贴出来供大家参考.cartSure{position:absolute;left:O;top:545px;width:405px;height:90px;z-index:999;background:urlimages/cartSure_bg.gif00no-repeat;font-size:12px;}.mcsgCon{float:left;background:urlimages/mesg.png no-repeat I8px9px:color:#666;line-height:2lpx;padding:O00lOOpx;width:32Opx;.mesgConh3{float:left;width:320px;color:#333;font-size:14px;margin:-Ipx06px;hcighCauto;line-height:20px;background:none;tex-align:left;padding:O;font-weight:bold;}.mesgConinput{float:left;margin:011px00}.mesgCondiv{float:left;font-size:13px}.mesgCondiv span{font-size:14px;font-wcight:bold;color:#F80}.cartSure.btn{float:left;padding:5px;widh:390px}.cartSure.btn a{hackground:urliniages/close_bg.gif no-repeat00;float:right;height:13px;overflow:hidden;tcxt-indcnt:-5000px;width:38px;.cartSure.btn a:hover{background-position:-12px}复制代码打开js/common.js文件修改addToCart函数修改后function addToCartgoodsld,parentld,is_ajax{vargoods=new Object;varspec_arr=new ArrayO;varfittings_arr=new ArrayO;varnumber=I;varformBuy=document.forms[ECS_FORMBUYl；varquick=0;//检查是否有商品规格ifformBuyspec_arr=getSelectedAttributesformBuy;ifformBuy.elementslnuinberJ{number=fonnBuy.elementslnumber].value;quick=1;goods.quick=quick;goods.spec=spec_arr;goods.goods_id=goodsld;goods.numbcr=number;goods.parent=typeof parentId==undefined0:parselntparendd;ifis_ajax==1{Ajax.callflow.phpslep=add_to_cart,,goods=+goods.toJS**tring,addToCartResp**e_ajax,POST,JSON;}else{Ajax.callflow.phpstep=add_to_cait,goods=+goods.loJS**lring,addToCartResp**e,POST,JSON*;}复制代码添加几个js函数/***处理添加商品到购物车的反馈信息*/function addToCartResp**e_ajaxresult ifresult.error0{//如果需要缺货登记，跳转ifresult.error==2{ifconfirmresult.messagelocation.href=user.phpact=add_bookingid=+result.goods_id+spec=+result.product_spec;//opendiv_booking;//没选规格，弹出属性选择框else ifresult.error==6{openSpeDivresult.message,result.goods_id.result.parent;elsealertresult.message;else{var cartinfo=document.getElementByIdECS_CARTINFO;var cart_url=flow.phpstep=cart;ifcartinfo cartlnfo.innerHTML=result.content;Iifresuk.one_step_buy==T|location.href=cart_url;}elseswitchrcsult.confirm_typc{case T:ifconfinnresult.message location.href=cart_url;break;case2:if!confirmresult.message location.href=cart_url;break;case3:divTipmiddleresult;//refresh_cart;document.getElementByIdjdiv.innerHTML=result.cj;break;default:break;}}〃购物车提示框JS functioncloseTipBox{documcnt.gctElcincntByIdcartSurcBox.stylc.display=,,nonc;Ifunction divTipmiddleresult{openTipBoxresult;vara=document.getElementByIdcartSureBox;a.style.left=document.body.clientWidth/2-a.clientWidth/2+245+px;}function openTipBoxresult{document.geElemenByIdECS_GOODS_PRICE.innerHTML=result.goods_price;docuinent.getElcmentByIdECS_GOODS_NUMBER.innerHTML=result.goods_numbcr;document.geElementByIdcartSureBox.style.display=block;}function opendiv_bookingdocumcnt.getElcincntById,buyTip

2.stylc.display=block;//购物车提示框JSfunction closeTipBox{docunient.getElementByIdcartSureBox.style.display=none;复制代码打开flow.php167行左右添加/*取得商品列表，计算合计*/$cart_goods=gct_cart_goods;//$smarty-assigntoar,$cart_goods[totar];SresultCgoodS-price]=$cart_goods[total][good s_price];$resuit[*goois_number]=$cart_goods[totar][real_goods_count];复制代码根据以上操作可实现仿淘宝商品详细页实现尺码颜色关联显示库存效果如下选择码数|40/3020立刻购买［V放入购物车购买数量1¥130元选择颜色|红玉白goods.dwt修改如何下!—{breach from=$spec.values item=value key=key}-a{if$key eq0}class=cattsel{/if}onclick=changeAttthis,{$value.id},{$goods.goods_id}href=javascript:;name={$value,id}$value.pricegt0}{$lang.plus}{elseif$value.price It0}{Slang.minus}{/if}{$value.format_price|abs}]{$value.label}input style=display:noneid=spec_valuc_{$value.id}type=radio name=spcc_{$spcc_kcy}valuc={$valuc.id}{if Skeyeq0}checked{/if}//a!—{/foreach}—复制代码在显示详细信息合适的地方加font style=color:#CCCCCC;fbnid=,shows_number!$goods.goods_number}{$goods.measure_unit}/font/font复制代码这是动态加载库存的地方选择打钩这个样式论坛有人发过也不是很难我不在详细贴出在goods.dwt加js代码；functionchangeAttt.a,goods_id{t.lastChild.checked=checked,;for vari=0;it.parentNode.childNodes.length;i++{if t.parentNode.childNodes[i].className==cattscl{t.parentNode.childNodes[i].className=It.className=cattsel;varform Buy=document.forms[ECS_FORMBUYJ;spec_arr=getSelectedAttributesfbrmBuy;Ajax.callgoods.phpact=gct_products_info\id-+spcc_arr+goods_id=+goods_id,shows_number,GET,JSON;changcPricc;function shows_numberresult{ifresult.product_number!=undefined$shows_number.innerHTML=result.product_number+ft；else{$shows_number.innerHTML=沫设冒}复制代码打开goods.php添加70行左右吧if!emply$_REQUEST[act]$_REQUEST[acl]==get.productsjnfo includeincludes/clsjson.php;$json=newJSON;//$res=arrayC^rr.msg=,result*=,qty=1;$spce_id=$_GET[idl;$goods_id=$_GETlgoods_id,];$row=get_producls_info$goods_id,explode,,$spce_id;//$res=array,err_msg=$goods_id,id-Sspce_id;die$json-encode$row;复制代码通过以上操作便可实现淘宝类似功能，有关点击购物车弹出层效果尺码XXXI:j4XLXXLXL宝贝已成功添加铛的x关闭物车！购物车共1种宝贝合计

69.00元去购物车结苴关闭宝贝页面下次更新。