Come creare un carrello per l'e-commerce client-side con JavaScript ed il sessionStorage

Short link

Il session storage è una delle caratteristiche del web storage introdotto con HTML5. In questo articolo ne vedremo un'applicazione pratica creando un carrello e-commerce completo utilizzando l'oggetto sessionStorage e jQuery.

Sessioni: PHP vs JavaScript

Per creare un carrello di e-commerce in PHP è necessario inizializzare una sessione utilizzando la funzione session_start(). Questo ci permette di passare i valori salvati dall'utente nel carrello da una pagina all'altra fino al checkout ed alla conferma di avvenuto pagamento.

Solitamente si utilizzano array associativi per riprodurre la struttura di un carrello (nome degli articoli, prezzo, quantità, eventuali sconti ecc.).

In JavaScript il procedimento è diverso: una sessione dura fino a quando l'utente non chiude il browser e non ha bisogno di essere inizializzata. Quello che si fa invece è scrivere coppie di chiavi e valori in cui memorizzare i dati.

sessionStorage.setItem( "total", 120 );

In questo caso la chiave total che contiene il valore 120 sarà disponibile per tutta la durata della sessione, a meno che non la rimuoviamo ( con sessionStorage.removeItem( "total" ) ) o svuotiamo anticipatamente la sessione ( tramite `sessionStorage.clear() ).

Passando di pagina in pagina reperiamo la nostra chiave in un modo molto semplice:

var total = sessionStorage.getItem( "total" );
console.log( total ); // 120

Ovviamente possiamo sempre aggiornare il suo valore usando il metodo sessionStorage.setItem():

var total = parseInt( sessionStorage.getItem( "total" ), 10 );
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem( "total", updatedTotal );

Ora la chiave total avrà come valore 240 dopo l'aggiornamento. Noterete che ho convertito il valore preso dal session storage utilizzando parseInt(). Questa è una caratteristica del web storage: tutti i valori memorizzati vengono salvati come stringhe.

A questo punto vi chiederete come sia possibile salvare valori complessi come gli oggetti JavaScript nello storage. Si può ottenere questo risultato convertendo i dati in formato JSON in scrittura e riconvertendoli in oggetti JavaScript in lettura.

var cart = {
  item: "Product 1",
                price: 35.50,
                qty: 2
};
var jsonStr = JSON.stringify( cart );
sessionStorage.setItem( "cart", jsonStr );
// ora cart è {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem( "cart" );
var cartObj = JSON.parse( cartValue );
// oggetto originale

Ovviamente per aggiornare l'oggetto dobbiamo ricrearlo o estenderlo e quindi usare nuovamente la procedura descritta poc'anzi.

Ora abbiamo compreso le basi teoriche del nostro progetto. È tempo di delineare le specifiche del nostro progetto.

Specifiche del progetto

Il progetto si basa su uno store online che vende vini. La particolarità della vendita online sta nel calcolo delle spese di spedizione associate ai vini.

Dato che i vini vengono spediti in casse, la quantità totale delle bottiglie acquistate — non la quantità associata al singolo vino — dovrà essere necessariamente un multiplo di 6.

Lo store effettua i pagamenti tramite PayPal, quindi allo scopo di testarne l'efficacia dobbiamo necessariamente creare per noi un'account di tipo Business sul sito per i test degli sviluppatori di PayPal.

Una volta registrati dovremo usare l'email associata al nostro account Business al fine di simulare correttamente la transazione con PayPal (che nel nostro caso verrà comunque effettuata sul sito di prova, anche se, come vedremo, è sufficiente cambiare l'email di riferimento e l'URL del form di PayPal con quelli standard per renderlo live ).

All'utente, oltre ad aggiungere prodotti al carrello, dovrà essere consentito di modificare il carrello aggiungendo o rimuovendo prodotti, cambiando la quantità dei prodotti e svuotando il carrello.

L'utente dovrà inoltre riempire il form canonico con le sue informazioni personali prima di essere reindirizzato su PayPal. In questa pagina dovrà essere presente la possibilità di avere un indirizzo per la spedizione ed uno per la fatturazione, consentendogli allo stesso tempo di specificare se l'indirizzo di fatturazione coincide con quello di spedizione. Prima dell'invio dei dati a PayPal dovrà essere presente una pagina riassuntiva con i dati inseriti ed il carrello finale con i prodotti ed il prezzo totale che comprenderà le spese di spedizione calcolate come abbiamo detto poc'anzi, ossia a multipli di 6.

Anteprima del risultato finale

In questo video potete vedere il funzionamento finale del carrello. Ho omesso la pagina di PayPal per evitare di mostrare i dati del mio account.

Codice sorgente

Potete trovare il codice sorgente che illustreremo nei prossimi articoli in questa repository su GitHub. Per provarlo è sufficiente sostituire il valore della proprietà paypalBusinessEmail dell'oggetto $.Shop con l'email del vostro account Business sulla sandbox di PayPal. Per migliori risultati vi consiglio di testarlo su un web server locale.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.