Analisti ed esperti, più o meno improvvisati, di Web marketing da diversi anni auspicano uno sviluppo di Internet in senso commerciale. La crescita esponenziale di siti Web e utenti collegati rende il mercato molto appetibile a società finora impegnate esclusivamente in settori tradizionali. Riguardo agli strumenti per il business in Rete esistono molti dubbi e un'unica, grande certezza: il commercio elettronico. Riviste, conferenze, siti Web e quant'altro faccia comunicazione sulla Rete sono in continua fibrillazione per quella che sarà "la rivoluzione del commercio elettronico". Prossima o remota, ormai tutti sono convinti che il futuro del Web si giochi intorno a questa "rivoluzione". Le aziende, passata l'iniziale euforia nuovistica sono alla ricerca di qualcosa di più di una vetrina virtuale per i loro Web. E quale miglior incentivo alla crescita del business se non la vendita per corrispondenza virtuale? Perchè limitarsi ad un mercato cittadino, se non rionale, quando ci si puo' rivolgere al mondo intero?
Sembra che nulla debba limitare l'esplosione, anche in Europa, del commercio elettronico; eppure non è cosi'. Pregiudizi culturali (si pensi soltanto alla diffidenza verso i pagamenti con carta di credito), costi elevati e limiti tecnici frenano uno sviluppo altrimenti inarrestabile.
Senza entrare nel merito del primo elemento, in questa sede preme trovare una soluzione ai due ultimi limiti.
Creare un negozio virtuale con tanto di carrello e pagamento con carta di credito soffre di costi, soprattutto per la sicurezza, che una piccola impresa o un privato non possono sopportare. Javascript viene in aiuto agli sviluppatori con un sistema di "carrello della spesa" che sfrutta massicciamente i cookie (analizzati nel numero 18 di questa lista). Premettiamo che questa soluzione non puo' sostituire i programmi avanzati di gestione che attualmente sono sul mercato.
L'articolo si compone di 4 file:
- esempio.htm
- frame1.htm
- frame2.htm
- frame3.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Questo file apre il nostro negozio virtuale. È il frameset che contiente i frames principali del carrello, in cui sono contenuti i javascript specifici per il suo corretto funzionamento.
frame2.htm
È il frame che contiene la lista dei prodotti offerti e i relativi prezzi.
Vediamo innanzitutto il codice javascript da inserire per poi personalizzarlo:
<script type="text/javascript" language="javascript">
prodA=new Array("T-shirt","Pantaloni","Cappello","Guanti","Sciarpa","Cinta")
qtprA=new Array(0,0,0,0,0,0)
costA=new Array(25000,29000,12000,45000,17000,15000)
function aggcar(val) {
qtprA[val]++
parent.f3.location.reload()
}
function togcar(val) {
if(qtprA[val]!=0) {
qtprA[val]--
parent.f3.location.reload()
}
}
function compra() {
if(parent.f3.totpro==0) {
alert("Il carrello è vuoto!")
return false
}
else {
abb=document.form1
abb.tot_prodA1.value=qtprA[0]
abb.tot_prodA2.value=qtprA[1]
abb.tot_prodA3.value=qtprA[2]
abb.tot_prodA4.value=qtprA[3]
abb.tot_prodA5.value=qtprA[4]
abb.tot_prodA6.value=qtprA[5]
parent.f3.location.reload()
alert("L'ordine verrà inviato via e-mail. Grazie.")
return true
}
}
</script>
In questa riga vanno inseriti i nomi dei prodotti:
prodA=new Array("T-shirt","Pantaloni","Cappello","Guanti","Sciarpa","Cinta")
mentre in queste due stringhe vanno messi il numero (in 0) e il costo dei prodotti:
qtprA=new Array(0,0,0,0,0,0)
costA=new Array(25000,29000,12000,45000,17000,15000)
Affinchè il modulo contenente la lista di prodotti scelti possa essere inviato correttamente sarà necessario inserire questo form nella pagina:
<form name="form1" method="post" enctype="text/plain"
action="mailto:mail@provider.it?subject=ordine" onSubmit="return compra(this)">
<strong>Linea prodotti A</strong>
T-shirt Costo: 25.000
<input type="button" value=" + " onClick="aggcar(0)">
<input type="button" value=" - " onClick="togcar(0)"><br />
Pantaloni Costo: 29.000
<input type="button" value=" + " onClick="aggcar(1)">
<input type="button" value=" - " onClick="togcar(1)"><br />
Cappello Costo: 12.000 <input type="button" value=" + " onClick="aggcar(2)">
<input type="button" value=" - " onClick="togcar(2)"><br />
Guanti Costo: 45.000
<input type="button" value=" + " onClick="aggcar(3)">
<input type="button" value=" - " onClick="togcar(3)"><br />
Sciarpa Costo: 17.000 <input type="button" value=" + " onClick="aggcar(4)">
<input type="button" value=" - " onClick="togcar(4)"><br />
Cinta Costo: 15.000
<input type="button" value=" + " onClick="aggcar(5)">
<input type="button" value=" - " onClick="togcar(5)"><br />
<input type="hidden" name="tot_prodA1" value="">
<input type="hidden" name="tot_prodA2" value="">
<input type="hidden" name="tot_prodA3" value="">
<input type="hidden" name="tot_prodA4" value="">
<input type="hidden" name="tot_prodA5" value="">
<input type="hidden" name="tot_prodA6" value="">
<input type="submit" value="Procedi con l'acquisto">
</form>
Il frame destro invece contiene il codice script che permette di aggiornare in tempo reale il carrello della spesa.
Ecco il codice da inserire:
<script type="text/javascript" language="javascript">
totpro=0
totcos=0
subtot=new Array(0,0,0,0,0,0)
for(y=0;y<6;y++) {
subtot[y]=parent.f2.qtprA[y]*parent.f2.costA[y]
}
for(x=0;x<6;x++) {
totpro+=parent.f2.qtprA[x]
totcos+=subtot[x]
}
document.write("<body><div align="center">")
document.write("<table class="tabella" border=1>")
document.write("<tr><td><h6><font
color=red>Prodotti</font></h6></td><td><h6><font color=red>Costo</font></h6></td><td><h6><font
color=red>Qt.</font></h6></td></tr>")
for(n=0;n<6;n++) {
document.write("<tr><td>"+parent.f2.prodA[n]+"</td><td>"+parent.f2
.costA[n]+"</td><td>"+parent.f2.qtprA[n]+"</td></tr>")
}
document.write("<tr><td><h6><font
color=red>Totale</font></h6></td><td><h6>"+totcos+"</h6></td><td><h6>"+totpro+"</h6></td></h6></tr></center>
</body>")
</script>
