This article mainly introduces how to use js + cookies to implement a suspended shopping cart, involving the related operation skills of javascript numerical computation and cookie, for more information about how to implement a suspended shopping cart using js + cookies, see the example in this article. 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 quantity saved in cookies} // 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 pfunction WriteOrderInDiv () {var gwc ="
"; Gwc + ="";} // Document. getElementById (" gwc "). innerHTML + = OneOrder [a] +"
"; // Output after each attribute of each product is separated} gwc + ="
| Product Name |
Unit Price (￥) |
Quantity |
Subtotal |
"; Var OrderString = unescape (ReadOrderForm ('24 _ orderform'); // retrieves information about the shopping cart 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
| "; Gwc + = OneOrder [2] * OneOrder [3]; gwc + =" | "; Gwc + ="
"; // Document. getElementById (" gwc "). innerHTML + = strs [I] +""; // Character output after each product is split} gwc + ="
"; Document. getElementById ("Cart "). innerHTML = gwc; TotalCount () ;}// <-- End -- write order data to p // -- 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 -- function of reading order data from cookie 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:
