Suppression produit dans un panier et mise à jour du total
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:
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 + " €"
}
})
} |
