Un carrello della spesa è una parte essenziale di qualsiasi sito di e-commerce. Consente ai clienti di conservare e acquistare prodotti.
In un'app di e-commerce Next.js, puoi utilizzare l'API Context e l'hook useReducer per creare un carrello. L'API di contesto semplifica la condivisione dei dati del carrello tra i componenti mentre useReducer gestisce lo stato del carrello.
Creazione della pagina del prodotto
Nella cartella delle pagine, crea un nuovo file chiamato Product.jsx che esegue il rendering di un singolo prodotto.
esportarepredefinitofunzioneProdotto({id, nome, prezzo}) {
ritorno (
{nome}</p>
{prezzo}</p>
Il componente del prodotto accetta l'ID, il nome e il prezzo di un prodotto e lo visualizza. Ha anche un pulsante "Aggiungi al carrello".
Quando un prodotto è già stato aggiunto al carrello, il pulsante dovrebbe passare a un pulsante "rimuovi dal carrello" e se un prodotto non è nel carrello, la pagina dovrebbe visualizzare il pulsante "Aggiungi al carrello".
Per implementare questa funzionalità, dovrai tenere traccia degli articoli nel carrello utilizzando l'API di contesto e l'hook useReducer.
Creazione di un carrello degli acquisti utilizzando l'API Context
L'API di contesto ti consente di condividere i dati tra diversi componenti senza dover passare oggetti di scena manualmente da genitore a figlio. Questi componenti possono essere la barra di navigazione, la pagina dei dettagli del prodotto o la pagina di pagamento.
Crea un nuovo file chiamato cartContext.js in una cartella chiamata contesto e crea il contesto.
importare { creaContesto } da"reagire";
esportarecost CartContext = createContext({
elementi: [],
});
CartContext accetta una matrice di elementi come valore predefinito.
Successivamente, crea il provider di contesto. Un provider di contesto consente ai componenti che utilizzano il contesto di sottoscrivere le modifiche di contesto.
In una nuova funzione chiamata cartProvider, aggiungi quanto segue:
esportarecost CartProvider = ({ bambini }) => {
ritorno<CarrelloContesto. Fornitore>{bambini}CarrelloContesto. Fornitore>;
};
Per tenere traccia degli articoli nel carrello, utilizzerai l'hook useReducer.
L'hook useReducer funziona come l'hook useState, tranne per il fatto che aiuta a gestire una logica di stato più complessa. Accetta una funzione di riduzione e lo stato iniziale. Restituisce lo stato corrente e una funzione dispatch che passa un'azione alla funzione reducer.
Crea una nuova funzione chiamata CartReducer e aggiungi il riduttore.
cost carrelloRiduttore = (stato, azione) => {
cost {tipo, payload} = azione;interruttore (tipo) {
caso"AGGIUNGERE":
ritorno {
...stato,
articoli: payload.items,
};caso"RIMUOVERE":
ritorno {
...stato,
articoli: payload.items,
};
predefinito:
gettarenuovoErrore("Nessun caso per quel tipo");
}
};
La funzione reducer comprende un'istruzione switch che aggiorna lo stato in base al tipo di azione. La funzione di riduzione del carrello ha azioni "AGGIUNGI" e "RIMUOVI" che aggiungono rispettivamente al carrello e rimuovono dal carrello.
Dopo aver creato la funzione reducer, usala nell'hook useReducer. Inizia creando la funzione CartProvider. Questa è la funzione che fornirà il contesto ad altri componenti.
esportarecost CartProvider = ({bambini}) => {
ritorno<CarrelloContesto. Fornitore>{bambini}CarrelloContesto. Fornitore>;
}
Quindi, crea l'hook useReducer.
esportarecost CartProvider = ({ bambini }) => {
cost [stato, spedizione] = useReducer (cartReducer, { elementi: [] });
ritorno<CarrelloContesto. Fornitore>{bambini}CarrelloContesto. Fornitore>;
};
La funzione dispatch è responsabile dell'aggiornamento dello stato del carrello, quindi modifica la funzione CartProvider per includere le funzioni che inviano i prodotti all'hook useReducer quando il carrello si aggiorna.
importare { createContext, useReducer } da"reagire";
esportarecost CartProvider = ({ bambini }) => {
cost [stato, spedizione] = useReducer (cartReducer, initialState);cost aggiungiAlCarrello = (Prodotto) => {
cost updatedCart = [...state.items, prodotto];spedizione({
tipo: "AGGIUNGERE",
carico utile: {
articoli: aggiornatoCarrello,
},
});
};cost removeFromCart = (id) => {
cost carrello aggiornato = state.items.filter(
(currentProduct) => currentProduct.id !== id
);spedizione({
tipo: "RIMUOVERE",
carico utile: {
articoli: aggiornatoCarrello,
},
});
};
ritorno<CarrelloContesto. Fornitore>{bambini}CarrelloContesto. Fornitore>;
};
La funzione addToCart aggiunge il nuovo prodotto ai prodotti esistenti e restituisce i prodotti aggiornati nell'oggetto payload della funzione dispatch. Analogamente, la funzione removeFromCart filtra l'elemento in base all'ID e restituisce l'elenco aggiornato.
È inoltre necessario restituire il valore prop nel provider CartContext.
esportarecost CartProvider = ({ bambini }) => {
cost [stato, spedizione] = useReducer (cartReducer, {
elementi: [],
});cost aggiungiAlCarrello = (Prodotto) => {};
cost removeFromCart = (id) => {};cost valore = {
articoli: state.items,
Aggiungi al carrello,
rimuoviDalCarrello,
};
ritorno<CarrelloContesto. Fornitorevalore={valore}>{bambini}CarrelloContesto. Fornitore>;
}
Il valore prop viene consumato tramite l'hook useContext.
Consumare il contesto del carrello
Finora hai creato il contesto del carrello e creato una funzione useReducer che aggiorna il carrello. Successivamente, utilizzerai il contesto del carrello nel componente del prodotto utilizzando l'hook useContext.
Inizia avvolgendo index.js, il componente principale, con il provider di contesto per rendere disponibili i valori di contesto nell'intera applicazione.
importare { FornitoreCarrello } da"../contesto/contesto carrello";
funzioneMiaApp({Componente, pageProps}) {
ritorno (
</CartProvider>
);
}
esportarepredefinito MiaApp;
Quindi importare l'hook useContext e il fornitore del contesto del carrello in Product.js
importare { usoContesto } da"reagire"
importare {Contesto carrello} da"../contesto/contesto carrello"esportarepredefinitofunzioneProdotto() {
cost {items, addToCart, removeFromCart} = useContext (CartContext)
ritorno (
<>{nome}</p>
{prezzo}</p>
La funzione del pulsante dipende dal fatto che l'articolo sia già nel carrello. Se un articolo esiste nel carrello, il pulsante dovrebbe rimuoverlo dal carrello e se un articolo non è già nel carrello, dovrebbe aggiungerlo. Ciò significa che devi tenere traccia dello stato dell'elemento utilizzando useEffect e useState. Il codice useEffect controlla se l'articolo è nel carrello dopo il rendering del componente mentre useState aggiorna lo stato dell'articolo.
cost [esiste, setEsiste] = useState(falso);
usaEffetto(() => {
cost inCart = oggetti.find((articolo) => oggetto.id id);
Se (nel carrello) {
setEsiste(VERO);
} altro {
setEsiste(falso);
}
}, [elementi, id]);
Ora, utilizzare il rendering condizionale per mostrare il pulsante in base allo stato esistente.
ritorno (
{nome}</p>
{prezzo}</p>
{
esiste
? <pulsanteal clic={() => removeFromCart (id)}>Rimuovi dal carrellopulsante>
: <pulsanteal clic={() => addToCart({id, name, price})}>Aggiungi al carrellopulsante>
}
</div>
)
Si noti che le funzioni del gestore onClick sono le funzioni removeFromCart e addToCart definite nel provider di contesto.
Aggiunta di più funzionalità al carrello
Hai imparato a creare un carrello della spesa utilizzando l'API di contesto e l'hook useReducer.
Anche se questa guida tratta solo funzionalità di aggiunta e rimozione, puoi utilizzare gli stessi concetti per aggiungere più funzionalità come la regolazione delle quantità di articoli nel carrello. La cosa cruciale è comprendere l'API di contesto e come utilizzare gli hook per aggiornare i dettagli del carrello.