Simplecart(js): un carrello della spesa con Javascript e PayPal
di: Filippo Buratti 13 Dicembre 2010
Simplecart(js) è una piccola libreria Javascript (16 kb in versione compressa), rilasciata con licenza open-source, che permette di inserire in qualsiasi pagina web un semplice carrello della spesa utilizzando Ajax e i cookie, senza ricorrere a database e linguaggi lato server. Per l'installazione base non sono richieste particolari conoscenze di scripting, basta fare attenzione al markup HTML richiesto e al comodo uso di attributi di classe sui vari elementi con cui lo script gestisce le funzionalità del carrello. Simplecart(js) include anche il supporto a due gateway di pagamento tramite carta di credito, Paypal (impostato di default) e il meno diffuso Google Checkout. Tra le altre caratteristiche, la possibilità di impostare la valuta (dollari, euro, sterline...), il valore dell'IVA (tax rates) e le spese di spedizione.
Abbiamo predisposto un esempio dimostrativo utilizzando alcuni prodotti del Mozilla Store, vediamo come funziona.
Configurazione e codice Javascript
Il codice Javascript necessario per l'utilizzo di Simplecart(js) è veramente minimo, basta piazzare lo script nel tag <head> della pagina e settare alcune variabili di configurazione:
<script type="text/javascript" src="simpleCart.js"></script> <script type="text/javascript"> simpleCart.email = "email@venditore.ext"; simpleCart.checkoutTo = PayPal; simpleCart.currency = EUR; simpleCart.taxRate = 0.00; simpleCart.shippingFlatRate = 15.00; simpleCart.cartHeaders = ["Name" , "Size", "Price" , "decrement" , "Quantity", "increment", "remove", "Total" ]; </script>
Per personalizzare lo script e adattarlo alle proprie esigenze basta cambiare delle semplici impostazioni: innanzitutto, è necessario sostituire l'indirizzo email (simpleCart.email) con quello dell'account Paypal che si vuole utilizzare per ricevere i pagamenti. Il parametro currency permette di cambiare la valuta, ampio il supporto alle diverse monete: USD (i dollari sono il valore di default), GBP, EUR, AUD, CAD, CHF, etc.
Tramite la variabile taxRate è possibile impostare il valore percentuale dell'imposta o IVA da calcolare sul prezzo di ogni prodotto: nel caso del nostro esempio questo valore è uguale a zero, come nel vero negozio di Mozilla il prezzo indicato nei prodotti è quello finale, già comprensivo dell'imposta.
Per l'aggiunta dei costi di spedizione, sono disponibili tre possibilità:
simpleCart.shippingFlatRate =15.00; //aggiunge un importo forfettario di spedizione per l'intero ordine simpleCart.shippingQuantityRate = 5.00; //aggiunge un costo di spedizione di 5,00 per ogni prodotto nel carrello simpleCart.shippingTotalRate = 0.05; //aggiunge un costo di spedizione in percentuale del costo totale
L'ultima variabile utilizzata nel codice del nostro esempio (simpleCart.cartHeaders) è costituita da un array di elementi che consentono di personalizzare la composizione del riepilogo del carrello, che viene costruito interamente in Javascript e iniettato nella pagina attraverso i metodi del DOM. L'ordine, la composizione e il numero dei campi può variare a piacere, a secondo delle informazioni disponibili per ogni prodotto. Facoltativo è l'utilizzo di alcuni campi predefiniti per l'inserimento dei pulsanti di rimozione prodotto (remove) o per la variazione della quantità (increment, decrement).
Una nota a margine nel caso di utilizzo del metodo di checkout fornito da google, Google Checkout: non richiede il settaggio dell'indirizzo email, bensì quello di un identificativo dell'account venditore:
simpleCart.merchantId = "118575326044237"; simpleCart.checkoutTo = GoogleCheckout;
Ultimi articoli JavaScript
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |