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">商品已经成功加入购物车! 高6报价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> 复制代码 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. m档是什么意思{ 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)
发布评论