🗑️ Suppression d’un article avec bouton ❌

🧾 0. Zone d'affichage HTML

Dans ce chapitre, tu vas apprendre à :

• Ajouter un bouton ❌ Supprimer pour chaque ligne du panier
• Afficher une confirmation avant de supprimer
• Actualiser dynamiquement l'affichage

📋 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>

• #liste-produits : contiendra les produits avec bouton ❌
• #total : affichera la somme
• #alerte : affichera les messages

📦 1. Classe Produit (inchangée)

📋 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;
  }
}

Structure simple avec ID, nom, prix, stock et description.

🧱 2. Classe Panier (avec suppression manuelle)

📋 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) {
    const confirmation = confirm("Souhaitez-vous vraiment retirer ce produit ?");
    if (!confirmation) return;

    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>
          <button onclick="monPanier.retirerProduit(\${ligne.produit.id})">❌</button>
        </p>
      \`;
      zone.appendChild(div);
    });

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

• retirerProduit() : déclenche confirm() avant suppression
• ❌ dans l’interface appelle cette méthode via bouton HTML

🧪 3. Exemple de test

📋 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 claviers (stock 2) et une souris
• Le bouton ❌ permet de retirer un article après confirmation

📌 Résumé

• Un bouton ❌ est ajouté à chaque ligne produit
• Un confirm() empêche les suppressions accidentelles
• Le HTML se met à jour automatiquement après chaque suppression

🧭 Prochaine étape

Dans le prochain chapitre, nous allons ajouter un **formulaire HTML** pour permettre à l'utilisateur d’**ajouter ses propres produits personnalisés** au panier (avec nom, prix, stock, description).

Souhaites-tu passer au Chapitre 6 du Module 3 : Formulaire d’ajout personnalisé de produits ?