《电子商务网站建设.docx》由会员分享，可在线阅读，更多相关《电子商务网站建设.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、电子商务网站建设仿淘宝商品详细页加入购物车效果仿淘宝商品详细页加入购物车效果 效果大家应该都知道 如图： 实现方法： goods.dwt页面 和默认的链接有点点区别 大家对比添加 要显示的层添加到这个叶面的底部 关闭 宝贝已成功添加到购物车！ 购物车共有种商品 合计： 复制代码我把样式也贴出来 供大家参考 .cartSure position:absolute; left:0; top:545px; width:405px; height:90px; z-index:999; background:url(images/cartSure_bg.gif) 0 0 no-repeat; font-
2、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; line-height:20px; background:none; text-align:left; pad
3、ding: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 background:url(images/close_bg.gif) no-repeat 0 0; float:righ
4、t; 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 = new Array(); var fittings_arr = new Array(); var number =
5、 1; var formBuy = document.formsECS_FORMBUY; var quick = 0; / 检查是否有商品规格 if (formBuy) spec_arr = getSelectedAttributes(formBuy); if (formBuy.elementsnumber) number = formBuy.elementsnumber.value; quick = 1; goods.quick = quick; goods.spec = spec_arr; goods.goods_id = goodsId; goods.number = number; g
6、oods.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函
7、数 /* * * 处理添加商品到购物车的反馈信息 */ function addToCartResp*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(); / 没选规格，弹出属性选择框 else if (result.erro
8、r = 6) openSpeDiv(result.message, result.goods_id, result.parent); else alert(result.message); 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
9、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; /购物车提示
10、框JS function closeTipBox() 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) document.getElementById(E
11、CS_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(buyTip2).style.display=block; /购物车提示框JS function closeTipBox() docum
12、ent.getElementById(cartSureBox).style.display=none; 复制代码打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */ $cart_goods = get_cart_goods(); /$smarty-assign(total, $cart_goodstotal); $resultgoods_price = $cart_goodstotalgoods_price; $resultgoods_number = $cart_goodstotalreal_goods_count;复制代码根据以上操作可实现仿淘宝商品详细页实现尺码颜色
13、关联显示库存效果如下： goods.dwt修改如何下： $value.label 复制代码 在显示详细信息合适的地方加 （库存：$goods.goods_number $goods.measure_unit）复制代码这是动态加载库存的地方 选择打钩这个样式论坛有人发过 也不是很难 我不在详细贴出在goods.dwt加js代码; function changeAtt(t,a,goods_id) t.lastChild.checked=checked; for (var i = 0; i , result = , qty = 1); $spce_id = $_GETid; $goods_id = $_GETgoods_id; $row = get_products_info($goods_id,explode(,$spce_id); /$res = array(err_msg=$goods_id,id=$spce_id); die($json-encode($row); 复制代码 通过以上操作便可实现淘宝类似功能，有关点击购物车弹出层效果 下次更新