Carrello della spesa

Attenzione: Il sito si è trasferito su un nuovo indirizzo: CLICCA QUI

Crediti:
Name: Portalozzo
Website: http://www.portalozzo.f2s.com

Descrizione: Un carrello della spesa molto semplice da realizzare e da gestire, ho modificato l'invio dei dati in modo che chi dovesse compilarlo sia costretto a fare uso della propria mailbox, questo per responsabilizzare maggiormente l'acquirente e di conseguenza ridurre il numero delle ordinazioni fasulle. Ho inoltre aggiunto una funzione di arrotondamento al totale per la compatibilità con l' Euro e i campi: nome, cognome, indirizzo e-mail.

Nulla a che vedere con i carrelli che si trovano on-line nei siti dove si fanno acquisti con carta di credito; questo semplicissimo script, per altro molto richiesto, ha il solo scopo di automatizzare le scelte e fare i relativi conteggi inviando il tutto tramite mailbox.

I files da creare sono 5 di cui uno .js e gli altri 4 in normale formato .htm

Passo 1: Copiate il codice sottostante e incollatelo in una nuova pagina web che andrete poi a salvare con il nome "index.html" o come meglio preferite.

Passo 2: Copiate e incollate il codice qui di seguito riportato in una nuova pagina web e salvatela con il nome inv.htm (non cambiate questo nome!!).

Passo 3: Copiate il codice sottostante e incollatelo in una nuova pagina web e salvatela con il nome scaffale.htm (non cambiate questo nome!!).

<html> <head> <title>Scaffale articoli</title> <style> TH {font-family:verdana;font-size:12px;color:blue;font-weight:bold} TD {font-family:verdana;font-size:12px;color:blue;font-weight:bold} INPUT {font-family:verdana;font-size:14px;color:blue;background:gold} </style> <script src="articoli.js"></script> <script language="JavaScript" type="text/javascript"> function articoloComprato(nome,prezzo) { this.nome=nome this.prezzo=prezzo } function aggiungiCarrello(nomeArticolo,prezzoArticolo) { parent.inv.comprati[parent.inv.comprati.length]=new articoloComprato(nomeArticolo,prezzoArticolo) } </script></head> <body> <table width=100% border=1> <tr><th bgcolor="khaki">Articolo</th><th bgcolor=aqua>Immagine</th><th bgcolor=springgreen>Prezzo</th><th bgcolor=lightsteelblue>Aggiungi al carrello</th></tr> <script language="JavaScript" type="text/javascript"> for (i=0;i<articoli.length;i++) { document.write("<tr><td bgcolor=khaki>",articoli[i].nome,"</td><td bgcolor=aqua align=center>","<img src=\"",articoli[i].imm,"\" border=0></td><td bgcolor=springgreen>",articoli[i].prezzo,"</td><td bgcolor=lightsteelblue align=center><input type=button value=\"Aggiungi al carrello\" onclick=\"aggiungiCarrello(articoli[",i,"].nome,articoli[",i,"].prezzo)\"></tr>") } </script> </table> <br> <br><center><input type="button" onclick="location.href='carrello.htm'" value="Visualizza carrello"></center> <br> <br> Carrello della spesa fornito da <a href="http://www.portalozzo.f2s.com" target="_blank">Portalozzo</a> e distribuito secondo la licenza GNU GPL: le modifiche sono autorizzate, purchè il software non venga rivenduto o concesso come opera propria. </body> </html>

Passo 4: Copiate e incollate il codice qui di seguito riportato in una nuova pagina web e salvatela con il nome carrello.htm (non cambiate questo nome!!).

