Créez un panier d'achat avec JavaScript | ES6

🛒 Construire un panier d'achat en utilisant JavaScript

Introduction

Dans ce tutoriel, nous allons apprendre à construire un panier d'achat en utilisant JavaScript. Nous allons commencer par afficher les produits disponibles, puis permettre à l'utilisateur d'ajouter ces produits à son panier et de les gérer. Nous allons également prendre en compte la conservation du panier dans le stockage local pour que les produits restent disponibles même après un rafraîchissement de la page.

Table des matières

1. Introduction
2. Affichage des produits
3. Ajout de produits au panier
4. Gestion du nombre d'unités
5. Suppression de produits du panier
6. Conservation du panier dans le stockage local
7. Conclusion

2. Affichage des produits

Avant de pouvoir ajouter des produits au panier, nous devons d'abord afficher les produits disponibles à l'utilisateur. Nous avons une liste de produits stockés dans un tableau d'objets, chaque objet représentant un produit avec ses propriétés telles que l'identifiant, le nom, le prix, etc. Nous allons utiliser JavaScript pour parcourir ce tableau et afficher chaque produit sur la page web.

Pour afficher les produits, nous allons créer une fonction renderProducts() qui va prendre le tableau de produits comme argument et utiliser la méthode map() pour parcourir chaque élément du tableau et générer un élément HTML pour chaque produit. Nous allons ensuite insérer cet élément HTML dans la page web en utilisant la propriété innerHTML d'un élément de la page.

Voici le code pour la fonction renderProducts() :

function renderProducts(products) {
    const productsElement = document.querySelector('.products');

    const renderedProducts = products.map(product => {
        return `
            <div class="product">
                <img src="${product.image}" alt="${product.name}">
                <h3>${product.name}</h3>
                <p>${product.price}€</p>
                <button onclick="addToCart(${product.id})">Ajouter au panier</button>
            </div>
        `;
    });

    productsElement.innerHTML = renderedProducts.join('');
}

3. Ajout de produits au panier

Maintenant que nous avons affiché les produits disponibles, nous devons permettre à l'utilisateur d'ajouter ces produits à son panier. Nous allons ajouter un bouton "Ajouter au panier" à côté de chaque produit affiché et utiliser un event listener pour détecter le clic sur ce bouton. Lorsque l'utilisateur clique sur ce bouton, nous allons appeler une fonction addToCart() qui prendra l'identifiant du produit en tant que paramètre.

La fonction addToCart() va chercher le produit correspondant dans le tableau de produits en utilisant l'identifiant fourni. Ensuite, nous allons vérifier si le produit existe déjà dans le panier en utilisant la méthode find() pour rechercher un élément dans le tableau du panier avec le même identifiant. Si le produit existe déjà, nous allons augmenter le nombre d'unités pour ce produit de 1. Sinon, nous allons ajouter le produit au panier avec un nombre d'unités initial de 1.

Voici le code pour la fonction addToCart() :

function addToCart(productId) {
    const product = products.find(product => product.id === productId);

    const existingCartItem = cart.find(item => item.id === productId);
    if (existingCartItem) {
        existingCartItem.units += 1;
    } else {
        cart.push({ ...product, units: 1 });
    }

    updateCart();
}

4. Gestion du nombre d'unités

En plus d'ajouter des produits au panier, nous devons également permettre à l'utilisateur de gérer le nombre d'unités de chaque produit dans son panier. Nous allons afficher chaque produit dans le panier avec des boutons "+" et "-" à côté du nombre d'unités. Lorsque l'utilisateur clique sur le bouton "+", nous allons augmenter le nombre d'unités de 1 pour ce produit. Lorsque l'utilisateur clique sur le bouton "-", nous allons diminuer le nombre d'unités de 1 pour ce produit. Si le nombre d'unités atteint 0, nous allons supprimer le produit du panier.

Nous allons ajouter des event listeners à ces boutons et appeler une fonction changeUnits() lorsque l'utilisateur clique sur l'un de ces boutons. La fonction changeUnits() prendra l'action ("plus" ou "minus") et l'identifiant du produit en tant que paramètres. Ensuite, nous allons rechercher le produit correspondant dans le panier et effectuer la modification appropriée du nombre d'unités. Si le nombre d'unités atteint 0, nous allons supprimer le produit du panier en utilisant la méthode filter().

Voici le code pour la fonction changeUnits() :

function changeUnits(action, productId) {
    const item = cart.find(item => item.id === productId);

    if (item) {
        if (action === "plus") {
            item.units += 1;
        } else if (action === "minus") {
            if (item.units > 1) {
                item.units -= 1;
            } else {
                cart = cart.filter(item => item.id !== productId);
            }
        }
    }

    updateCart();
}

5. Suppression de produits du panier

En plus de pouvoir gérer le nombre d'unités, nous devons également permettre à l'utilisateur de supprimer des produits individuels de son panier. Pour ce faire, nous allons ajouter un bouton "Supprimer" à côté de chaque produit affiché dans le panier. Lorsque l'utilisateur clique sur ce bouton, nous allons appeler une fonction removeFromCart() qui prendra l'identifiant du produit en tant que paramètre.

La fonction removeFromCart() va rechercher le produit correspondant dans le panier en utilisant l'identifiant fourni, puis supprimer l'élément correspondant du tableau du panier en utilisant la méthode filter().

function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    updateCart();
}

6. Conservation du panier dans le stockage local

Nous voulons que les produits ajoutés au panier restent disponibles même si l'utilisateur rafraîchit la page. Pour ce faire, nous allons sauvegarder le tableau du panier dans le stockage local chaque fois que nous le mettons à jour.

Lorsque nous mettons à jour le panier, nous allons appeler une fonction saveCartToLocalStorage() pour sauvegarder le panier dans le stockage local. Cette fonction utilisera la méthode setItem() du stockage local pour stocker le tableau du panier. Nous allons également utiliser JSON.stringify() pour convertir le tableau en une chaîne JSON avant de le stocker.

function saveCartToLocalStorage() {
    localStorage.setItem('cart', JSON.stringify(cart));
}

Au chargement de la page, nous allons également appeler une fonction getCartFromLocalStorage() pour récupérer le panier à partir du stockage local, le convertir en tableau et le mettre à jour si nécessaire. Cette fonction utilisera la méthode getItem() du stockage local pour récupérer la chaîne JSON du panier, puis utilisera JSON.parse() pour la convertir en tableau.

function getCartFromLocalStorage() {
    const savedCart = localStorage.getItem('cart');

    if (savedCart) {
        cart = JSON.parse(savedCart);
    }
}

Enfin, nous allons également appeler saveCartToLocalStorage() à chaque fois que nous mettons à jour le panier en utilisant updateCart().

7. Conclusion

Félicitations ! Vous avez maintenant construit un panier d'achat fonctionnel en utilisant JavaScript. Vous pouvez maintenant afficher les produits disponibles, ajouter des produits au panier, gérer le nombre d'unités et supprimer des produits du panier. De plus, grâce à la conservation du panier dans le stockage local, les produits ajoutés resteront disponibles même après un rafraîchissement de la page. Vous pouvez continuer à développer cette fonctionnalité en ajoutant des fonctionnalités supplémentaires telles que la gestion des quantités en stock, le calcul du total, etc.

Nous espérons que ce tutoriel vous a été utile et que vous avez appris de nouvelles choses. N'hésitez pas à le partager avec vos amis et à l'aimer. Merci de nous avoir suivi et à bientôt !