Séance 4 : Mise en place d'un panier

<button class="btn btn-primary ajoutJeu" data-id="{{ jeu.id }}" data-nom="{{ jeu.nom }}" data-prix="{{ jeu.prix }}">Ajouter au panier</button>

document.querySelectorAll('.ajoutJeu').forEach(function(button) {
    button.addEventListener('click', function() {
        // Récupération des données du jeu
        let id = button.getAttribute('data-id');
        let nom = button.getAttribute('data-nom');
        let prix = button.getAttribute('data-prix');

        // Ajout du jeu au panier
        ajouterJeu(id, nom, prix);
    });
});

function ajouterJeu(id, nom, prix) {
    // Récupération du panier
    let panier = JSON.parse(localStorage.getItem('panier')) || [];

    // Vérification si le jeu est déjà dans le panier
    let jeu = panier.find(j => j.id == id);
    if (jeu) {
        jeu.quantite++;
    } else {
        panier.push({ id: id, nom: nom, prix: prix, quantite: 1 });
    }

    // Enregistrement du panier
    localStorage.setItem('panier', JSON.stringify(panier));
}

<div data-gb-custom-block data-tag="block">

    <h1>Panier</h1>

    <table class="table">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prix</th>
                <th>Quantité</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody id="panier">
        </tbody>
    </table>

</div>

//dans app.js
document.addEventListener('DOMContentLoaded', function() {
    // Récupération du panier
    // détecter si un élément avec l'id panier existe, si oui appeler la fonction afficherPanier
    if (document.getElementById('panier')) {
        afficherPanier();
    }
});

// dans panier.js

function afficherPanier() {
    // Récupération du panier
    let panier = JSON.parse(localStorage.getItem('panier')) || [];

    // Affichage du panier
    let panierElement = document.getElementById('panier');
    panierElement.innerHTML = '';
    panier.forEach(function(jeu) {
        let tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${jeu.nom}</td>
            <td>${jeu.prix} €</td>
            <td>${jeu.quantite}</td>
            <td>${jeu.prix * jeu.quantite} €</td>
        `;
        panierElement.appendChild(tr);
    });
}