🛒 Création de la classe Panier

🧱 Structure de la classe Panier

Maintenant que notre classe Produit est prête, nous allons créer une classe Panier pour :

• Ajouter un produit
• Augmenter ou diminuer la quantité (➕ ➖)
• Supprimer un produit
• Afficher le contenu total et la somme des prix

Le panier contiendra une liste d’éléments, chacun représentant :

• Un Produit
• Une quantité choisie par l’utilisateur

📌 Interface interne : Élément du panier

📋 Copier le code

interface LignePanier {
produit: Produit;
quantite: number;
}

📦 Classe complète Panier

📋 Copier le code

class Panier {
private elements: LignePanier[] = [];

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

retirerProduit(produitId: number): void {
this.elements = this.elements.filter(p => p.produit.id !== produitId);
}

changerQuantite(produitId: number, operation: "plus" | "moins"): void {
const ligne = this.elements.find(p => p.produit.id === produitId);
if (!ligne) return;

if (operation === "plus") {
  ligne.quantite++;
} else if (operation === "moins" && ligne.quantite > 1) {
  ligne.quantite--;
} else {
  this.retirerProduit(produitId);
}
}

afficherPanier(): string {
if (this.elements.length === 0) return "🛒 Panier vide";

return this.elements.map(ligne => {
  return \`\${ligne.produit.nom} x \${ligne.quantite} = \${(ligne.produit.prix * ligne.quantite).toFixed(2)} €\`;
}).join("\\n");
}

totalPanier(): number {
return this.elements.reduce((total, ligne) => {
  return total + ligne.produit.prix * ligne.quantite;
}, 0);
}
}

🧠 Explication

• ajouterProduit : ajoute ou augmente la quantité si le produit existe déjà
• retirerProduit : supprime le produit totalement
• changerQuantite : permet les boutons ➕ ou ➖
• afficherPanier : affiche chaque ligne + total
• totalPanier : renvoie la somme totale du panier

✅ Exemple d’utilisation

📋 Copier le code

// Exemple avec Produit déjà défini précédemment
const clavier = new Produit(1, "Clavier", 49.99, 10);
const souris = new Produit(2, "Souris", 29.99, 5);

const monPanier = new Panier();

monPanier.ajouterProduit(clavier);
monPanier.ajouterProduit(clavier);
monPanier.ajouterProduit(souris);

monPanier.changerQuantite(2, "moins");

console.log(monPanier.afficherPanier());
console.log("Total : " + monPanier.totalPanier().toFixed(2) + " €");

📌 Résumé

• La classe Panier gère une liste d’articles et leurs quantités
• Les boutons ➕ ➖ sont simulés via changerQuantite()
• Le système est prêt à être affiché dans une interface utilisateur

🧭 Prochaine étape

Dans le chapitre suivant, nous allons commencer à intégrer un affichage **HTML dynamique** pour manipuler le panier via des boutons ➕ ➖ réels dans le navigateur.

Souhaites-tu passer au Chapitre 3 du Module 3 : Intégration du panier avec HTML + boutons interactifs ➕ ➖ ?