Effect of adding ecshop to shopping cart (various pages)

Click Add to shopping cart in ecshop.

Use the following code to change the effect

 

1. Set the "Shopping Cart confirmation" prompt for the background online shop to "Prompt User" and click "OK" to go to the shopping cart"

 

2. Open row 104 of JS/common. JS, that is, Case '1' in function addtocartresponse'

Replace the previous 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);

 

3. Copy the following code to this common. in JS, you can see that this function is very familiar. This is the file I just used to modify it. Of course, we can re-write the pop-up layer by ourselves, for example, using jquery

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 // calculate the value of the element on the volume 9 var scrollpos; 10 if (typeof window. pageyoffset! = 'Undefined') 11 {12 scrollpos = Window. pageyoffset; 13} 14 else if (typeof document. compatmode! = 'Undefined' & document. compatmode! = 'Background') 15 {16 scrollpos = document.doc umentelement. 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 // new activation layer 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 n Ewdiv. style. height = "270px"; 38 newdiv. style. top = (parseint (scrollpos + 200) + "PX"; 39 newdiv. style. left = (parseint (document. body. offsetwidth)-400)/2 + "PX"; // the screen is centered at 40 newdiv. style. background = "# fff"; 41 newdiv. style. border = "5px solid # 11611c"; 42 var html = ''; 43 44 // the content in the generated layer is 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 "> product purchase </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; "> close </a> </div> <Div class =" cartpopdiv "> <Div class =" toptitle "> <a href =" goods. PHP? Id = '+ goods_id +' "class =" pic ">  </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"> A total of <font style = "color: # ff6701; "> <strong> '+ number +' </strong> </font> Products: Total: <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: pixel; text-align: center; padding: 15px 0 0; '> <a href = 'index. php'>  </a> <a href = 'flow. php'>  </a> </div> "; 54 HTML + = '</div>'; 55 newdiv. innerhtml = HTML; 56 Document. body. appendchild (newdiv); 57 // mask layer 58 var newmask = document. createelement ("Div"); 59 newmask. id = m; 60 newmask. style. position = "absolute"; 61 newmask. style. Z index = "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}

 

4. Open Flow. php
Add the following code to the code above $ result ['Confirm _ type'] =! Empty ($ _ CFG ['cart _ confirm'])? $ _ CFG ['cart _ confirm']: 2;

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

 

 

5. Place the style and image in the corresponding CSS file.

1/* shopping cart pop-up effect */2. cartpopdiv {3 width: pixel PX; 4 padding: 0 25px; 5 float: Left; 6} 7. toptitle {8 width: pixel PX; 9 float: Left; 10 padding: 16px 0; 11 background: URL (.. /images/cartpop_bg.gif) left bottom repeat-X; 12} 13. toptitle. 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: pixel PX; 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}

 

Three graphs used

Jsico.gif

Goon_ico.gif

Ico_closebig.gif

Effect of adding ecshop to shopping cart (various pages)