Shopping sur un site (cookie/javascript)

Contenu du snippet

Permet de sélectionner dans un cookie les articles désirés sur un site et d'accéder au bon de commande. (Reste à l'enregistrer, l'imprimer, l'annuler ou l'envoyer...)

Source / Exemple :



      • (caddy.gif téléchargeable sur mon site)
//================================================= //ckitems.html (main page) //======================== <html><head> <title>List of Items (cookie)</title> <script language="JavaScript"><!-- litems = new Array('Meat','Fish','Patatoes','Tomatoes','Beer','Wine','Water','Bread','Cheese'); lprices = new Array(20,15,5.10,7.50,4,5.20,0.35,0.80,1.10); var dataCount = 0;//.....no recorded data var dataMax = 6; //.........entries var Cookies; var strCookie=''; var exp = new Date(); var Cdays = 30; //........days exp.setTime(exp.getTime() + (Cdays*24*60*60*1000)); var i; var item; var num=0; var items; function list_items() { //------------------------------- if (document.cookie !='') { //....search cookie, extract the list of items Cookies = document.cookie.split('; '); for (i=0; i<Cookies.length; i++) { if ('ckItem' == Cookies[i].split('=')[0]) { strCookie = Cookies[i].split('=')[1]; strCookie = unescape(strCookie);}} } if (strCookie !='') { //...........extract each item var msg='Your datas :\n\n'; var tot = 0; items = strCookie.split(':::'); dataCount = items.length; for (i=1; i<items.length; i++) { k = parseInt(items[i]); tot = parseFloat(tot + lprices[k]); msg = msg + i + ' -' + litems[k] + '...'+ lprices[k] + ' €\n';} alert(msg + '------------------\ntotal = ' + tot + ' €');} } function add_item(item) { //------------------------------- dataCount++; if (dataCount > dataMax+1) { dataCount = dataMax; alert('Cookie [ckItem] is limited to '+ dataMax +' entries');} else { exp = new Date(); exp.setTime(exp.getTime() + (Cdays*24*60*60*1000)); strCookie = escape(strCookie + ':::' + item); document.cookie ="ckItem=" + strCookie + ";expires=" + exp.toGMTString() + ";"; window.location = window.location;} } function delete_Cookie () { //------------------------------- var exp = new Date(); exp.setTime (exp.getTime() - 1); strCookie = ''; document.cookie ="ckItem=" + strCookie + ";expires=" + exp.toGMTString() + ";"; dataCount = 0; alert('Cookie [ckItem] has been deleted...'); } function order_show() { //------------------------------- window.location='ckorder.html'; } --></script></head> <body> <hr><font color=black><font size=3> ...shopping time...select your favorite items...then order...</center><p><font size=2> <script language="JavaScript"><!-- list_items(); --></script> <p> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("0")'> Meat......20 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("1")'> Fish......15 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("2")'> Patatoes......5.10 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("3")'> Tomatoes......7.50 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("4")'> Beer......4 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("5")'> Wine......5.20 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("6")'> Water......0.35 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("7")'> Bread......0.80 €<br> <img src='../gif/caddy.gif' align=middle border=0 onClick='add_item("8")'> Cheese......1.10 €<br> <p><center> <input type=button value='Delete cookie' onClick='delete_Cookie()'>&nbsp;&nbsp;&nbsp; <input type=button value='Order form' onClick='order_show()'> </center> <hr><br><font size=2>Free JavaScript provided by ©2004-VB'Breizh </body></html> //================================================= //ckorder.html (order form) //======================== <html><head> <title>order form (ckItem)</title> <script language="JavaScript"><!-- litems = new Array('Meat','Fish','Patatoes','Tomatoes','Beer','Wine','Water','Bread','Cheese'); lprices = new Array(20,15,5.10,7.50,4,5.20,0.35,0.80,1.10); var dataCount=0;//.....no recorded data var dataMax=5; //.........entries var Cookies; var strCookie=''; var tt=0; var i; var exp = new Date(); var Cdays = 30; //........days exp.setTime(exp.getTime() + (Cdays*24*60*60*1000)); var i; var item; var num=0; var items; function write_order() { //------------------------------- if (document.cookie !='') { //....search cookie, extract the list of items Cookies = document.cookie.split('; '); for (i=0; i<Cookies.length; i++) { if ('ckItem' == Cookies[i].split('=')[0]) { strCookie = Cookies[i].split('=')[1]; strCookie = unescape(strCookie);}} } if (strCookie !='') { //...........extract each item var tot = 0; items = strCookie.split(':::'); dataCount = items.length; //alert(dataCount); for (i=1; i<items.length; i++) { k = parseInt(items[i]); tot = parseFloat(tot + lprices[k]); print_item(i, litems[k], lprices[k], tot);} document.write("</table><font color=blue><font size=3>Total = " + tot + " €" );} else {document.write("</table>");} } function print_item (count, item, price, tot) { //------------------------------- if (tt == 0) { tt=1; color = "bgcolor='lavender'";} else { tt=0; color = "bgcolor='azure'";} document.write("<tr " + color + ">"); document.write("<td width=5% align=left><small>" + count); document.write("<td width=65% align=left>" + item); document.write("<td width=15% align=left><small>" + price +" €"); } function delete_Cookie () { //------------------------------- var exp = new Date(); exp.setTime (exp.getTime() - 1); strCookie = ''; document.cookie ="ckItem=" + strCookie + ";expires=" + exp.toGMTString() + ";"; dataCount = 0; alert('Cookie [ckItem] has been deleted...'); } function save_order() { //-------------- if (document.execCommand) { document.execCommand("SaveAs",false,"order.html");} } function print_order() { //------------- var bV = parseInt(navigator.appVersion); if (bV >= 4) window.print(); } function initialize() { //--delete all items var exp = new Date(); exp.setTime (exp.getTime() - 1); strCookie = ''; document.cookie ="ckItem=" + strCookie + ";expires=" + exp.toGMTString() + ";"; alert('Cookie [ckItem] has been deleted...'); } function send_order() { //-------------- //use the (submit) button alert('Sorry...\nfunction not implemented...'); } function write_date() { document.write(new Date()); } function go_back() { //-------------- window.location='ckitems.html'; } --></script></head> <body bgcolor=white> <font face="Comic Sans MS" color=darkblue> <font size=2>Free JavaScript provided by ©2004-VB'Breizh<hr> <h2>ORDER FORM</h2><br> <form action='' method='post' name='order' enctype='text/plain'> <center> <table width=50%> <tr><script language="JavaScript"><!-- write_date(); --></script></tr> <tr><td width=10% align=left><small>Name :</td><td width=90%><input type=text></td></tr> <tr><td width=10% align=left><small>Address :</td><td width=90%><input type=text></td></tr> <tr><td width=10% align=left><small>Phone :</td><td width=90%><input type=text></td></tr> </table> <table width=50%> <script language="JavaScript"><!-- write_order(); --></script> </table><p> <input type=button value='Back...' onClick='go_back()'> &nbsp;&nbsp;<input type=button value='Save' onClick='save_order()'> &nbsp;&nbsp;<input type=button value='Print' onClick='print_order()'> &nbsp;&nbsp;<input type=button value='Initialize' onClick='initialize()'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=button value='Send...' onClick='send_order()'> </center> </form> </body></html>

Conclusion :


Une démo sur mon site (http://gilles.saunier.free.fr) avec d'autres cookies (destructibles)

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.