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 totaleL'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;La struttura HTML dei prodotti
Per creare una vetrina di prodotti, basta utilizzare un elemento HTML contenitore (ad esempio un <div>) con classe simpleCart_shelfItem per ogni articolo da inserire. All'interno di ogni contenitore è possibile inserire vari elementi (campi) che da un lato servono a mostrare visivamente all'utente varie informazioni sul prodotto (nome, prezzo, pulsante add to cart, etc), dall'altro consentono di passare i loro valori innerHTML per l'utilizzo e la memorizzazione nel carrello. Affinché questo avvenga, ad ogni campo deve essere associata una classe nella forma "item_ [nome del campo]". Il frammento di codice HTML necessario a visualizzare un prodotto è molto esplicativo:
<div class="simpleCart_shelfItem">
<h3 class="item_name">Navy Firefox T-Shirt</h3>
<img src="images/t-shirt.jpg" />
<p>Size: <select name="select" class="item_size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</p>
<strong class="item_price">€10.71</strong>
<input type="button" class="item_add" value="add to cart" /> </div>Il sistema delle classi è molto comodo perché permette di personalizzare ogni elemento con una propria regola di stili CSS. In più è anche flessibile, perché di fatto consente di creare liberamente etichette ad hoc per veicolare e salvare nel carrello tutti i valori che sono necessari al nostro negozio. Ampia libertà di scelta nel tipo di tag segnaposto: ad esempio, è possibile abilitare l'acquirente alla scelta della taglia tramite l'inserimento di una <select> (item_Size), mentre per specificare il prezzo può essere sufficente uno <strong> con classe item_price.
Il pulsante aggiungi al carrello è rappresentato dalla classe predefinita item_add; anche in questo caso, non è obbligatorio utilizzare un <input type="button">, un semplice collegamento ipertestuale avrebbe ugualmente adempiuto allo scopo. Alla pressione del pulsante, lo script cattura i valori inseriti negli elementi con le opportune classi assegnate e li memorizza in un cookie, da cui si attingono i dati necessari a popolare il riepilogo e i calcoli del carrello.
Visualizzazione del totale
Per visualizzare il calcolo del totale, basta inserire da qualche parte nella pagina un tag contenitore vuoto con classe simpleCart_total, sarà aggiornato automaticamente da Simplecart(js). Ecco un elenco delle informazioni che è possibile visualizzare tramite delle classi predefinite dallo sviluppatore:
<span class="simpleCart_quantity"></span>
// stampa la quantità dei prodotti nel carrello
<span class="simpleCart_taxRate"></span>
// stampa la percentuale d'imposta
<span class="simpleCart_taxCost"></span>
// stampa l'importo totale dell'imposta
<span class="simpleCart_shippingCost"></span>
// stampa l'importo totale delle spese di spedizione
<span class="simpleCart_total"></span>
// stampa il subtotale del carrello senza tasse e spese di spedizione
<span class="simpleCart_finalTotal"></span>
// stampa il totale del carrello dopo l'aggiunta di tasse e spese di spedizioneRiepilogo del carrello
Per visualizzare un riepilogo dettagliato dei prodotti inseriti nel carrello è necessario inserire nel codice della pagina un div contenitore che Simplecart(js) si occuperà di popolare con i dati memorizzati nel cookie: in questo caso la classe identificativa necessaria è simpleCart_items.
<div class="simpleCart_items"></div>In questo contenitore verrano dinamicamente inseriti tramite Javascript tutti gli elementi precedentemente specificati nella variabile di configurazione simpleCart.cartHeaders. Per una più agevole comprensione, è possibile visualizzare la struttura HTML generata dallo script utilizzando il DOM inspector di Safari o Firefox; il codice seguente è il frammento HTML generato da Simplecart(js) nella pagina dell'esempio:
<div class="simpleCart_items">
<div class="cartHeaders">
<div class="itemName">Name</div>
<div class="itemSize">Size</div>
<div class="itemPrice">Price</div>
<div class="itemdecrement">decrement</div>
<div class="itemQuantity">Quantity</div>
<div class="itemincrement">increment</div>
<div class="itemremove">remove</div>
<div class="itemTotal">Total</div>
</div>
<div class="itemContainer">
<div class="itemName">Navy Firefox T-Shirt</div>
<div class="itemSize">Small</div>
<div class="itemPrice">€10.71</div>
<div class="itemdecrement"><a href="javascript:;" onclick="simpleCart.items['c6'].decrement();">-</a></div>
<div class="itemQuantity">1</div>
<div class="itemincrement"><a href="javascript:;" onclick="simpleCart.items['c6'].increment();">+</a></div>
<div class="itemremove"><a href="javascript:;" onclick="simpleCart.items['c6'].remove();">Remove</a></div>
<div class="itemTotal">€10.71</div>
</div>
</div>Il div contenitore con classe cartHeaders può essere considerato come l'intestazione di una immaginaria tabella, le cui righe di contenuti sono costituite da uno o più div con classe itemContainer, a secondo della quantità di prodotti inseriti nel carrello.E in effetti, grazie agli stili CSS associati nell'esempio, il riepilogo del carrello assume un "look" decisamente tabellare.
Per aggiungere nella pagina il pulsante di acquisto, che redirige l'utente sul sito di Paypal per effettuare il pagamento dei prodotti acquistati, è disponibile una classe predefinita da apporre al tag utilizzato: simpleCart_checkout. Ugualmente, la classe simpleCart_empty permette l'utilizzo di un pulsante con funzionalità svuota carrello.
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>
<a href="javascript:;" class="simpleCart_empty">Empty</a>Considerazioni finali e download
Se Simplecart(js) è perfetto per allestire velocemente un piccolo negozio online di poche pretese, non è invece indicato per la gestione di un grande magazzino di prodotti ed elevati flussi di vendite. In questo caso, disponendo di adeguate cognizioni in ambito PHP e Mysql, meglio valutare soluzioni più complete ed affidabili (per rimanere in ambito open-source, i vari Magento, OpenCart, OsCommerce, Prestashop...).
Purtoppo inoltre, Simplecart(js) non è un perfetto esempio di unobtrusive scripting; basandosi interamente su Javascript e cookie, il carrello non funziona con gli script e i cookie disabilitati. Buona invece la resa cross-browser.
Volendo, Simplecart(js) si presta bene a una profonda modifica delle sue modalità di utilizzo: infatti dispone di comode API che consentono di disporre di vari metodi e di estendere molte funzionalità (leggere la documentazione ufficiale): è possibile riscrivere le modalità di calcolo delle spese di spedizione, o modificare la modalità di checkout, ad esempio predisponendo l'invio di una email al venditore con i dati di acquisto (qui una versione).
In fondo c'è un ottimo spunto per lo sviluppo di un proprio carrello che integra le funzionalità Ajax di Simplecart(js) con una tecnologia server-side a sostituzione del cookie Javascript.
L'esempio è disponibile per il download, completo di file HTML, CSS e Javascript.
