Discussion :

[arwin]

Bonjour,
je travail sur un exercice de site e-commerce en utilisant une API, je m'occupe que du front-end. Il s'agit d'un produit Z vendu en plusieurs modèles et chaque modèle peut avoir 1 ou plusieurs options. Une ligne de commande correspond à un modèle en quantité 1 ou plus et avec éventuellement différentes options. Tout marche sauf pour la suppression d'une ligne de commande (avec son sous-total) ainsi que le recalcul du total. Voilà mon code en espérant trouvez grâce à vous des idées pour débloquer la situation. Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
let panier = [] //contient les infos correspondant à l'id du produit ajoutée au panier
let products = [] //contient les couples id/option (défini par productAdded) des produits selelctionnés.
let sousTotal = []
let total = 0
let quantite = []
let values = []
 
/** Parcourir tous les couples identifiant/option stockés dans le navigateur */
let panierLengthParId = localStorage.length
console.log(panierLengthParId) // donne le nombre d'id différents même si un id contient +ieurs option ca ne compte que 1. Il faut donc aussi faire une boucle sur le nbre d'option de chaque id.
for (let i = 0; i < panierLengthParId; i++) {
  let id = localStorage.key(i) /* Récupère les id car le key de notre localStorage est id */
  let valuesId = JSON.parse(localStorage.getItem(id)) // récupère la VALUE correspondante à la KEY id : ici la VALUE est un tableau contenant les options
 
  values.push(valuesId)
 
  quantite.push(valuesId.length)
 
  fetch(`http://localhost:3000/api/products/${id}`)
    .then(resp => {
      return resp.json()
    })
    .then(respJson => {
      console.log(respJson)
      panier.push(respJson) //stocker les réponses dans la liste "panier"
 
      products.push(id) //
 
      let output = ''
      const elementParent = document.querySelector('#wrapper')
      const elementTotal = document.querySelector('#total')
 
      output += panier.map((produit, x) => { // je mape sur les differents id donc les differents produits. si j'ai 3 id donc 3 modèles différents du produit, alors x =0,1,2
        return (`
                    <tr class="ligneCommande">
                    <td id="photoUnitaire"><a href="details.html?id=${produit._id}"><img src="${produit.imageUrl}" alt="#" class="card-img-top">
                    </a></td>
                    <td id="modele">${produit.name}</td>
                    <td id="optionUnitaire">${values[x]}</td>
                    <td id="prixUnitaire">${produit.price/100}</td>
                    <td id="quantite">${quantite[x]}</td>
                    <td id="sousTotal">${quantite[x] * produit.price/100}</td>
                    <td class="text-center">
                    <button class="btn-del btn btn-danger">
                    <i class="fas fa-trash-alt"></i>
                    </button>  
                    </td>
                    </tr>
                    `)
      })
 
      sousTotal = panier.map((produit, x) => produit.price * quantite[x])
      total = sousTotal.reduce((acc, curr) => acc + curr)
      elementParent.innerHTML = output
      elementTotal.innerHTML = total / 100 + " €"
 
      let myArticle = document.querySelector(".ligneCommande");
      let sousTotalArticle = document.querySelector("#sousTotal").innerHTML
      let boutonSupprime = document.querySelector(".btn-del")
      boutonSupprime.addEventListener("click", supprimerArticle)
 
      function supprimerArticle() {
        myArticle.remove()
        calculer();
      }
 
      function calculer() {
 
        total = total - sousTotalArticle
        sousTotal = panier.map((produit, x) => produit.price * quantite[x])
        total = sousTotal.reduce((acc, curr) => acc + curr)
        elementParent.innerHTML = output
        elementTotal.innerHTML = total + " €"
      }
    })
}

[NoSmoking]

Bonjour,
tu supprimes un élément du DOM mais pas les données associées dans le panier.

Nota : Une ID diot être UNIQUE !

[SpaceFrog]

Pour ce genre d'opérations, il est préférable de faire les opérations sur le panier dans une variable de session coté serveur. C'est plus sûr, et les mises à jour d'affichage sont fiables car elle sont le reflet du panier qui est sur le serveur.

[arwin]

Bonjour,
tu supprimes un élément du DOM mais pas les données associées dans le panier.

Nota : Une ID diot être UNIQUE !

NoSmoking : tes 2 remarques sont pertinentes et m'ont permis d'avancer ... Un grand Merci Maître

SpaceFrog : le travail en front-end m'est imposé dans l'exercice. Mais je tiendrai compte de ta remarque pour le futur. Un grand Merci

Problème résolu en appliquant les 2 conseils de NoSmoking et en utilisant la fonction splice pour comparer les id du panier et les id sélectionnés pour la suppression puis un simple calcul pour mettre à jour le total.

Merci