电子商务网站建设

1、电子商务网站建设仿淘宝商品详细页加入购物车效果仿淘宝商品详细页加入购物车效果 效果大家应该都知道 如图： 实现方法： goods.dwt页面 <a href="javascript:addToCart($goods.goods_id,0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加 要显示的层添加到这个叶面的底部 <div class="cartSure" id="cartSureBox" style=

2、"display:none;"> <div class="btn"><a href="javascript:;" onclick="closeTipBox();">关闭</a></div> <div class="mesgCon"> <h3>宝贝已成功添加到购物车！</h3> <div>购物车共有<span id="ECS_GOODS_NUMBER"></s

3、pan>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br> <input type="image" src="images/btn_pay.gif" /> </div> </div>复制代码我把样式也贴出来 供大家参考 .cartSure position:absolute; left:0; top:545px; width:405px; height:90px; z-index:999; ba

4、ckground:url(images/cartSure_bg.gif) 0 0 no-repeat; font-size:12px; .mesgCon float:left; background:url(images/mesg.png) no-repeat 18px 9px; color:#666; line-height:21px; padding:0 0 0 100px; width:320px; .mesgCon h3 float:left; width:320px; color:#333; font-size:14px; margin:-1px 0 6px; height:auto

5、; line-height:20px; background:none; text-align:left; padding:0; font-weight:bold; .mesgCon inputfloat:left; margin:0 11px 0 0 .mesgCon divfloat:left; font-size:13px .mesgCon div spanfont-size:14px; font-weight:bold; color:#F80 .cartSure .btnfloat:left; padding:5px; width:390px .cartSure .btn a back

6、ground:url(images/close_bg.gif) no-repeat 0 0; float:right; height:13px; overflow:hidden; text-indent:-5000px; width:38px; .cartSure .btn a:hoverbackground-position:0 -12px复制代码打开js/common.js文件 修改 addToCart函数 修改后： function addToCart(goodsId, parentId,is_ajax) var goods = new Object(); var spec_arr =

7、new Array(); var fittings_arr = new Array(); var number = 1; var formBuy = document.forms'ECS_FORMBUY' var quick = 0; / 检查是否有商品规格 if (formBuy) spec_arr = getSelectedAttributes(formBuy); if (formBuy.elements'number') number = formBuy.elements'number'.value; quick = 1; goods.qu

8、ick = 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, 'PO

9、ST', 'JSON'); else Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS*tring(), addToCartResp*e, 'POST', 'JSON'); 复制代码添加几个js函数 /* * * 处理添加商品到购物车的反馈信息 */ function addToCartResp*e_ajax(result) if (result.error > 0) / 如果需要缺货登记，跳转 if (result.error

10、= 2) if (confirm(result.message) location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + duct_spec; /opendiv_booking(); / 没选规格，弹出属性选择框 else if (result.error = 6) openSpeDiv(result.message, result.goods_id, result.parent); else alert(result.mess

11、age); else var cartInfo = document.getElementById('ECS_CARTINFO'); var cart_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(r

12、esult.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 function closeTi

13、pBox() document.getElementById('cartSureBox').style.display="none" function divTipmiddle(result) openTipBox(result); var a = document.getElementById("cartSureBox"); a.style.left=(document.body.clientWidth/2-a.clientWidth/2+245)+"px" function openTipBox(result) d

14、ocument.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price; document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number; document.getElementById('cartSureBox').style.display="block" function opendiv_booking() document.getElementById(

15、9;buyTip2').style.display="block" /购物车提示框JS function closeTipBox() document.getElementById('cartSureBox').style.display="none" 复制代码打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */ $cart_goods = get_cart_goods(); /$smarty->assign('total', $cart_goods'total'); $

16、result'goods_price' = $cart_goods'total''goods_price' $result'goods_number' = $cart_goods'total''real_goods_count'复制代码根据以上操作可实现仿淘宝商品详细页实现尺码颜色关联显示库存效果如下： goods.dwt修改如何下： <!- foreach from=$spec.values item=value key=key -> <a if $key eq 0class=&

17、quot;cattsel"/if onclick="changeAtt(this,$value.id,$goods.goods_id)" href="javascript:;" name="$value.id" title="if $value.price gt 0$lang.pluselseif $value.price lt 0$lang.minus/if $value.format_price|abs">$value.label<input style="display:non

18、e" id="spec_value_$value.id" type="radio" name="spec_$spec_key" value="$value.id" if $key eq 0checked/if /></a> <!- /foreach ->复制代码 在显示详细信息合适的地方加 <font style=" color:#CCCCCC;">（库存：<font id="shows_number">$goo

19、ds.goods_number $goods.measure_unit</font>）</font>复制代码这是动态加载库存的地方 选择打钩这个样式论坛有人发过 也不是很难 我不在详细贴出在goods.dwt加js代码; function changeAtt(t,a,goods_id) t.lastChild.checked='checked' for (var i = 0; i<t.parentNode.childNodes.length;i+) if (t.parentNode.childNodesi.className = 'catt

20、sel') t.parentNode.childNodesi.className = '' t.className = "cattsel" var formBuy = 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(); function shows_number(result) if(duct_number !=undefined) $('shows_nu