echsop 购物车实现淘宝ajax效果
shop/viewthread.php?tid=109648&extra=page%3D2%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D16
这几天做echsop改版，购物车想实现淘宝那样的效果，即点击购物车之后弹出对话框，显示购物车的商品件数和价格
同时头部的购物车信息也一起更新  具体见附件图片。
经过多方研究，终于得到答案，在此将代码分享，由于本人不会AJAX,所以如果不足之处还望指教，

1 在goods.dwt页面增加弹出层的现实代码，我是写在商品数量的下面代码如下
1. <div id="light" class="white_content">
2. <table >
3. <tr>
4. <td align="left">商品已经成功加入购物车!
5. </td>
6. <td align="right" > <a href="javascript:void(0)" onFocus="this.blur()" onclick="ElementById('light').style.display='none';ElementById('fade').style.display='none'">
7.   </a>
8. </td>
9. </tr>
10. <tr>
11. <td colspan="2" >
12. <div id="ECS_SHOWDIV" >
13. </div>
14. </td>
15. </tr>
16. <tr >
17. <td ><a onFocus="this.blur()" href="flow.php">进入购物车</a>
18. </td>
19. <td>
20. <a href="javascript:void(0)" onFocus="this.blur()" onclick="ElementById('light').style.display='none';ElementById('fade').style.display='none'">继续购物</a>
21. </td>
22. </tr>
23. </table>
24. </div>
复制代码
该效果使用图层实现的所以还要配合CSS一起使用，其中*html 和*+html是用来适应不同浏览器
1.
2. .white_content {  display: none;   position: absolute;  top: 100%; background-image:url(images/cart_info.gif);  left: 60%; overflow:hidden;  width: 352px;  height: 101px;      z-index:1002;    }
3. 网页购物车代码* html .white_content{ display: none;   position: absolute;  top: 105%; background-image:url(images/cart_info.gif);  left: 60%; overflow:hidden;  width: 352px;  height: 101px;      z-index:1002;}
4. *+html .white_content {  display: none;   position: absolute;  top: 95%; background-image:url(images/cart_info.gif);  left: 60%; overflow:hidden;  width: 352px;  height: 101px;      z-index:1002;    }
5.    .white_content a{ text-decoration:none}
复制代码
2接下来修改common.js里面的函数addToCartResponse（）主要是防止点击加入购物车之后直接跳入flow.php页面，我只是注释了部分跳转代码，然后新加了一个ajax.call 这里我把这个函数贴上去，改的不对，大家不要见笑
1. function addToCartResponse(result)
2. {
3.
4. Ajax.call('goods.php','act=recal&id=' + goodsId,callback, 'POST', 'JSON' );
5.
6. if (result.error > 0)
7. {
8. // 如果需要缺货登记，跳转
9. if ( == 2)
10. {
11. if (ssage))
12. {
13. location.href = 'user.php?act=add_booking&id=' + ds_id;
14. }
15. }
16. // 没选规格，弹出属性选择框
17. else if ( == 6)
18. {
19. ssage, ds_id);
20. }
21. else
22. {
23. ssage);
24. }
25. }
26. else
27. {
28.
29. var cartInfo = ElementById('ECS_CARTINFO');
30. var cart_url = 'flow.php?step=cart';
31. if (cartInfo)
32. {
33. cartInfo.innerHTML = t;
34. }
35.
36. if (_step_buy == '1')
37. {
38. location.href = cart_url;
39. }
40. else
41. {
42.
43. firm_type)
44. {
45. case '1' :
46. if (ssage));// location.href = cart_url;
47. break;
48. case '2' :
49. if (!ssage));// location.href = cart_url;
50. break;
51. case '3' :
52. //location.href = cart_url;
53. break;
54. default :
55.
56. break;
57. }
58.
59. }
60.
61. }
62. }
复制代码
3 然后添加自己的函数，有两个一个是用来响应上面ajax.call的，一个是用来控制dwt页面层的显示
1.
2. function divshow()
3. {
4. ElementById('light').style.display='block';
5. ElementById('fade').style.display='block';
6. }
7. function callback(res)
8. {
9. if (_msg.length > 0)
10. {
11. _msg);
12. }
13. else
14. {
15.
16. if (ElementById('ECS_SHOWDIV'))
17. {
18. ElementById('ECS_SHOWDIV').innerHTML = sult;
19. ElementById('ECS_SHOWDIV1').innerHTML = sult;
20.
21. }
22.
23. }
24. divshow();
25. }
复制代码
4 然后在goods.php页面增加如下代码，主要是返回ajax刷新之后购物车的参数，即重新调用insert_cart_info函数重新计算，然后返回购物车最新信息
1. /*------------------------------------------------------ */
2. //-- 点击购物按钮时改变购物车信息
3. /*------------------------------------------------------ */
4. if (!empty($_REQUEST['act']) && $_REQUEST['act'] == 'recal')
5. {
6. include('includes/cls_json.php');
7.
8. $json = new JSON;
9. $res = array('err_msg' => '');
10. $res['result']=insert_cart_info();
11.
12.
13.
14.
15. die($json->encode($res));
16.
17. }
复制代码
好了，我写的比较乱，大概就是这么几步，有想做的但我没写清楚的地方，可以来问我，呵呵
cat.jpg (42.88 KB)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。