有图为证：一步一步教你实现购物车中加入详情,最常用的购物车增强功能

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



今天给一朋友解决一个问题，需要在商城每个页面中的购物车处都显示购物车详情！其实，这个功能很简单，现在很多商城都在用（PS：虽然我的成都零食网现在还没有使用这个功能，并且以后暂时也没有打算使用这个功能，今天还是把这个写出来分享给大家。）。要实现并不是难事，就是在订单模板中加几个关于订单详情的显示嘛。如果需要在这里面加入删除或更新也只需要结合JS进行调用就行了。现在将我实现这个功能的方法公布如下：
老规矩,先上图。有图为证：

给商城里加入购物车详情后的效果图



可以从图中看出，我主要是添加了购物车详单和删除操作。其它都是一样的。以下是具体实现方法和简单原理：
要实现，首先要知道这一块是怎么出来的，做过ECSHOP二次开发的朋友对这个肯定不陌生了，模板文件在模板文件夹中的库文件夹的cart_info.lbi（找不到的同志可以搜索一下），原来这个模板里的东西很简单，就是添显示了“购物车里有X个商品，去结算”这类的信息。今天，我们要将其全部显示。
其次，我们要显示详情，肯定需要将这个详情使用弹出的方式来显示，不能直接显示，直接显示谁都会，那样有打开订单结算页有什么区别呢？占有太多地方了，这里就要用到css和js的一些基础知识了。
我的代码和注释如下：
  1. <!-- {if $goods} -->
  2. <ul class="car_ul">
  3. <img src="../images/dang.gif" style="position:relative; top:-8px; left:-6px; float:left"/>
  4. {foreach from=$goods item=goods name=goods}
  5. <li>
  6. <div class="f_l">
  7. <div style="float:left">
  8. <a href="{$goods.url}"><img src="{$goods.goods_thumb}" style="width:50px; height:50px;" alt="{$goods.goods_name}"></a>
  9. </div>
  10. <a class="name" href="{$goods.url}">{$goods.short_name}</a>
  11. </div>
  12. <div class="f_r">
  13. <b>{$goods.goods_price}×{$goods.goods_number}</b> <br />
  14. <a class="del" href="javascript:" onClick="deleteCartGoods({$goods.rec_id})">[删除]</a>
  15. </div>
  16. </li>
  17. {/foreach}
  18. <ul>
  19. <p class="car_info">
  20. 共 <b>{$goods_number}</b> 件商品，金额总计：{$order_amount}<b></b>
  21. </p>
  22. <p class="car_info">
  23. <a href="flow.php"><img src="images/qujiesuan.gif" alt="去结算" /></a>
  24. </p>
  25. <!-- {else} -->
  26. <ul class="car_ul">
  27. <a href="#" style="color:#999; padding-left:30px;">您的购物车暂无商品 赶快选择心爱的鞋子吧</a>
  28. <ul>
  29. <!-- {/if} -->
复制代码


以上代码仅供参考。如需要使用，需要结合以下CSS代码，请同步复制到相应目录文件或嵌入相关文件中
  1. .car_ul {
  2. background: none repeat scroll 0 0 #FFFFFF;
  3. border: 1px solid #F5859D;
  4. display: none;
  5. float: left;
  6. margin-top: 4px;
  7. padding: 5px;
  8. position: absolute;
  9. right: -1px;
  10. top: 20px;
  11. width: 270px;
  12. }
  13. .car_ul li {
  14. padding: 3px 0;
  15. }
  16. .car_ul li {
  17. line-height: 22px;
  18. width: 270px;
  19. }
  20. .car_ul .f_l {
  21. float: left;
  22. width: 177px;
  23. }
  24. .car_ul .f_r {
  25. float: right;
  26. padding-top: 2px;
  27. text-align: right;
  28. width: 90px;
  29. }
  30. car_ul .name {
  31. float: left;
  32. height: 46px;
  33. line-height: 23px;
  34. overflow: hidden;
  35. padding: 2px 0 0 5px;
  36. width: 117px;
  37. }
  38. .car_ul .f_r b {
  39. color: #FF0000;
  40. }
  41. .car_ul .f_r .del {
  42. color: #999999;
  43. }
