🛍️ Intégration HTML + Boutons Interactifs ➕ ➖

📦 HTML de base

Dans ce chapitre, nous allons connecter notre classe Panier à une interface HTML simple et fonctionnelle. Le but est de permettre à l’utilisateur de :

• voir les produits dans le panier,
• gérer les quantités avec des boutons ➕ ➖,
• voir le total mis à jour automatiquement.

📋 Copier le code

<div id="liste-produits"></div>
<p><strong>Total :</strong> <span id="total">0 €</span></p>

• #liste-produits servira à afficher dynamiquement le contenu du panier
• #total affichera le montant total du panier

🧠 Classe Produit (rappel simplifié en JavaScript)

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

  afficherInfos() {
    return \`\${this.nom} - \${this.prix} €\`;
  }
}

• Chaque produit possède un nom, prix, stock et une description
• afficherInfos() retourne une ligne descriptive pour affichage

🧱 Classe Panier avec méthode d'affichage dynamique

📋 Copier le code

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

  ajouterProduit(produit) {
    const ligne = this.elements.find(p => p.produit.id === produit.id);
    if (ligne) {
      ligne.quantite++;
    } else {
      this.elements.push({ produit, quantite: 1 });
    }
    this.actualiserAffichage();
  }

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

    if (operation === "plus") {
      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((total, l) => total + 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() ajoute ou incrémente un produit
• changerQuantite() gère les boutons ➕ et ➖
• actualiserAffichage() met à jour dynamiquement le HTML

🧪 Exemple d’utilisation

📋 Copier le code

const clavier = new Produit(1, "Clavier mécanique", 79.99, 10);
const souris = new Produit(2, "Souris gamer", 39.99, 5);

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

• On crée deux produits fictifs
• On les ajoute au panier avec des quantités différentes
• L’affichage se met automatiquement à jour grâce à actualiserAffichage()

📌 Résumé

• Les boutons ➕ et ➖ interagissent avec la classe Panier
• L’affichage HTML se met à jour dynamiquement
• Ce système est entièrement extensible avec des interactions plus avancées

🧭 Prochaine étape

Dans le prochain chapitre, nous allons : ajouter une vérification du stock pour empêcher d’ajouter plus d’unités que disponibles, et afficher un message d’alerte.

Souhaites-tu passer maintenant au Chapitre 4 du Module 3 : Gestion du stock et messages d’alerte ?