Discussion :

[GCGraphics]

Bonjour,
j'espère que je poste ce message au bon endroit histoire de ne pas me faire taper sur les doigts par un modo .

Voilà, j'ai un petit soucis dans le code que je vais vous linker ci après, j'ai réussi à créer une page panier dynamique en récupérant l'id, la quantité et la couleur sélectionné par l'utilisateur dans le localStorage et je récupère les informations de noms, de prix et d'image + texte alternatif de mon API.

Je veux maintenant ajouter la possibilité de supprimer un article mais rien ne se passe, et la console me renvoie une erreur "undefined". Je suis là-dessus depuis hier, et malgré de nombreuses recherches (et révisions de cours), je n'arrive pas trouver de solutions.

J'espère que l'un d'entre vous pourra m'aider un peu, je ne veux pas d'une réponse toute faite, juste qu'on m'aiguille et qu'on m'explique ce qui créé cette erreur. Merci d'avance !

Code JavaScript :

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
// Récupère les données de mon stockage local
let canapLocalStorage = JSON.parse(localStorage.getItem("cart"));
console.log(canapLocalStorage);
 
//Fonction de mise à jour du panier du prix et de la quantité
function updateCart() {
  // Met à jour le stockage local
  localStorage.setItem("cart", JSON.stringify(canapLocalStorage));
}
 
canapLocalStorage.forEach((cartItem) => {
  fetch("http://localhost:3000/api/products/" + cartItem.idKanap)
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      //console.log(data);
      if (canapLocalStorage === null || canapLocalStorage == 0) {
        const positionEmptyCart = document.getElementById("cart__items");
        const emptyCart = `Votre panier est vide`;
        positionEmptyCart.innerHTML = emptyCart;
      } else {
        document.getElementById(
          "cart__items"
        ).innerHTML += `<article class="cart__item" data-id=${cartItem.idKanap} data-color="${cartItem.colorKanap}">
        <div class="cart__item__img">
            <img src=${data.imageUrl} alt=${data.altTxt}>
            <div class="cart__item__content">
                  <div class="cart__item__content__description">
                    <h2>${data.name}</h2>
                    <p>${cartItem.colorKanap}</p>
                    <p>${data.price} €</p>
                  </div>
                  <div class="cart__item__content__settings">
                    <div class="cart__item__content__settings__quantity">
                      <p>Qté : </p>
                      <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value=${cartItem.quantityKanap}>
                    </div>
                    <div class="cart__item__content__settings__delete">
                      <p class="deleteItem">Supprimer</p>
                    </div>
                  </div>
                </div>
        </article>`;
      }
    })
    .catch((error) => console.log("Erreur : " + error));
});
console.log(canapLocalStorage);
 
 
 
function deleteCartItem(){
  const deleteButtons = document.querySelectorAll(".deleteItem");
  deleteButtons.forEach((button) => {
    button.addEventListener("click", (event) => {
      const article = event.target.closest("article");
      const articleId = article.getAttribute("data-id");
      const articleColor = article.getAttribute("data-color")
 
      canapLocalStorage.forEach((item, index) => {
        if(item.idKanap === articleId && item.colorKanap === articleColor) {
          canapLocalStorage.splice(index,1);
 
          updateCart();
        }
      })
    })
  })
}
deleteCartItem();
console.log(deleteCartItem());

[Chou-ette]

Bonjour,


Donnez-nous le message d'erreur complet, il doit vous dire "bidule is undefined". C'est "bidule" qui va nous intéresser.

[GCGraphics]

Bonjour,

A part un "undefined" à la ligne 72 je n'ai rien de plus dans la console. On dirait que c'est fonction elle-même qui renvoie un "undefined" .
Même en cliquant sur le bouton "supprimer" sur la page, je n'ai aucune information supplémentaire...

Je poursuis mes recherches.

Merci pour ta réponse.

[SpaceFrog]

La fonction ne retourne rien ..
normal que tu récupères undefined

[GCGraphics]

De fait si, la fonction retournait bien quelque chose, mais elle n'était pas déclarée au bon endroit. Affaire classée. Merci à toutes et tous pour vos réponses !