Carrello della spesa

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. E' stato inoltre aggiunto una funzione di arrotondamento al totale per la compatibilità con l'€uro 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:

 <html> <head> <title>Carrello della spesa</title> </head> <frameset rows="0,*" frameborder=no> <frame src="inv.htm" name="inv" scrolling=no frameborder="0"> <frame src="scaffale.htm" name="scaffale"> </frameset> <body>Spiacente ma il tuo browser non supporta i frames</body> </html>

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">

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

Individuate la riga che ha questo codice: action='mailto:Email@email.it' e sostituitela 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 il quale non è una pagina html ma un semplicissimo file di testo con estensione .js . Potete crearlo con lo stesso editor che usate per fare pagine web, basta salvarlo in formato testo e poi modificare l'estensione!
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.