Using js + cookies to implement a suspended shopping cart: using cookies for shopping cart

Using js + cookies to implement a suspended shopping cart: using cookies for shopping cart

This article describes how to implement a suspended shopping cart using js + cookies. Share it with you for your reference. The specific analysis is as follows:

On the "product list display page", click "floating" and "DataList" to create a "shopping cart without refreshing". You only need to calculate the total price and do not have to go to the separate page for settlement. I found some information and modified it. The sorting example is as follows:

The gwc. js file is as follows:

// JavaScript Document // calculate a single subtotal function EveryCount () {var index = window. event. srcElement. parentElement. parentElement. rowIndex; var a = document. getElementById ("test "). rows (index ). cells (1 ). innerText; var B = document. getElementById ("Num" + index ). value; var c = parseFloat (a) * parseFloat (B); document. getElementById ("test "). rows (index ). cells (3 ). innerText = c; TotalCount (); updateOrderCookie (); // modify the number of cookies saved} // Calculate the total function TotalCount () {var rowscount = document. getElementById ("test "). rows. length; var sum = 0; for (var I = 1; I <= (parseInt (rowscount)-1); I ++) {var littecount = document. getElementById ("test "). rows (I ). cells (3 ). innerText; sum = parseFloat (sum) + parseFloat (littecount);} document. getElementById ("total "). innerText = sum;} // <-- Start -- write order data to divfunction WriteOrderInDiv () {var gwc = "<table id = 'test' style = 'bor Der: 0px; '> <tr> <td width = '000000'> item name </td> <td> unit price (￥) </td> <td> quantity </td> <td> subtotal </td> </tr> "; var OrderString = unescape (ReadOrderForm ('24 _ orderform'); // obtain the shopping cart information in cookies. // document. write (OrderString); var strs = new Array (); // defines an Array for storing every piece of information in the shopping cart var OneOrder = ""; // strs = OrderString. split ("% 7C"); // use | to split each product strs = OrderString in the shopping cart. split ("|"); // use | to split each product in the shopping cart for (I = 1; I <strs. length; I ++) {gwc + = "<tr>"; // OneOr Der = strs [I]. split ("% 26"); OneOrder = strs [I]. split ("&"); for (a = 1; a <OneOrder. length; a ++) {if (! = 3) {gwc + = "<td>"; gwc + = OneOrder [a]; gwc + = "</td> ";} else {gwc + = "<td id = 'dd'>"; gwc + = "<input title = 'Fill in the quantity you want to purchase, use valid numeric characters 'style = 'width: 10px; 'id = 'num "+ I +" 'Type = 'text' onkeyup = 'everycount (); 'value = '"+ OneOrder [a] +"'> "; gwc + =" </td> ";}// document. getElementById ("gwc "). innerHTML + = OneOrder [a] + "<br/>"; // after each attribute of each product is separated, the output character} gwc + = "<td> "; gwc + = OneOrder [2] * OneOrder [3]; gwc + = "</td>"; gwc + = "</tr>"; // document. g EtElementById ("gwc "). innerHTML + = strs [I] + "<br/>"; // character output after each product is split} gwc + = "</table>"; document. getElementById ("Cart "). innerHTML = gwc; TotalCount () ;}// <-- End -- write order data into div // -- Start -- Expand/contract the shopping cart function show (id) {if (document. getElementById (id ). style. display = "") {document. getElementById (id ). style. display = 'none';} else {document. getElementById (id ). style. display = ''; }}// <-- End -- Expand/contract the shopping cart // <-- Start -- read the Order data from the cookie Function ReadOrderForm (name) {var cookieString = document. cookie; if (cookieString = "") {return false;} else {var firstChar, lastChar; firstChar = cookieString. indexOf (name); if (firstChar! =-1) {firstChar + = name. length + 1; lastChar = cookieString. indexOf (';', firstChar); if (lastChar =-1) lastChar = cookieString. length; return cookieString. substring (firstChar, lastChar) ;}else {return false ;}}// --> End // <-- Start -- add a function for adding a commodity to the shopping cart. parameter (item number, item Name, item quantity, item unit price) function SetOrderForm (item_no, item_name, item_amount, item_price) {var cookieString = document. cookie; if (cookieString. length >=4000) {aler T ("your order is full \ n Please end this order operation and add a new order! ");} Else if (item_amount <1 | item_amount.indexOf ('.')! =-1) {alert ("quantity input error! ");} Else {var mer_list = ReadOrderForm ('24 _ orderform'); var Then = new Date (); Then. setTime (Then. getTime () + 30*60*1000); var item_detail = "|" + item_no + "&" + item_name + "&" + item_price + "&" + item_amount; if (mer_list = false) {document. cookie = "24_OrderForm =" + escape (item_detail) + "; expires =" + Then. toGMTString (); alert ("" + item_name + "" \ n "+" already added to your order! ");} Else {if (mer_list.indexOf (escape (item_no ))! =-1) {alert ('this item you have added \ n. Please enter the order modification quantity! ')} Else {document. cookie = "24_OrderForm =" + mer_list + escape (item_detail) + "; expires =" + Then. toGMTString (); alert ("" + item_name + "" \ n "+" already added to your order! ") ;}}}// --> End // <-- Start -- after modifying the quantity, update the cookie function updateOrderCookie () {var rowscount = document. getElementById ("test "). rows. length; var item_detail = ""; for (var I = 1; I <= (parseInt (rowscount)-1); I ++) {item_detail + = "|" + document. getElementById ("test "). rows (I ). cells (0 ). innerText + "&" + document. getElementById ("test "). rows (I ). cells (0 ). innerText + "&" + document. getElementById ("test "). rows (I ). cells (1 ). innerText + "&" + document. getElementById ("Num" + I ). value; // document. write (document. getElementById ("test "). rows (I ). cells (1 ). innerText);} var Then = new Date (); Then. setTime (Then. getTime () + 30*60*1000); document. cookie = "24_OrderForm =" + escape (item_detail) + "; expires =" + Then. toGMTString ();} // <-- End -- order update // <-- clear the cart function clearOrder () {var Then = new Date (); document. cookie = "24_OrderForm =''; expires = "+ Then. toGMTString ();} // <-- End

The gwc.html file is as follows:

<Script src = "js/gwc. js "type =" text/javascript "> </script> <div width =" 300px "> <div id =" Cart "style =" line-height: 24px; font-size: 12px; background-color: # f0f0f0; border-top: 1px # ffffff solid; display: none; "> </div> <div id =" Info "> total: <strong> <span id =" total "style =" color: # FF0000; font-size: 36px "> 0 </span> </strong> RMB <input type =" button "value =" clear "onclick =" clearOrder (); WriteOrderInDiv (); "/> <input type =" button "value =" Expand/Contract "onclick =" show ('cart ') "/> </div> <input type =" button "value =" Add Item 1 "onclick =" SetOrderForm ('no1', 'item 1', '1 ', '3. 5 '); WriteOrderInDiv (); "/> <input type =" button "value =" add product 2 "onclick =" SetOrderForm ('no2', 'item 2 ', '1', '5. 5 '); WriteOrderInDiv (); "/> <input type =" button "value =" add product 3 "onclick =" SetOrderForm ('no3', 'item 3 ', '1', '10. 5'); WriteOrderInDiv (); "/> </div> <script> window. writeOrderInDiv (); </script>

The above js function is to obtain and output the order information after the page is opened.

The example is written in html. In DataList, you only need to add the onclick = "SetOrderForm ('no3', 'item 3', '1', '10. 5 ');, bind the parameter, and set the div to be suspended on the right side of the browser.

I hope this article will help you design javascript programs.