Come creare un carrello della spesa con JavaScript | ES6

Indice dei Contenuti

1. Introduzione
2. Creazione del carrello
3. Aggiunta dei prodotti al carrello
4. Aggiornamento del numero di unità
5. Rimozione dei prodotti dal carrello
6. Calcolo del totale e del numero di elementi nel carrello
7. Salvataggio del carrello nel localStorage

Creazione del Carrello

Ciao, oggi ti mostrerò come creare un carrello della spesa utilizzando JavaScript. Alla fine di questo tutorial, avremo un carrello nel quale aggiungere i prodotti selezionati. Sarà possibile incrementare o diminuire il numero di unità per ciascun prodotto e mostreremo anche il totale. Iniziamo!

Introduzione

Prima di iniziare, assicurati di iscriverti al canale e attivare le notifiche per ricevere tutti gli aggiornamenti sui nuovi video. Facciamo clic sul link nella descrizione per scaricare il template iniziale di partenza ed estraiamo i file sul desktop. Apriamo la cartella e vediamo i file che troveremo al suo interno: le icone utilizzate nel progetto, le immagini dei prodotti e il file app.js, nel quale lavoreremo durante il tutorial. Abbiamo anche il file index.html, nel quale troveremo il codice HTML che utilizzeremo per renderizzare i prodotti. Abbiamo anche un file products.js, che contiene un array di oggetti che rappresentano i prodotti disponibili nel carrello. Pensiamo a questi prodotti come se provenissero da un database. Prima di iniziare a scrivere il codice, dobbiamo collegare i nostri file JavaScript al nostro file HTML. Inizieremo cercando l'elemento "products" nel nostro file index.html utilizzando il metodo document.querySelector(). Successivamente, scorreremo l'array dei prodotti e useremo il metodo .forEach() per renderizzare i prodotti nella nostra interfaccia utente utilizzando un template HTML predefinito. Utilizzeremo il template HTML predefinito per ciascun prodotto e lo inseriremo all'interno dell'elemento "products" utilizzando l'attributo '.innerHTML'.

Aggiunta dei Prodotti al Carrello

Ora che abbiamo reso visibili i nostri prodotti, possiamo passare all'aggiunta dei prodotti selezionati al carrello. Aggiungeremo un evento "onclick" al pulsante "Aggiungi al carrello" di ogni prodotto, in modo tale che quando viene cliccato, venga chiamata una funzione chiamata "addToCart". Questa funzione accetterà l'ID del prodotto come parametro e utilizzerà l'ID per trovare il prodotto corrispondente nell'array dei prodotti. Una volta trovato il prodotto, lo aggiungeremo all'array del carrello utilizzando il metodo ".push()". Se il prodotto è già presente nel carrello, verrà visualizzato un messaggio di avviso. Aggiungeremo anche il numero di unità del prodotto al carrello. Una volta aggiunti i prodotti al carrello, aggiorneremo l'interfaccia utente visualizzando i prodotti nel carrello e il numero totale di prodotti nel carrello utilizzando il metodo ".forEach()" per scorrere l'array del carrello e il metodo ".innerHTML" per aggiornare il contenuto dell'elemento corrispondente nella pagina.

Aggiornamento del Numero di Unità

Ora che abbiamo aggiunto i prodotti al carrello, possiamo aggiornare il numero di unità dei prodotti. Aggiungeremo due pulsanti, "+" e "-", per consentire all'utente di aumentare o diminuire il numero di unità di un determinato prodotto nel carrello. Aggiungeremo l'evento "onclick" a ciascuno di questi pulsanti per chiamare la funzione "changeNumberOfUnits" e passeremo l'azione ("+" o "-") e l'ID del prodotto come parametri. All'interno della funzione "changeNumberOfUnits", utilizzeremo il metodo ".map()" per scorrere l'array del carrello e cercare il prodotto corrispondente all'ID fornito. Modificheremo il numero di unità del prodotto in base all'azione fornita ("+" o "-") e restituiremo l'array del carrello aggiornato. Aggiorneremo quindi l'interfaccia utente visualizzando il numero di unità aggiornato per ciascun prodotto nel carrello.

Rimozione dei Prodotti dal Carrello

Per consentire all'utente di rimuovere un prodotto dal carrello, aggiungeremo un'icona di cestino accanto a ciascun prodotto nel carrello. Aggiungeremo un evento "onclick" all'icona del cestino per chiamare la funzione "removeItemFromCart" e passeremo l'ID del prodotto come parametro. All'interno della funzione "removeItemFromCart", utilizzeremo il metodo ".filter()" per filtrare l'array del carrello e mantenerne solo gli elementi con un ID diverso da quello fornito. Aggiorneremo quindi l'array del carrello e l'interfaccia utente per riflettere la rimozione del prodotto.

Calcolo del Totale e del Numero di Elementi nel Carrello

Per calcolare il totale e il numero di elementi nel carrello, creeremo una funzione chiamata "renderSubtotal". All'interno di questa funzione, utilizzeremo il metodo ".reduce()" per calcolare il totale sommando il prezzo di ciascun prodotto moltiplicato per il numero di unità. Utilizzeremo anche il metodo ".reduce()" per calcolare il numero totale di elementi sommando il numero di unità di ciascun prodotto. Aggiorneremo quindi l'interfaccia utente visualizzando il totale e il numero di elementi nel carrello.

Salvataggio del Carrello nel Local Storage

Per salvare il carrello dell'utente nel local storage, utilizzeremo il metodo ".setItem()" dell'oggetto localStorage. Passeremo il nome del nostro carrello come chiave e il valore del carrello stesso come valore. Prima di salvare il carrello, lo convertiremo in una stringa JSON utilizzando il metodo "JSON.stringify()". Quando l'utente aggiorna la pagina, recupereremo il carrello dal local storage utilizzando il metodo ".getItem()". Se il carrello è presente nel local storage, lo assegneremo alla variabile "cart". In caso contrario, assegneremo un array vuoto a "cart".