复制代码

当然。这里默认这个详单是display:none的。需要您通过js进行调用将期display:block。
接下来，就是要改程序了：
打开/include/lib_insert.php找到function insert_cart_info()。将其改成以下内容
  1. function insert_cart_info()
  2. {
  3. $sql = 'SELECT c.*,g.goods_name,g.goods_thumb,g.goods_id,c.goods_number,c.goods_price' .
  4. ' FROM ' . $GLOBALS['ecs']->table('cart') ." AS c ".
  5. " LEFT JOIN ".$GLOBALS['ecs']->table('goods')." AS g ON g.goods_id=c.goods_id ".
  6. " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
  7. $row = $GLOBALS['db']->GetAll($sql);
  8. $arr = array();
  9. foreach($row AS $k=>$v)
  10. {
  11. $arr[$k]['goods_thumb']=get_image_path($v['goods_id'], $v['goods_thumb'], true);
  12. $arr[$k]['short_name']= $GLOBALS['_CFG']['goods_name_length'] > 0 ?
  13. sub_str($v['goods_name'], $GLOBALS['_CFG']['goods_name_length']) : $v['goods_name'];
  14. $arr[$k]['url'] = build_uri('goods', array('gid' => $v['goods_id']), $v['goods_name']);
  15. $arr[$k]['goods_number'] = $v['goods_number'];
  16. $arr[$k]['goods_name']= $v['goods_name'];
  17. $arr[$k]['goods_price']= price_format($v['goods_price']);
  18. $arr[$k]['rec_id'] = $v['rec_id'];
  19. }
  20. $sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' .
  21. ' FROM ' . $GLOBALS['ecs']->table('cart') .
  22. " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
  23. $row = $GLOBALS['db']->GetRow($sql);

  25. if ($row)
  26. {
  27. $number = intval($row['number']);
  28. $amount = floatval($row['amount']);
  29. }
  30. else
  31. {
  32. $number = 0;
  33. $amount = 0;
  34. }

  36. $GLOBALS['smarty']->assign('str',sprintf($GLOBALS['_LANG']['cart_info'], $number, price_format($amount, false)));
  37. $GLOBALS['smarty']->assign('goods',$arr);
  38. $GLOBALS['smarty']->assign('goods_number',$number);
  39. $GLOBALS['smarty']->assign('order_amount',$amount);
  40. $output = $GLOBALS['smarty']->fetch('library/cart_info.lbi');
  41. return $output;
  42. }
复制代码


