➕ Formulaire d’ajout de produit

🧾 0. Formulaire HTML

Dans ce chapitre, tu vas créer un formulaire HTML permettant à l’utilisateur de :

• Renseigner le nom, le prix, le stock et une description
• Créer un nouveau Produit dynamiquement
• L’ajouter automatiquement au Panier

📋 Copier le code

<form id="form-produit">
  <input type="text" id="nom" placeholder="Nom du produit" required />
  <input type="number" id="prix" placeholder="Prix (€)" step="0.01" required />
  <input type="number" id="stock" placeholder="Stock disponible" required />
  <input type="text" id="desc" placeholder="Description (facultative)" />
  <button type="submit">Ajouter le produit</button>
</form>

• Chaque champ correspond à une propriété du produit
• Le bouton submit déclenchera la création

📦 1. 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;
  }
}

🛒 2. Classe Panier (rappel)

📋 Copier le code

// ... La classe Panier est la même que celle des chapitres précédents

🧠 3. Script de traitement du formulaire

📋 Copier le code

let compteurId = 1000; // Pour générer des IDs uniques

document.getElementById("form-produit").addEventListener("submit", function (e) {
  e.preventDefault();

  const nom = document.getElementById("nom").value;
  const prix = parseFloat(document.getElementById("prix").value);
  const stock = parseInt(document.getElementById("stock").value);
  const desc = document.getElementById("desc").value;

  if (!nom || isNaN(prix) || isNaN(stock)) {
    alert("Veuillez remplir tous les champs obligatoires.");
    return;
  }

  const nouveauProduit = new Produit(compteurId++, nom, prix, stock, desc);
  monPanier.ajouterProduit(nouveauProduit);

  this.reset(); // Réinitialise le formulaire
});

• Empêche l’envoi classique du formulaire avec e.preventDefault()
• Crée un nouveau produit avec les données saisies
• Incrémente un identifiant unique pour éviter les doublons
• Ajoute le produit au panier via ajouterProduit()

🧪 4. Test avec panier vide

📋 Copier le code

// Initialiser panier
const monPanier = new Panier();

📌 Résumé

• Le formulaire permet une entrée utilisateur facile et intuitive
• Le panier se met à jour dynamiquement après chaque ajout
• Le champ ID est généré automatiquement en interne

🧭 Prochaine étape

Dans le prochain chapitre, nous allons ajouter un **système de sauvegarde locale du panier** via localStorage, pour que les produits restent même après un rechargement de la page.

Souhaites-tu passer au Chapitre 7 du Module 3 : Sauvegarde du panier avec localStorage ?