Tutorial carrello spesa JavaScript per principianti
Benvenuti a tutti al mio video su come codificare un carrello della spesa utilizzando solo JavaScript puro. Qui a destra abbiamo il progetto finale di ciò che programmeremo in questo video. Abbiamo questi articoli con un pulsante per aggiungerli al carrello e qui sotto abbiamo il nostro carrello. Se clicchiamo su "Aggiungi al carrello", verrà aggiunto un articolo al carrello e verrà aggiornato il prezzo totale. Aumentare la quantità aumenterà anche il prezzo, diminuire la quantità lo diminuirà e rimuoverla ci consentirà di rimuovere l'articolo dal carrello. Se proviamo ad aggiungere lo stesso articolo al carrello più volte, ci verrà detto che abbiamo già aggiunto questo articolo al carrello, quindi non possiamo farlo di nuovo. E se clicchiamo su "Acquista" qui sotto, ci verrà detto grazie per l'acquisto e tutti gli articoli verranno rimossi dal carrello, simulando un acquisto. Se vi state unendo solo a questo video, tutto il codice per creare gli stili per questa pagina, così come l'HTML, può essere trovato nei video collegati nella descrizione o nelle schede informative nell'angolo. Quindi iniziamo con la codifica effettiva di ciò che abbiamo qui aprendo il nostro file store.js.================================================
🛒 Come Codificare un Carrello della Spesa con JavaScript Puro
Benvenuti a tutti al mio video su come codificare un carrello della spesa utilizzando solo JavaScript puro. In questo video, ti guiderò passo dopo passo nel processo di creazione di un carrello della spesa funzionante utilizzando il solo JavaScript, senza l'ausilio di librerie o framework esterni.
Vantaggi di usare JavaScript puro per il carrello della spesa
Prima di immergerci nel codice, vorrei sottolineare alcuni dei vantaggi di utilizzare JavaScript puro per la creazione di un carrello della spesa:
-
Libertà e flessibilità: Utilizzando JavaScript puro, avrai pieno controllo su ogni aspetto del tuo carrello della spesa, senza dipendere da librerie o framework esterni.
-
Leggerezza: JavaScript puro è molto leggero rispetto ad altre librerie e framework, il che significa che il tuo sito web si caricherà più velocemente e offrirà ai visitatori un'esperienza utente migliore.
-
Personalizzazione totale: Con JavaScript puro, puoi personalizzare il carrello della spesa secondo le tue esigenze specifiche, senza dover fare i conti con limitazioni imposte da librerie o framework.
Ora che abbiamo esaminato i vantaggi di utilizzare JavaScript puro per il nostro carrello della spesa, passiamo alla creazione effettiva del carrello. Inizieremo con la creazione di un nuovo file nel nostro progetto chiamato store.js.
1. Preparazione del file HTML
Prima di iniziare a scrivere il codice JavaScript, è importante creare la struttura HTML necessaria per supportare il nostro carrello della spesa. Assicuriamoci di avere i seguenti elementi nel nostro file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Carrello della Spesa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Carrello della Spesa</h1>
</header>
<main>
<div class="products">
<!-- Aggiungere qui gli articoli disponibili -->
</div>
<div class="cart">
<h2>Il mio carrello</h2>
<ul class="cart-items">
<!-- Gli articoli selezionati verranno aggiunti qui -->
</ul>
<p class="total">Totale: €0.00</p>
<button class="checkout">Checkout</button>
<button class="clear-cart">Svuota Carrello</button>
</div>
</main>
<script src="store.js"></script>
</body>
</html>
Nel nostro file HTML abbiamo un'intestazione standard con un titolo e un collegamento al nostro file CSS. Successivamente, abbiamo un'intestazione con il titolo "Carrello della Spesa" e un'area principale divisa in due sezioni: "Prodotti disponibili" e "Il mio carrello".
Nella sezione "Prodotti disponibili", posizioneremo gli articoli che possono essere aggiunti al carrello. Nella sezione "Il mio carrello", mostreremo gli articoli selezionati, il totale e due bottoni: "Checkout" e "Svuota Carrello".
2. Creazione del carrello della spesa
Ora che abbiamo impostato la struttura HTML di base, possiamo iniziare a creare il nostro carrello della spesa utilizzando JavaScript puro.
// File: store.js
// Selezioniamo gli elementi necessari dal nostro HTML
const productsContainer = document.querySelector('.products');
const cartItemsContainer = document.querySelector('.cart-items');
const cartTotalElement = document.querySelector('.total');
const checkoutButton = document.querySelector('.checkout');
const clearCartButton = document.querySelector('.clear-cart');
// Inizializziamo il nostro carrello vuoto
let cartItems = [];
let cartTotal = 0;
// Funzione per aggiungere un articolo al carrello
function addToCart(item) {
// Verifichiamo se l'articolo è già presente nel carrello
const existingItem = cartItems.find((cartItem) => cartItem.id === item.id);
if (existingItem) {
// Se l'articolo è già presente, aggiorniamo solo la quantità
existingItem.quantity++;
} else {
// Se l'articolo non è presente, lo aggiungiamo al carrello
cartItems.push({ ...item, quantity: 1 });
}
// Aggiorniamo il totale del carrello
cartTotal += item.price;
// Aggiorniamo l'interfaccia grafica
updateCartUI();
}
// Funzione per rimuovere un articolo dal carrello
function removeFromCart(itemId) {
// Troviamo l'indice dell'articolo da rimuovere
const itemIndex = cartItems.findIndex((cartItem) => cartItem.id === itemId);
if (itemIndex !== -1) {
// Rimuoviamo l'articolo dal carrello
const removedItem = cartItems.splice(itemIndex, 1)[0];
// Sottraiamo il prezzo dell'articolo dal totale del carrello
cartTotal -= removedItem.price * removedItem.quantity;
// Aggiorniamo l'interfaccia grafica
updateCartUI();
}
}
// Funzione per aggiornare l'interfaccia grafica del carrello
function updateCartUI() {
// Svuotiamo l'HTML del carrello
cartItemsContainer.innerHTML = '';
// Ricostruiamo l'HTML del carrello in base agli articoli presenti
cartItems.forEach((cartItem) => {
const itemHTML = `
<li>
<span>${cartItem.name}</span>
<span>${cartItem.quantity} x €${cartItem.price.toFixed(2)}</span>
<button onclick="removeFromCart('${cartItem.id}')">Rimuovi</button>
</li>
`;
cartItemsContainer.innerHTML += itemHTML;
});
// Aggiorniamo il totale del carrello
cartTotalElement.textContent = `Totale: €${cartTotal.toFixed(2)}`;
// Aggiungiamo o rimuoviamo la classe "empty" al carrello in base ai suoi elementi
cartItemsContainer.classList.toggle('empty', cartItems.length === 0);
}
// Funzione per effettuare il checkout
function checkout() {
// Effettuiamo l'acquisto (implementazione personalizzata)
console.log('Acquisto effettuato!');
// Svuotiamo il carrello
cartItems = [];
cartTotal = 0;
// Aggiorniamo l'interfaccia grafica
updateCartUI();
}
// Funzione per svuotare il carrello
function clearCart() {
// Svuotiamo il carrello
cartItems = [];
cartTotal = 0;
// Aggiorniamo l'interfaccia grafica
updateCartUI();
}
// Aggiungiamo i listener agli elementi del DOM necessari
productsContainer.addEventListener('click', (event) => {
const clickedButton = event.target;
if (clickedButton.classList.contains('add-to-cart')) {
const item = {
id: clickedButton.dataset.id,
name: clickedButton.dataset.name,
price: parseFloat(clickedButton.dataset.price),
};
addToCart(item);
}
});
checkoutButton.addEventListener('click', checkout);
clearCartButton.addEventListener('click', clearCart);
Ora abbiamo il nostro carrello della spesa completamente funzionante. Possiamo aggiungere articoli al carrello facendo clic sul pulsante "Aggiungi al Carrello". Possiamo anche rimuovere articoli dal carrello facendo clic sul pulsante "Rimuovi". Il totale del carrello viene aggiornato automaticamente ogni volta che aggiungiamo o rimuoviamo un articolo.
Inoltre, ci sono pulsanti per eseguire il "Checkout" e "Svuota Carrello". L'implementazione di queste funzionalità dipende dalle tue esigenze specifiche. Nel nostro esempio, abbiamo semplicemente stampato un messaggio di conferma quando viene effettuato il checkout e svuotato il carrello quando viene fatto clic su "Svuota Carrello".
Ricorda, questo è solo un esempio di come creare un carrello della spesa utilizzando solo JavaScript puro. Puoi personalizzare ulteriormente il codice in base alle tue esigenze specifiche e aggiungere funzionalità aggiuntive come opzioni di prodotto, calcoli di spedizione, metodi di pagamento e molto altro ancora.
Spero che questo ti abbia fornito una buona introduzione su come creare un carrello della spesa con JavaScript puro. Buona codifica!🛒
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