这样，就大功告成了！！购物车详细内容会显示了。但关键的是购物车中的删除。这个就要我们重新写入相应程序了才行。
我们在网站根目录建一个文件为delete_cart_goods.php。它的作用，来专门负责购物车进行更新的那么一个程序（其实只用于删除购物车的订单）
  1. <?php
  2. define('IN_ECS', true);
  3. require(dirname(__FILE__) . '/includes/init.php');
  4. include_once('includes/cls_json.php');
  5. $result = array('error' => 0, 'message' => '', 'content' => '', 'goods_id' => '');
  6. $json= new JSON;
  7. if($_POST['id'])
  8. {
  9. $sql = 'DELETE FROM '.$GLOBALS['ecs']->table('cart')." WHERE rec_id=".$_POST['id'];
  10. $GLOBALS['db']->query($sql);
  11. }
  12. $sql = 'SELECT c.*,g.goods_name,g.goods_thumb,g.goods_id,c.goods_number,c.goods_price' .
  13. ' FROM ' . $GLOBALS['ecs']->table('cart') ." AS c ".
  14. " LEFT JOIN ".$GLOBALS['ecs']->table('goods')." AS g ON g.goods_id=c.goods_id ".
  15. " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
  16. $row = $GLOBALS['db']->GetAll($sql);
  17. $arr = array();
  18. foreach($row AS $k=>$v)
  19. {
  20. $arr[$k]['goods_thumb']=get_image_path($v['goods_id'], $v['goods_thumb'], true);
  21. $arr[$k]['short_name']= $GLOBALS['_CFG']['goods_name_length'] > 0 ?
  22. sub_str($v['goods_name'], $GLOBALS['_CFG']['goods_name_length']) : $v['goods_name'];
  23. $arr[$k]['url'] = build_uri('goods', array('gid' => $v['goods_id']), $v['goods_name']);
  24. $arr[$k]['goods_number'] = $v['goods_number'];
  25. $arr[$k]['goods_name']= $v['goods_name'];
  26. $arr[$k]['goods_price']= price_format($v['goods_price']);
  27. $arr[$k]['rec_id'] = $v['rec_id'];
  28. }
  29. $sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' .
  30. ' FROM ' . $GLOBALS['ecs']->table('cart') .
  31. " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'";
  32. $row = $GLOBALS['db']->GetRow($sql);

  34. if ($row)
  35. {
  36. $number = intval($row['number']);
  37. $amount = floatval($row['amount']);
  38. }
  39. else
  40. {
  41. $number = 0;
  42. $amount = 0;
  43. }
  44. $GLOBALS['smarty']->assign('str',sprintf($GLOBALS['_LANG']['cart_info'], $number, price_format($amount, false)));
  45. $GLOBALS['smarty']->assign('goods',$arr);
  46. $GLOBALS['smarty']->assign('goods_number',$number);
  47. $GLOBALS['smarty']->assign('order_amount',$amount);
  48. $result['content'] = $GLOBALS['smarty']->fetch('library/cart_info.lbi');
  49. die($json->encode($result));
  50. ?>
复制代码


代码如上了，但细心的人看，这其实和lib_insert中的insert_cart_info函数是一样的，只是最后一行不一样，一个是输出到json数据组，一个直接返回。
这样有了这些以后就只差模板中的JS调用了。我们给删除链接添加了代码<a class="del" href="javascript:">[删除]</a>
插入deleteCartGoods这个js就行了。在这里提示一下，使用Jquery和使用EC自带的JS写法是有一定区别的，JQuery 我在这里就不写了，因为我火柴网的确没有使用，我也就懒得写了。
  1. <script type="text/javascript">
  2. function deleteCartGoods(rec_id)
  3. {
  4. Ajax.call('delete_cart_goods.php', 'id='+rec_id, deleteCartGoodsResp**e, 'POST', 'JSON');
  5. }
  6. /**
  7. * 接收删除后返回的信息
  8. */
  9. function deleteCartGoodsResp**e(res)
  10. {
  11. if (res.error)
  12. {
  13. alert(res.err_msg);
  14. }
  15. else
  16. {
  17. document.getElementById('ECS_CARTINFO').innerHTML = res.content;
  18. }
  19. }
  20. </script>
复制代码


原理很简单，先发送删除指令，然后将返回的json数据重新加载到ECS_CARTINFO中的代码中就行了。

到此，大功告成！！看不懂的同志们可以在论坛和我blog中回贴或留言评论。在这里就先里放个链接了。。哈哈~~

PS:火柴网求友情链接，希望能得到您的帮助（链接名称:网购零食。地址：www.w7t.net)

回答：
沙发。。。

支持一下楼主

有图为证：一步一步教你实现购物车中加入详情,最常用的购物车增强功能，听说 看帖回帖是美德~

cart_info.lbi哪里有啊？你的是哪个版本的？

不顶不行！呵呵

楼主！你太强大了！爱死你了~

回帖做个记号，顶你~

顶一下 好好学习

多谢楼主分享！ORZ

不错，很好，必须给力！

楼主！你太强大了！爱死你了~

顶一下下

恩恩饿支持一下