Un carrello della spesa con SimpleCart
Pagina 1 di 4
In molti siti internet, soprattutto ed ovviamente quelli di e-commerce ma anche di altro genere, è possibile acquistare i prodotti direttamente on-line.
In questo articolo vi mostrerò come è possibile realizzare un semplice carrello della spesa utilizzando la libreria SimpleCart(js).
Questa libreria è open-source e fa uso solamente di Javascript e non necessita per funzionare di alcun linguaggio lato server ne tantomeno di database, in quanto per memorizzare i prodotti selezionati nel carrello si appoggia solamente sui cookie.
L'utilizzo della libreria è molto semplice e tramite pochissimi parametri ed i giusti markup HTML è possibile ottenere un ottimo shopping cart virtuale. La libreria, inoltre, offre nativamente supporto a due tra i più importanti metodi di pagamento tramite carta di credito quali PayPal e Google Checkout. Tra le varie feature, SimpleCart consente di personalizzare la valuta (euro, dollaro, etc), l'IVA (taxes rates) e le spese di spedizione.
Configurazione
Vediamo ora come poter sviluppare il nostro carrello della spesa.
Innanzitutto dobbiamo includere la libreria SimpleCart all'interno della nostra pagina web:
<script type="text/javascript" src="simpleCart.js"></script>Poi passiamo ad impostare i nostri parametri di configurazione, come ad esempio:
<script type="text/javascript"> simpleCart.checkoutTo = PayPal; //metodo di pagamento scelto simpleCart.email = "tuaemail@tuosito.it"; //email PayPal simpleCart.currency = EUR; //valuta da utilizzare simpleCart.taxRate = 0.20; //tasse simpleCart.shippingFlatRate = 10.00; //spese di spedizioni simpleCart.cartHeaders = ["Name", "Size", "Price", "decrement", "Quantity", "increment", "remove", "Total"]; </script>
I parametri visti sopra permettono di personalizzare il carrello adattandolo alle nostre specifiche esigenze.
Il primo paramentro che abbiamo inserito è il metodo di pagamento: abbiamo impostato PayPal, anche se in realtà non era necessario in quanto è quello predefinito. Oltre PayPal è possibile selezionare anche Google Checkout, ma in questo caso non è previsto l'inserimento dell'indirizzo email ma bensì l'identificatore del proprio account:
simpleCart.checkoutTo = GoogleCheckout; simpleCart.merchantId = "111111111111111";
Sempre ripercorrendo l'esempio, abbiamo inserito Euro come valuta da utilizzare e il 20% di tasse (a simboleggiare l'IVA vigente nel nostro paese).
Un altro parametro impostato sono le spese di spedizione; a tal proposito SimpleCart permette di differire tra 3 tipi di spese di spedizioni:
simpleCart.shippingFlatRate = 10.00; //importo per l'intero ordine simpleCart.shippingQuantityRate = 3.00; //importo per ogni prodotto simpleCart.shippingTotalRate = 0.05; //importo percentuale su costo totale
L'ultimo parametro inserito nel nostro codice di esempio sono, invece, i cartHeaders, ovvero un array che permette di personalizzare il riepilogo del carrello (i prodotti selezionati dall'utente, il costo totale, etc).
Nel nostro esempio abbiamo scelto di visualizzare il nome, la taglia, il prezzo, la quantità, etc.
