ecshop2.7.3加入購物車彈出層效果

        在濟南網站建設中開發ecshop的商城網站，不免會遇到有的客戶需要改一下是否繼續購物這個地方，因為官方的那個樣子實在是太丑了。ecshop2.7.3加入購物車彈出層效果。怎么修改呢，濟南騰飛網絡講解一下方法：

效果如圖：

一、進入網站后臺--網店設置--購物車確定提示--改為如圖所示：

二、打開js/common.js找到104行也就是case '1'  替換之前的 if (confirm(result.message)) location.href = cart_url;為opencartDiv(result.shop_price,result.goods_name,result.goods_thumb,result.goods_brief,result.goods_id,result.goods_price,result.goods_number);

三、復制

• function opencartDiv(price,name,pic,goods_brief,goods_id,total,number)
• {
• var _id = "speDiv";
• var m = "mask";
•  
• if (docEle(_id)) document.removeChild(docEle(_id));
• if (docEle(m)) document.removeChild(docEle(m));
• //計算上卷元素值
• var scrollPos;
• if (typeof window.pageYOffset != 'undefined')
• {
• scrollPos = window.pageYOffset;
• }
• else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
• {
• scrollPos = document.documentElement.scrollTop;
• }
• else if (typeof document.body != 'undefined')
• {
• scrollPos = document.body.scrollTop;
• }
•  
• var i = 0;
• var sel_obj = document.getElementsByTagName('select');
• while (sel_obj[i])
• {
• sel_obj[i].style.visibility = "hidden";
• i++;
• }
•  
• // 新激活圖層
• var newDiv = document.createElement("div");
• newDiv.id = _id;
• newDiv.style.position = "absolute";
• newDiv.style.zIndex = "10000";
• newDiv.style.width = "500px";
• newDiv.style.height = "270px";
• newDiv.style.top = (parseInt(scrollPos + 200)) + "px";
• newDiv.style.left = (parseInt(document.body.offsetWidth) - 400) / 2 + "px"; // 屏幕居中
• newDiv.style.background = "#fff";
• newDiv.style.border = "5px solid #37911C";
• var html = '';
•  
• //生成層內內容
• 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>';
•  
• html += '<div class="coninfo">';
• 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>';
• html += '</table>';
• html +='</div>';
•  
•  
• 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>";
• html +='</div></div>';
• newDiv.innerHTML = html;
• document.body.appendChild(newDiv);
• // mask圖層
• var newMask = document.createElement("div");
• newMask.id = m;
• newMask.style.position = "absolute";
• newMask.style.zIndex = "9999";
• newMask.style.width = document.body.scrollWidth + "px";
• newMask.style.height = document.body.scrollHeight + "px";
• newMask.style.top = "0px";
• newMask.style.left = "0px";
• newMask.style.background = "#FFF";
• newMask.style.filter = "alpha(opacity=30)";
• newMask.style.opacity = "0.40";
• document.body.appendChild(newMask);

到這個common.js里  大家看了會覺的這個函數很熟悉 這就是這個文件里的 我只是拿出來修改了一下 ，當然我們可以自己重新寫彈出層 比如用jquery

四、打開flow.php  181行左右加入

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

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