2023年-電子商務(wù)網(wǎng)站建設(shè)

電子商務(wù)網(wǎng)站建設(shè)仿淘寶商品詳細頁加入購物車效果仿淘寶商品詳細頁加入購物車效果效果大家應(yīng)該都知道如圖:購買此商品可使用：100積分X關(guān)閉寶貝已成功添加到敗物車！購物車共有3種商品合計：￥570.00元去購物車結(jié)算購買數(shù)量：1 ￥110元立刻購買IW放入購物車實現(xiàn)方法：goods.dwt頁面<ahref="javascripl:addToCart({$goods.goods_id}.0.1)"><imgsrc="iniagcsZbnt_cat.gif'和默認的鏈接有點點區(qū)別大家對比添加要顯示的層添加到這個葉面的底部<divclass="cartSurc"id="cartSurcBox"style="display:none;"><divclass="btn"><ahref="javascript:;"onclick="closeTipBox();">^ffl</a></div><divclass="mesgCon"><h3>寶貝已成功添加到購物車！</h3><div>購物車共有〈spanid=,,ECS_GOODS_NUMBER"x/span>種商品合計：<spanid="ECS_GOODS_PRICE"></spanx/divxbr><inputtype="image"src="images/btn_pay.gif/></div></div>復(fù)制代碼我把樣式也貼出來供大家參考.cartSure{position:absolute;left:O;top:545px;width:405px;height:90px;z-index:999;background:url(images/cartSure_bg.gif)00no-repeat;font-size:12px;}.mcsgCon{float:left;background:url(images/mesg.png)no-repeatI8px9px: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}.mesgCondivspan{font-size:14px;font-wcight:bold;color:#F80}.cartSure.btn{float:left;padding:5px;wid(h:390px}.cartSure.btna{hackground:url(iniages/close_bg.gif)no-repeat00;float:right;height:13px;overflow:hidden;tcxt-indcnt:-5000px;width:38px;).cartSure.btna:hover{background-position:。-12px}復(fù)制代碼打開js/common.js文件修改addToCart函數(shù)修改后：functionaddToCart(goodsld,parentld,is_ajax){vargoods=newObject();varspec_arr=newArrayO;varfittings_arr=newArrayO;varnumber=I;varformBuy=document.forms['ECS_FORMBUY'l；varquick=0;//檢查是否有商品規(guī)格if(formBuy)spec_arr=getSelectedAttributes(formBuy);if(formBuy.elementsl'nuinber'J){number=fonnBuy.elementsl'number'].value;)quick=1;)goods.quick=quick;goods.spec=spec_arr;goods.goods_id=goodsld;goods.numbcr=number;goods.parent=(typeof(parentId)=="undefined")?0:parselnt(parendd);if(is_ajax==1){Ajax.call('flow.php?slep=add_to_cart,,'goods='+goods.toJS**tring(),addToCartResp**e_ajax,'POST','JSON");}else{Ajax.call('flow.php?step=add_to_cait','goods='+goods.loJS**lring(),addToCartResp**e,'POST','JSON*);)}復(fù)制代碼添加幾個js函數(shù)/***處理添加商品到購物車的反饋信息*/functionaddToCartResp**e_ajax(result)(if(result.error>0){//如果需要缺貨登記，跳轉(zhuǎn)if(result.error==2){if(confirm(result.message))(location.href='user.php?act=add_booking&id='+result.goods_id+"&spec='+duct_spec;)//opendiv_booking();)//沒選規(guī)格，彈出屬性選擇框elseif(result.error==6){openSpeDiv(result.message,result.goods_id.result.parent);elsealert(result.message);else{varcartinfo=document.getElementById('ECS_CARTINFO');varcart_url='flow.php?step=cart';if(cartinfo)(cartlnfo.innerHTML=result.content;Iif(resuk.one_step_buy==T)|location.href=cart_url;}elseswitch(rcsult.confirm_typc){caseT:if(confinn(result.message))location.href=cart_url;break;case'2':if(!confirm(result.message))location.href=cart_url;break;case3':divTipmiddle(result);//refresh_cart();document.getElementById('jdiv').innerHTML=result.cj;break;default:break;)}})〃購物車提示框JSfunctioncloseTipBox(){documcnt.gctElcincntById('cartSurcBox').stylc.display=,,nonc";IfunctiondivTipmiddle(result){openTipBox(result);vara=document.getElementById("cartSureBox");a.style.left=(document.body.clientWidth/2-a.clientWidth/2+245)+"px";}functionopenTipBox(result){document.ge(Elemen(ById('ECS_GOODS_PRICE').innerHTML=result.goods_price;docuinent.getElcmentById('ECS_GOODS_NUMBER').innerHTML=result.goods_numbcr;document.ge(ElementById('cartSureBox').style.display="block";}functionopendiv_booking()(documcnt.getElcincntById(,buyTip2').stylc.display="block";)//購物車提示框JSfunctioncloseTipBox(){docunient.getElementById('cartSureBox').style.display="none";)復(fù)制代碼打開flow.php167行左右添加/*取得商品列表，計算合計*/$cart_goods=gct_cart_goods();//$smarty->assign('to(ar,$cart_goods['totar]);SresultCgoodS-price']=$cart_goods['total'][goods_price'];$resuit[*goo<is_number']=$cart_goods['totar]['real_goods_count'];復(fù)制代碼根據(jù)以上操作可實現(xiàn)仿淘寶商品詳細頁實現(xiàn)尺碼顏色關(guān)聯(lián)顯示庫存效果如下：選擇碼數(shù)：|40/30 20選擇顏色：|紅玉白購買數(shù)量：1 購買數(shù)量：1 ￥130元立刻購買［V放入購物車goods.dwt修改如何下：<!—{(breachfrom=$spec.valuesitem=valuekey=key}-><a {if $key eq 0}class="cattsel"{/if}onclick="changeAtt(this,{$value.id},{$goods.goods_id})" href="javascript:;"name="{$value,id}" $value.pricegt0}{$lang.plus}{elseif$value.priceIt0}{Slang.minus}{/if}{$value.format_price|abs}]">{$value.label}<inputstyle="display:none"id="spec_valuc_{$value.id}"type="radio"name="spcc_{$spcc_kcy}"valuc="{$valuc.id}"{ifSkeyeq0}checked{/if}/></a><!—{/foreach}—>復(fù)制代碼在顯示詳細信息合適的地方加<fontstyle="color:#CCCCCC;">( <fbn(id=',shows_number">!$goods.goods_number}{$goods.measure_unit}</font>)</font>復(fù)制代碼這是動態(tài)加載庫存的地方選擇打鉤這個樣式論壇有人發(fā)過也不是很難我不在詳細貼出在goods.dwt加js代碼；functionchangeAtt(t.a,goods_id){t.lastChild.checked='checked,;for(vari=0;i<t.parentNode.childNodes.length;i++){if(t.parentNode.childNodes[i].className=='cattscl"){t.parentNode.childNodes[i].className=I)t.className="cattsel";varformBuy=document.forms['ECS_FORMBUY'J;spec_arr=getSelectedAttributes(fbrmBuy);Ajax.call('goods.php?act=gct_products_info\'id-+spcc_arr+'&goods_id='+goods_id,shows_number,'GET','JSON');changcPricc();)functionshows_number(result){if(duct_number!=undefined)($('shows_number').innerHTML=duct_number+'ft'；)else{$('shows_number').innerHTML=沫設(shè)冒})復(fù)制代碼打開goods.php添加70行左右吧if(!emply($_REQUEST['act'])&&$_REQUEST['acl']=='ductsjnfo')(include('includes/clsjson.php');$json=newJSON;//$res=arrayC^rr.msg'=>",'result*=>",'qty'