Un semplice carrello della spesa in ASP

Menu Javascript Ricette Cocktail Corsi online Registrazione domini Area Aziende

Home + Articoli + E-Commerce + Articolo # 86

Concesso in esclusiva a Mr.Webmaster. Vietata la riproduzione.

Il crescente sviluppo dei sistemi di E-Commerce (commercio elettronico) e la maggiore fiducia, rispetto a qualche anno fa, della gente verso Internet, fanno nascere l'esigenza di avere a disposizione degli strumenti automatici per la gestione dell'acquisto online di prodotti e servizi. Nasce quindi il concetto di carrello della spesa che, in questo articolo, vedremo come implementare in ASP.

Un carrello della spesa di un sistema online di E-Commerce funziona esattamente come al supermercato: entro, prendo un carrello, ci metto dentro tutto quello che mi serve, vado alla cassa e pago. Analogamente un sito che fa commercio elettronico dei propri prodotti prevede una fase di iscrizione e di login (entrata al supermercato), mette a disposizione un elenco di prodotti (scaffali del supermercato), permette di aggiungere al carrello i prodotti di cui si ha bisogno (analogamente al supermercato) ed in fine c'è un sistema di pagamento (la cassa del supermercato).

In questo articolo trascureremo la fase di iscrizione al servizio, quella di login ed anche quella della conferma dell'ordine: seguirà un articolo più completo che spiegherà come costruire un servizio completo con tanto di database. Ci dedicheremo invece alla fase più complicata del servizio, ovvero l'implementazione del carrello vero e proprio, basandoci su un elenco di prodotti statico costruito in HTML.

Quest'applicazione di base, che considero puramente didattica, sarà composta da tre file

carrello.js - contiene la funzione di invio dell'ordine al carrello;
index.asp - contiene l'elenco dei prodotti a disposizione e mostra gli ordini;
carrello.asp - è il carrello vero e proprio, ovvero lo script che "fa i conti".

Iniziamo esaminando il codice del file carrello.js

function Aggiungi(id, prezzo)
{
 var qta = eval("document.carrello.p" + id + ".value");
 if (isNaN(qta) || qta < 1)
 {
  alert("Specificare un valore numerico intero positivo");
 }
 else
 {
  location.href="carrello.asp?id="+id+"&prezzo="+prezzo+"&qta="+qta;
 }
}

Alla funzione passo due parametri: l'ID del prodotto ed il prezzo; all'interno della funzione calcolo la quantità di prodotti che si desidera acquistare, controllo che il valore sia un numerico intero positivo e, se la condizione viene soddisfatta, invio l'ordine al carrello, passando come parametri l'ID del prodotto, il prezzo e la quantità.

Passiamo al file index.asp, ovvero la Homepage del carrello, che tra l'altro richiama il file Javascript esaminato in precedenza. Il suo codice è semplice e si divide in due fasi: la visualizzazione dei prodotti e, se il carrello non è vuoto, la visualizzazione degli ordini, compreso un link per svuotare il carrello. Utilizziamo un cookie per verificare se ci sono ordini o meno.

Segue il codice

<%@LANGUAGE = VBScript%>
<html>
<head>
<title>Un semplice carrello della spesa in ASP</title>
<script type="text/javascript" src="carrello.js"></script>
<style type="text/css">
td { font: Normal 12px Verdana; }
</style>
</head>
<body>

<h1 align="center">Un semplice carrello della spesa in ASP</h1>

<form name="carrello">
<table align="center" width="300" border="1">
<tr><td bgcolor="#EEEEEE"><b>Elenco dei prodotti</b></td></tr>
<tr><td><b>Prodotto # 1</b> (10 euro)</td></tr>
<tr><td>
 <input type="text" name="p1" maxlength="3" value="1">
 <input type="button" value="Aggiungi" onclick="Aggiungi(1, 10)">
</td></tr>
<tr><td><b>Prodotto # 2</b> (20 euro)</td></tr>
<tr><td>
 <input type="text" name="p2" maxlength="3" value="1">
 <input type="button" value="Aggiungi" onclick="Aggiungi(2, 20)">
</td></tr>
<tr><td><b>Prodotto # 3</b> (30 euro)</td></tr>
<tr><td>
 <input type="text" name="p3" maxlength="3" value="1">
 <input type="button" value="Aggiungi" onclick="Aggiungi(3, 30)">
</td></tr>
</table>
</form>

<table align="center" width="300" border="1">
<tr><td bgcolor="#EEEEEE"><b>Elenco degli ordini</b></td></tr>
<%If Request.Cookies("ordini") = "" Then%>
<tr><td>Il tuo carrello è vuoto</td></tr>
<%Else%>
<tr><td>
<%
 With Response
  If Session("ordine1") <> "" Then
   .Write "Prodotto # 1 (" & Session("ordine1") & " euro)<br>"
  End If
  If Session("ordine2") <> "" Then
   .Write "Prodotto # 2 (" & Session("ordine2") & " euro)<br>"
  End If
  If Session("ordine3") <> "" Then
   .Write "Prodotto # 3 (" & Session("ordine3") & " euro)<br>"
  End If
 End With
%>
<b>Totale</b>
(<%=Session("ordine1") + Session("ordine2") + Session("ordine3")%>)
<hr>
<a href="carrello.asp?cancella=OK">Svuota</a>
</td></tr>
<%End If%>
</table>

</body>
</html>

Trattandosi di un'applicazione statica è semplice effettuare il controllo sui prodotti acquistati: nell'articolo avanzato vedremo come regolarci nel caso di un'applicazione di E-Commerce dinamica, gestita da un database.

Vediamo un'anteprima del carrello con degli ordini al suo interno

Eccoci giunti al file carrello.asp, vero cuore dell'applicazione. Vediamo il codice in attesa di commentare le sue fasi salienti singolarmente

<%@LANGUAGE = VBScript%>
<%
 Dim id, prezzo, qta
 id = Request.QueryString("id")
 prezzo = Request.QueryString("prezzo")
 qta = Request.QueryString("qta")

 If IsNumeric(id) And Isnumeric(prezzo) And IsNumeric(qta) Then
  Session("ordine" & id) = prezzo * qta
  Response.Cookies("ordini") = "OK"
 End If

 If Request.QueryString("cancella") = "OK" Then
  Session.Abandon
  Response.Cookies("ordini") = ""
 End If

 Response.Redirect "index.asp"
%>

Il codice si divide in quattro fasi, separate tra loro da una riga vuota. La prima fase prevede semplicemente il recupero, via querystring, dei parametri relativi all'ordine; la seconda fase verifica che i dati inseriti siano numerici e, a condizione soddisfatta, calcola l'importo dell'ordine

Session("ordine" & id) = prezzo * qta

La terza fase è relativa alla cancellazione degli ordini, distruggendo l'oggetto Session ed il cookie; quarta ed ultima fase, effettuiamo un redirect alla Homepage del carrello, mostrando a run-time gli ordini effettuati.