ecshop加入购物车效果（各个页面）

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



2008 年 客户曾提成 改善 这个功能 要求用层来实现，当时实在太菜，今天我终于做了修改


下来我把我的做法贴出来 网友们做参考 有不对的地方多多指正。

1、后台网店设置 购物车确定提示选择为

2、打开js/common.js104行 就是case '1'替换之前的 if (confirm(result.message)) location.href = cart_url;为
  1. opencartDiv(result.shop_price,result.goods_name,result.goods_thumb,result.goods_brief,result.goods_id,result.goods_price,result.goods_number);
复制代码

3、复制
  1. function opencartDiv(price,name,pic,goods_brief,goods_id,total,number)
  2. {
  3. var _id = "speDiv";
  4. var m = "mask";

  6. if (docEle(_id)) document.removeChild(docEle(_id));
  7. if (docEle(m)) document.removeChild(docEle(m));
  8. //计算上卷元素值
  9. var scrollPos;
  10. if (typeof window.pageYOffset != 'undefined')
  11. {
  12. scrollPos = window.pageYOffset;
  13. }
  14. else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
  15. {
  16. scrollPos = document.documentElement.scrollTop;
  17. }
  18. else if (typeof document.body != 'undefined')
  19. {
  20. scrollPos = document.body.scrollTop;
  21. }

  23. var i = 0;
  24. var sel_obj = document.getElementsByTagName('select');
  25. while (sel_obj[i])
  26. {
  27. sel_obj[i].style.visibility = "hidden";
  28. i++;
  29. }

  31. // 新激活图层
  32. var newDiv = document.createElement("div");
  33. newDiv.id = _id;
  34. newDiv.style.position = "absolute";
  35. newDiv.style.zIndex = "10000";
  36. newDiv.style.width = "500px";
  37. newDiv.style.height = "270px";
  38. newDiv.style.top = (parseInt(scrollPos + 200)) + "px";
  39. newDiv.style.left = (parseInt(document.body.offsetWidth) - 400) / 2 + "px"; // 屏幕居中
  40. newDiv.style.background = "#fff";
  41. newDiv.style.border = "5px solid #37911C";
  42. var html = '';

  44. //生成层内内容
  45. html = '<div style="font-size:14;background:#8cc67b;width:480px;height:40px;line-height:40px;padding:0 10px;font-size:14px; "><span style="float:left; font-weight:bold">产品购买</span><a href=\'javascript:cancel_div()\' style="float:right;padding:0 26px 0 0;background:url(themes/popocai/images/ico_closebig.gif) right center no-repeat;cursor:pointer;" >关闭</a></div><div class="cartpopDiv"><div class="toptitle"><a href="goods.php?id='+goods_id+'" class="pic"><img src='+pic+' width="100" height="100"/></a><p><font style="font-weight:bold">'+name+'</font><font style="color:#ff6701">'+price+'</font><br>'+goods_brief+'</p></div>';

  47. html += '<div class="coninfo">';
  48. html +='<table cellpadding="0" height="30"><tr><td align="center" >购物车共有<font style="color:#ff6701;"><strong>'+number+'</strong></font>种商品：合计：<font style="color:#ff6701;"><strong>'+total+'</strong></font></td></tr>';
  49. html += '</table>';
  50. html +='</div>';


  53. html +="<div style='float:left;width:450px;text-align:center;padding:15px 0 0;'><a href='index.php'><img src='themes/popocai/images/goon_ico.gif'></a><a href='flow.php'><img src='themes/popocai/images/jsico.gif'></a></div>";
  54. html +='</div></div>';
  55. newDiv.innerHTML = html;
  56. document.body.appendChild(newDiv);
  57. // mask图层
  58. var newMask = document.createElement("div");
  59. newMask.id = m;
  60. newMask.style.position = "absolute";
  61. newMask.style.zIndex = "9999";
  62. newMask.style.width = document.body.scrollWidth + "px";
  63. newMask.style.height = document.body.scrollHeight + "px";
  64. newMask.style.top = "0px";
  65. newMask.style.left = "0px";
  66. newMask.style.background = "#FFF";
  67. newMask.style.filter = "alpha(opacity=30)";
  68. newMask.style.opacity = "0.40";
  69. document.body.appendChild(newMask);

  71. }
复制代码

到这个common.js里大家看了会觉的这个函数很熟悉 这就是这个文件里的 我只是拿出来修改了一下 ，当然我们可以自己重新写弹出层 比如用jquery
4、打开flow.php181行左右加入
  1. $rows = $GLOBALS['db']->getRow("select goods_brief,shop_price,goods_name,goods_thumb from ".$GLOBALS['ecs']->table('goods')." where goods_id=".$goods->goods_id);
  2. $result['shop_price'] = price_format($rows['shop_price']);
  3. $result['goods_name'] = $rows['goods_name'];
  4. $result['goods_thumb'] = $rows['goods_thumb'];
  5. $result['goods_brief'] = $rows['goods_brief'];
  6. $result['goods_id'] = $goods->goods_id;
  7. $sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' .
  8. ' FROM ' . $GLOBALS['ecs']->table('cart') .
  9. " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
  10. $rowss = $GLOBALS['db']->GetRow($sql);
  11. $result['goods_price'] = price_format($rowss['amount']);
  12. $result['goods_number'] = $rowss['number'];
复制代码
就是加入购物车成功的判断里面

5、我把我们做的样式和图片也贴出来 不是很漂亮了


  2. /* 购物车弹出效果*/
  3. .cartpopDiv{
  4. width:450px;
  5. padding:0 25px;
  6. float:left;
  7. }
  8. .toptitle{
  9. width:450px;
  10. float:left;
  11. padding:16px 0;
  12. background:url(../images/cartpop_bg.gif) left bottom repeat-x;
  13. }
  14. .toptitle a.pic{
  15. float:left;
  16. width:100px;
  17. height:100px;
  18. overflow:hidden;
  19. }
  20. .toptitle p{
  21. float:right;
  22. width:350px;
  23. font-size:14px;
  24. line-height:20px;
  25. height:58px;
  26. overflow:hidden;
  27. }
  28. .coninfo{
  29. float:left;
  30. width:450px;
  31. padding:4px 0 6px;
  32. background:url(../images/cartpop_bg.gif) left bottom repeat-x;
  33. font-size:14px;
  34. }
  35. .coninfo table{
  36. float:left;
  37. width:100%;
  38. border:none;
  39. color:#a00;
  40. }
  41. .coninfo table td.left{
  42. width:82px;
  43. text-align:right;
  44. font-weight:bold;
  45. }
  46. .coninfo table td.left span,
  47. .toptitle p a{color:#333}
  48. .coninfo table td .gray{color:#999}
  49. .coninfo table td strong{color:#f00}
  50. .coninfo table td font{font-size:18px}
复制代码


以上就是我的实现方法

回答：
好东西支持~~

齐老湿威武 齐老湿**




哈哈我现在知道你是谁了。

齐老师 不错


出现这样的



flow.php 里边的代码没有加对位置，模板不一样行数也不一样

加在这一行代码的上面

$result['confirm_type'] = !empty($_CFG['cart_confirm']) ? $_CFG['cart_confirm'] : 2;

好东西啊！谢谢分享

不错的代码！

很强大很需要

唯一不足的是，点击继续购物，转跳到网站首页了。不是停留在当前页面

不错，支持

顶一个，好看的购物车，好心的楼主



是啊，谁能帮忙改下呢。。。。。