仿淘宝商品详细页加入购物车效果

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家



仿淘宝商品详细页加入购物车效果 效果大家应该都知道 如图：

实现方法：

goods.dwt页面<a href="javascript:addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加

要显示的层添加到这个叶面的底部
  1. <div class="cartSure" id="cartSureBox" style="display:none;">
  2. <div class="btn"><a href="javascript:;" onclick="closeTipBox();">关闭</a></div>
  3. <div class="mesgCon">
  4. <h3>宝贝已成功添加到购物车！</h3>
  5. <div>购物车共有<span id="ECS_GOODS_NUMBER"></span>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br>
  6. <input type="image" src="images/btn_pay.gif" />

  8. </div>
  9. </div>
复制代码


我把样式也贴出来 供大家参考
  1. .cartSure{
  2. position:absolute;
  3. left:0;
  4. top:545px;
  5. width:405px;
  6. height:90px;
  7. z-index:999;
  8. background:url(images/cartSure_bg.gif) 0 0 no-repeat;
  9. font-size:12px;
  10. }

  12. .mesgCon{
  13. float:left;
  14. background:url(images/mesg.png) no-repeat 18px 9px;
  15. color:#666;
  16. line-height:21px;
  17. padding:0 0 0 100px;
  18. width:320px;
  19. }

  21. .mesgCon h3{
  22. float:left;
  23. width:320px;
  24. color:#333;
  25. font-size:14px;
  26. margin:-1px 0 6px;
  27. height:auto;
  28. line-height:20px;
  29. background:none;
  30. text-align:left;
  31. padding:0;
  32. font-weight:bold;
  33. }

  35. .mesgCon input{float:left; margin:0 11px 0 0}

  37. .mesgCon div{float:left; font-size:13px}

  39. .mesgCon div span{font-size:14px; font-weight:bold; color:#F80}

  41. .cartSure .btn{float:left; padding:5px; width:390px}

  43. .cartSure .btn a{
  44. background:url(images/close_bg.gif) no-repeat 0 0;
  45. float:right;
  46. height:13px;
  47. overflow:hidden;
  48. text-indent:-5000px;
  49. width:38px;
  50. }

  52. .cartSure .btn a:hover{background-position:0 -12px}
复制代码


打开js/common.js文件修改 addToCart函数 修改后：
  1. function addToCart(goodsId, parentId,is_ajax)
  2. {
  3. var goods = new Object();
  4. var spec_arr = new Array();
  5. var fittings_arr = new Array();
  6. var number = 1;
  7. var formBuy = document.forms['ECS_FORMBUY'];
  8. var quick = 0;
  9. // 检查是否有商品规格
  10. if (formBuy)
  11. {
  12. spec_arr = getSelectedAttributes(formBuy);

  14. if (formBuy.elements['number'])
  15. {
  16. number = formBuy.elements['number'].value;
  17. }

  19. quick = 1;
  20. }

  22. goods.quick = quick;
  23. goods.spec = spec_arr;
  24. goods.goods_id = goodsId;
  25. goods.number = number;
  26. goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);

  28. if(is_ajax == 1){
  29. Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS**tring(), addToCartResp**e_ajax, 'POST', 'JSON');
  30. }else{
  31. Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS**tring(), addToCartResp**e, 'POST', 'JSON');
  32. }
  33. }
复制代码


添加几个js函数
  1. /* *
  2. * 处理添加商品到购物车的反馈信息
  3. */
  4. function addToCartResp**e_ajax(result)
  5. {
  6. if (result.error > 0)
  7. {
  8. // 如果需要缺货登记，跳转
  9. if (result.error == 2)
  10. {
  11. if (confirm(result.message))
  12. {
  13. location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
  14. }
  15. //opendiv_booking();

  17. }
  18. // 没选规格，弹出属性选择框
  19. else if (result.error == 6)
  20. {
  21. openSpeDiv(result.message, result.goods_id, result.parent);
  22. }
  23. else
  24. {
  25. alert(result.message);
  26. }
  27. }
  28. else
  29. {
  30. var cartInfo = document.getElementById('ECS_CARTINFO');
  31. var cart_url = 'flow.php?step=cart';
  32. if (cartInfo)
  33. {
  34. cartInfo.innerHTML = result.content;
  35. }

  37. if (result.one_step_buy == '1')
  38. {
  39. location.href = cart_url;
  40. }
  41. else
  42. {
  43. switch(result.confirm_type)
  44. {
  45. case '1' :
  46. if (confirm(result.message)) location.href = cart_url;
  47. break;
  48. case '2' :
  49. if (!confirm(result.message)) location.href = cart_url;
  50. break;
  51. case '3' :
  52. divTipmiddle(result);
  53. //refresh_cart();
  54. document.getElementById('jdiv').innerHTML = result.cj;
  55. break;
  56. default :
  57. break;
  58. }
  59. }
  60. }
  61. }
  62. //购物车提示框JS
  63. function closeTipBox(){
  64. document.getElementById('cartSureBox').style.display="none";
  65. }
  66. function divTipmiddle(result){
  67. openTipBox(result);
  68. var a = document.getElementById("cartSureBox");
  69. a.style.left=(document.body.clientWidth/2-a.clientWidth/2+245)+"px";
  70. }
  71. function openTipBox(result){
  72. document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;
  73. document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;
  74. document.getElementById('cartSureBox').style.display="block";
  75. }
  76. function opendiv_booking()
  77. {
  78. document.getElementById('buyTip2').style.display="block";

  80. }

  82. //购物车提示框JS
  83. function closeTipBox(){
  84. document.getElementById('cartSureBox').style.display="none";
  85. }
复制代码


打开flow.php 167行左右添加
  1. /* 取得商品列表，计算合计 */
  2. $cart_goods = get_cart_goods();
  3. //$smarty->assign('total', $cart_goods['total']);
  4. $result['goods_price'] = $cart_goods['total']['goods_price'];
  5. $result['goods_number'] = $cart_goods['total']['real_goods_count'];
复制代码


根据以上操作可实现

回答：
不错,顶一下

支持齐老师的共享精神，顶一个。

有点复杂~而且也不赞同预先把弹出层写好然后隐藏的写法




那是你的想法 不代表大家的观点




我并没说代表了大家

留下脚印。。来顶一顶。。。。。绝对支持共享

不知道能不能用。




这些你们自己做一下。

很不错啊