📦 Gestion du Stock + Alerte Utilisateur

🧾 Structure HTML d’affichage du panier

Dans ce chapitre, nous allons :

• ❌ Empêcher d’ajouter plus d’unités qu’il n’y en a en stock
• 🔔 Afficher un message d’alerte en cas de dépassement
• ✅ Garder les boutons ➕ ➖ pour ajuster la quantité

📋 Copier le code

<div id="liste-produits"></div>
<p><strong>Total :</strong> <span id="total">0 €</span></p>
<div id="alerte" style="color: red; font-weight: bold;"></div>

• <div id="liste-produits"> : contiendra dynamiquement les lignes du panier (produit + boutons ➕ ➖)
• <span id="total"> : affichera le total actualisé du panier
• <div id="alerte"> : affichera un message d’erreur si le stock est dépassé

🧱 1. Définir la classe Produit

📋 Copier le code

class Produit {
  constructor(id, nom, prix, stock, description) {
    this.id = id;
    this.nom = nom;
    this.prix = prix;
    this.stock = stock;
    this.description = description;
  }
}

• id : identifiant unique
• nom : nom du produit
• prix : prix unitaire
• stock : quantité maximum disponible
• description : texte optionnel (non utilisé ici)

🧱 2. Classe Panier avec limite de stock

📋 Copier le code

class Panier {
  constructor() {
    this.elements = [];
  }

  ajouterProduit(produit) {
    const ligne = this.elements.find(p => p.produit.id === produit.id);
    const alerte = document.getElementById("alerte");
    alerte.textContent = "";

    if (ligne) {
      if (ligne.quantite >= produit.stock) {
        alerte.textContent = \`❌ Stock insuffisant pour \${produit.nom}\`;
        return;
      }
      ligne.quantite++;
    } else {
      if (produit.stock < 1) {
        alerte.textContent = \`❌ Produit \${produit.nom} en rupture de stock\`;
        return;
      }
      this.elements.push({ produit, quantite: 1 });
    }
    this.actualiserAffichage();
  }

  changerQuantite(id, operation) {
    const ligne = this.elements.find(p => p.produit.id === id);
    if (!ligne) return;

    const alerte = document.getElementById("alerte");
    alerte.textContent = "";

    if (operation === "plus") {
      if (ligne.quantite >= ligne.produit.stock) {
        alerte.textContent = \`❌ Stock max atteint pour \${ligne.produit.nom}\`;
        return;
      }
      ligne.quantite++;
    } else if (operation === "moins") {
      if (ligne.quantite > 1) {
        ligne.quantite--;
      } else {
        this.retirerProduit(id);
        return;
      }
    }

    this.actualiserAffichage();
  }

  retirerProduit(id) {
    this.elements = this.elements.filter(p => p.produit.id !== id);
    this.actualiserAffichage();
  }

  total() {
    return this.elements.reduce((t, l) => t + l.produit.prix * l.quantite, 0);
  }

  actualiserAffichage() {
    const zone = document.getElementById("liste-produits");
    const totalZone = document.getElementById("total");
    zone.innerHTML = "";

    if (this.elements.length === 0) {
      zone.innerHTML = "<p>Panier vide</p>";
      totalZone.textContent = "0 €";
      return;
    }

    this.elements.forEach(ligne => {
      const div = document.createElement("div");
      div.innerHTML = \`
        <p>
          <strong>\${ligne.produit.nom}</strong> - \${ligne.produit.prix.toFixed(2)} € × \${ligne.quantite}
          <button onclick="monPanier.changerQuantite(\${ligne.produit.id}, 'moins')">➖</button>
          <button onclick="monPanier.changerQuantite(\${ligne.produit.id}, 'plus')">➕</button>
        </p>
      \`;
      zone.appendChild(div);
    });

    totalZone.textContent = this.total().toFixed(2) + " €";
  }
}

• ajouterProduit() : empêche de dépasser le stock
• changerQuantite() : ➕ ➖ avec vérification du stock
• alerte.textContent : affiche un message si dépassement
• actualiserAffichage() : rafraîchit le HTML

🧪 3. Exemple d’utilisation

📋 Copier le code

const clavier = new Produit(1, "Clavier", 49.99, 2);
const souris = new Produit(2, "Souris", 29.99, 1);

const monPanier = new Panier();
monPanier.ajouterProduit(clavier);
monPanier.ajouterProduit(clavier);
monPanier.ajouterProduit(souris);

• Ajoute deux fois le clavier (stock = 2, c’est ok)
• Ajoute une fois la souris (stock = 1)
• Si on réappuie ➕ pour la souris → message d’alerte

📌 Résumé

• ✅ Stock vérifié avant toute action
• ✅ Message d’erreur affiché en cas de dépassement
• ✅ Expérience utilisateur guidée, sans erreur silencieuse

🧭 Prochaine étape

Dans le chapitre suivant, nous ajouterons un **bouton ❌** pour supprimer un produit manuellement, avec une **confirmation de l’utilisateur**.

Souhaites-tu passer au Chapitre 5 du Module 3 : Suppression manuelle d’un article avec bouton ❌ + confirmation ?