Un panier d'achat est un élément essentiel de tout site de commerce électronique. Il permet aux clients de stocker et d'acheter des produits.
Dans une application de commerce électronique Next.js, vous pouvez utiliser l'API de contexte et le crochet useReducer pour créer un panier. L'API de contexte simplifie le partage des données du panier entre les composants tandis que useReducer gère l'état du panier.
Création de la page produit
Dans le dossier pages, créez un nouveau fichier appelé Product.jsx qui affiche un seul produit.
exporterdéfautfonctionProduit({identifiant, nom, prix}) {
retour (
{nom}</p>
{prix}</p>
Le composant de produit accepte l'ID, le nom et le prix d'un produit et l'affiche. Il dispose également d'un bouton "Ajouter au panier".
Lorsqu'un produit est déjà ajouté au panier, le bouton doit se transformer en bouton "retirer du panier" et si un produit n'est pas dans le panier, la page doit afficher le bouton "Ajouter au panier".
Pour implémenter cette fonctionnalité, vous devrez garder une trace des articles dans le panier en utilisant l'API de contexte et le crochet useReducer.
Création d'un panier d'achat à l'aide de l'API contextuelle
L'API de contexte vous permet de partager des données entre différents composants sans avoir à transmettre manuellement les accessoires du parent à l'enfant. Ces composants peuvent être la barre de navigation, la page de détails du produit ou la page de paiement.
Créez un nouveau fichier appelé cartContext.js dans un dossier appelé context et créez le contexte.
importer { créerContexte } depuis"réagir";
exporterconstante CartContext = createContext({
articles: [],
});
CartContext prend un tableau d'éléments comme valeur par défaut.
Ensuite, créez le fournisseur de contexte. Un fournisseur de contexte permet aux composants qui consomment le contexte de s'abonner aux changements de contexte.
Dans une nouvelle fonction appelée cartProvider, ajoutez ce qui suit :
exporterconstante Fournisseur de panier = ({ enfants }) => {
retour<CartContext. Fournisseur>{enfants}CartContext. Fournisseur>;
};
Pour garder une trace des articles dans le panier, vous utiliserez le crochet useReducer.
Le crochet useReducer fonctionne comme le crochet useState sauf qu'il permet de gérer une logique d'état plus complexe. Il accepte une fonction de réduction et l'état initial. Il renvoie l'état actuel et une fonction de répartition qui transmet une action à la fonction de réduction.
Créez une nouvelle fonction appelée CartReducer et ajoutez le réducteur.
constante cartReducer = (état, acte) => {
constante { type, charge utile } = action ;changer (taper) {
cas"AJOUTER":
retour {
...État,
éléments: payload.items,
};cas"RETIRER":
retour {
...État,
éléments: payload.items,
};
défaut:
lancernouveauErreur("Aucun cas pour ce type");
}
};
La fonction reducer comprend une instruction switch qui met à jour l'état en fonction du type d'action. La fonction de réduction de panier a des actions « AJOUTER » et « SUPPRIMER » qui ajoutent au panier et suppriment du panier respectivement.
Après avoir créé la fonction reducer, utilisez-la dans le crochet useReducer. Commencez par créer la fonction CartProvider. C'est la fonction qui fournira le contexte aux autres composants.
exporterconstante Fournisseur de panier = ({enfants}) => {
retour<CartContext. Fournisseur>{enfants}CartContext. Fournisseur>;
}
Ensuite, créez le crochet useReducer.
exporterconstante Fournisseur de panier = ({ enfants }) => {
constante [état, expédition] = useReducer (cartReducer, { articles: [] });
retour<CartContext. Fournisseur>{enfants}CartContext. Fournisseur>;
};
La fonction dispatch est responsable de la mise à jour de l'état du panier. Modifiez donc la fonction CartProvider pour inclure des fonctions qui distribuent les produits au crochet useReducer lorsque le panier est mis à jour.
importer { createContext, useReducer } depuis"réagir";exporterconstante Fournisseur de panier = ({ enfants }) => {
constante [état, envoi] = useReducer (cartReducer, initialState);constante addToCart = (produit) => {
constante updateCart = [...state.items, produit] ;expédition({
taper: "AJOUTER",
charge utile: {
articles: panier mis à jour,
},
});
};constante removeFromCart = (identifiant) => {
constante panier mis à jour = state.items.filter(
(currentProduct) => currentProduct.id !== id
);expédition({
taper: "RETIRER",
charge utile: {
articles: panier mis à jour,
},
});
};
retour<CartContext. Fournisseur>{enfants}CartContext. Fournisseur>;
};
La fonction addToCart ajoute le nouveau produit aux produits existants et renvoie les produits mis à jour dans l'objet de charge utile de la fonction dispatch. De même, la fonction removeFromCart filtre l'élément par ID et renvoie la liste mise à jour.
Vous devez également renvoyer la valeur prop dans le fournisseur CartContext.
exporterconstante Fournisseur de panier = ({ enfants }) => {
constante [état, expédition] = useReducer (cartReducer, {
articles: [],
});constante addToCart = (produit) => {};
constante removeFromCart = (identifiant) => {};constante valeur = {
articles: état.articles,
Ajouter au panier,
removeFromCart,
};
retour<CartContext. Fournisseurvaleur={valeur}>{enfants}CartContext. Fournisseur>;
}
La valeur prop est consommée via le crochet useContext.
Consommer le contexte du panier
Jusqu'à présent, vous avez créé le contexte du panier et créé une fonction useReducer qui met à jour le panier. Ensuite, vous utiliserez le contexte du panier dans le composant de produit à l'aide du crochet useContext.
Commencez par envelopper index.js, le composant supérieur, avec le fournisseur de contexte pour rendre les valeurs de contexte disponibles dans toute l'application.
importer { Fournisseur de panier } depuis"../context/cartContext";fonctionMonApp({ Composant, pageProps }) {
retour (
</CartProvider>
);
}
exporterdéfaut MonApp ;
Importez ensuite le crochet useContext et le fournisseur de contexte de panier dans Product.js
importer { useContext } depuis"réagir"
importer { CartContext } depuis"../context/cartContext"exporterdéfautfonctionProduit() {
constante {éléments, addToCart, removeFromCart} = useContext (CartContext)
retour (
<>{nom}</p>
{prix}</p>
La fonction du bouton dépend si l'article est déjà dans le panier. Si un article existe dans le panier, le bouton doit le supprimer du panier et si un article n'est pas déjà dans le panier, il doit l'ajouter. Cela signifie que vous devez suivre l'état de l'élément en utilisant useEffect et useState. Le code useEffect vérifie si l'article est dans le panier après le rendu du composant tandis que useState met à jour l'état de l'article.
constante [existe, setExists] = useState(FAUX);useEffet(() => {
constante inCart = items.find((article) => article.id id);
si (dans un chariot) {
setExists(vrai);
} autre {
setExists(FAUX);
}
}, [articles, identifiant]);
Maintenant, utiliser le rendu conditionnel pour afficher le bouton en fonction de l'état existant.
retour (
{nom}</p>
{prix}</p>
{
existe
? <boutonsur clic={() => removeFromCart (id)}>Retirer du panierbouton>
: <boutonsur clic={() => addToCart({id, nom, prix})}>Ajouter au panierbouton>
}
</div>
)
Notez que les fonctions de gestionnaire onClick sont les fonctions removeFromCart et addToCart définies dans le fournisseur de contexte.
Ajouter plus de fonctionnalités au panier
Vous avez appris à créer un panier d'achat à l'aide de l'API contextuelle et du crochet useReducer.
Même si ce guide ne couvrait que les fonctionnalités d'ajout et de suppression, vous pouvez utiliser les mêmes concepts pour ajouter d'autres fonctionnalités, telles que l'ajustement des quantités d'articles du panier. La chose cruciale est de comprendre l'API de contexte et comment utiliser les crochets pour mettre à jour les détails du panier.
