ecshop加入購物車效果

年 客戶曾提成 改善

下載 (31.15 KB)

2012-4-11 16:54

這個 功能 要求用層來實現，當時實在太菜，今天我終於作了修改

下載 (67.56 KB)

2012-4-11 16:56

下來我把個人作法貼出來 網友們作參考 有不對的地方多多指正。

一、後臺網店設置 購物車肯定提示  選擇爲

下載 (3.93 KB)

2012-4-11 16:57

二、打開js/common.js  104行 就是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);

複製代碼

三、複製

1. function opencartDiv(price,name,pic,goods_brief,goods_id,total,number)
   
2. {
   
3. var _id = "speDiv";
   
4. var m = "mask";
   
5. 
   
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. }
    
22. 
    
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. }
    
30. 
    
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 = '';
    
43. 
    
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>';
    
46. 
    
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>';
    
51. 
    
52. 
    
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);
    
70. 
    
71. }

複製代碼

到這個common.js裏  你們看了會覺的這個函數很熟悉 這就是這個文件裏的 我只是拿出來修改了一下 ，固然咱們能夠本身從新寫彈出層 好比用jquery
四、打開flow.php  181行左右加入

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'];

複製代碼

就是加入購物車成功的判斷裏面

五、我把咱們作的樣式和圖片也貼出來 不是很漂亮了

1. 
   
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}

複製代碼

購物導航  http://www.ganshuw.com

購物分享 http://www.jielala.com/
以上就是個人實現方法