电子商务网站建设

电子商务网站建设仿淘宝商品详细页加入购物车效果仿淘宝商品详细页加入购物车效果效果大家应该都知道如图：实现方法：goods.dwt页面ahref=javascript:addToCart({$goods.goods_id},0,1)imgsrc=images/bnt_cat.gif//a和默认的链接有点点区别大家对比添加要显示的层添加到这个叶面的底部divclass=cartSureid=cartSureBoxstyle=display:none;divclass=btnahref=javascript:;onclick=closeTipBox();关闭/a/divdivclass=mesgConh3宝贝已成功添加到购物车！/h3div购物车共有spanid=ECS_GOODS_NUMBER/span种商品合计：spanid=ECS_GOODS_PRICE/span/divbrinputtype=imagesrc=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)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.error0){//如果需要缺货登记，跳转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;}}}}//购物车提示框JSfunctioncloseTipBox(){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;}//购物车提示框JSfunctioncloseTipBox(){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修改如何下：!--{foreachfrom=$spec.valuesitem=valuekey=key}--a{if$keyeq0}class=cattsel{/if}onclick=changeAtt(this,{$value.id},{$goods.goods_id})href=javascript:;name={$value.id}title=[{if$value.pricegt0}{$lang.plus}{elseif$value.pricelt0}{$lang.minus}{/if}{$value.format_price|abs}]{$value.label}inputstyle=display:noneid=spec_value_{$value.id}type=radioname=spec_{$spec_key}value={$value.id}{if$keyeq0}checked{/if}//a!--{/foreach}--复制代码在显示详细信息合适的地方加fontstyle=color:#CCCCCC;（库存：fontid=shows_number{$goods.goods_number}{$goods.measure_unit}/font）/font复制代码这是动态加载库存的地方选择打钩这个样式论坛有人发过也不是很难我不在详细贴出在goods.dwt加js代码;functionchangeAtt(t,a,goods_id){t.lastChild.checked='checked';for(vari=0;it.parentNode.childNodes.length;i++){if(t.parentNode.childNodes[i].className=='cattsel'){t.parentNode.childNodes[i].className='';}}t.className=cattsel;varformBuy=document.forms['ECS_FORMBUY'];spec_arr=getSelectedAttributes(formBuy);Ajax.call('goods.php?act=get_products_info','id='+spec_arr+'&goods_id='+goods_id,shows_number,'GET','JSON');changePrice();}functionshows_number(result){if(result.product_number!=undefined){$('shows_number').innerHTML=result.product_number+