<html> <head> <title>Riepilogo carrello</title> <style type="text/css"> TH {font-family:verdana;font-size:12px;color:blue;font-weight:bold} TD {font-family:verdana;font-size:12px;color:blue;font-weight:bold} INPUT {font-family:verdana;font-size:14px;color:blue;background:gold} </style> <script language="JavaScript" type="text/javascript">  var totale=0 var scrivere="" function svuotaCarrello() { for (x=0;x<parent.inv.comprati.length;x++) { parent.inv.comprati[x].nome="" parent.inv.comprati[x].prezzo="" location.reload(true) } } document.write("<table border=1 width=100%>") document.write("<th bgcolor=aqua colspan=4>Riepilogo acquisto</th>") for (z=0;z<parent.inv.comprati.length;z++) { if (parent.inv.comprati[z].nome!="") { document.write("<tr><td bgcolor=khaki>",parent.inv.comprati[z].nome,"</td><td bgcolor=springgreen>",parent.inv.comprati[z].prezzo,"</td><td bgcolor=lightsteelblue><input type=\"button\" onclick=\"parent.inv.comprati[",z,"].nome=\'\'\; location.reload(true);\" value=\"Togli dal carrello\"></td></tr>") scrivere+="<input type=hidden name="+parent.inv.comprati[z].nome+" value="+parent.inv.comprati[z].prezzo+">" totale+=parent.inv.comprati[z].prezzo/1 } } document.write("<tr><td bgcolor=khaki>Spese di spedizione</td><td bgcolor=springgreen>10.00</td><td bgcolor=lightsteelblue> </td></tr>") totale+=10.00 totale=Math.round(((totale/100)*120)*100)/100; scrivere+="<input type=hidden name=\"totale\" value="+totale+">" document.write("<tr><td bgcolor=khaki>Prezzo totale (IVA 20%)</td><td bgcolor=springgreen>",totale,"</td><td bgcolor=lightsteelblue> </td></tr>") document.write("</table>") document.write("<table border=1 width=100% bgcolor='#cccccc'>") document.write("<form method=post action='mailto:carrello@web-link.it' enctype='text/plain'>") document.write("<tr><td>Nome e Cognome:</td><td><input type=text name='nome' size=35 maxlength=50 value=''></td></tr>") document.write("<tr><td>Indirizzo dove spedire la merce:</td><td><textarea name='indirizzo' rows=4 cols=30></textarea></td></tr>") document.write("<tr><td>e-mail o Telefono:</td><td><input type=text name='email_telefono' size=35 maxlength=50 value=''></td></tr>") document.write("</table><br><br>") document.write(scrivere) document.write("<center><input type=button value=\"Svuota carrello\" onclick=\"svuotaCarrello()\"><input type=submit value=\"Acquista elementi selezionati\"></center>") </script> </head><body> <br><br> <center><input type="button" onclick="location.href='scaffale.htm'" value="Torna a scelta articoli"></center> <br><br><br> Carrello della spesa fornito da <a href="http://www.portalozzo.f2s.com" target="_blank">Portalozzo</a> e distribuito secondo la licenza GNU GPL: le modifiche sono autorizzate, purchè il software non venga rivenduto o concesso come opera propria. </body></html>

Su questo quarto file è possibile variare le spese di spedizione, l' i.v.a. e il nome della e-mail a cui inviare l'ordine.

Individuate la riga che ha questo codice: action='mailto:tua_mail@tin.it' e sostituite quel "tua_mail@tin.it" con la vostra e-mail.

Passo 5: Copiate il codice qui di seguito riportato e incollatelo in una nuova pagina e salvatela con il nome articoli.js (non cambiate questo nome).

Note: Fate attenzione a questo ultimo file che non è una pagina html come gli altri ma un semplicissimo file di testo con estensione .js potete crearlo con lo stesso editor che usate per fare pagine web, basta salvarlo con quel nome preciso e non in htm. In questo file dovrete modificare le voci esistenti ed inserire gli altri articoli sulla stessa falsa riga di quelli che avrete appena modificato, limitatevi a modificare soltanto i nomi delle tre variabili (per ogni voce) dove la prima si riferisce al nome dell'oggetto, la seconda alla sua immagine grafica (se esiste) e la terza ed ultima al relativo prezzo.

Bene se avete fatto tutto quanto in maniera corretta dovreste avere 5 files salvati nella stessa cartella e precisamente:

index.html
inv.htm
scaffale.htm
carrello.htm
articoli.js

Non vi resta che lanciare il file index.html e verificare che tutto funzioni.

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.