IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Suppression de produit.


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2023
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Alpes de Haute Provence (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2023
    Messages : 3
    Par défaut Suppression de produit.
    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());

  2. #2
    Membre éclairé Avatar de Chou-ette
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2018
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juin 2018
    Messages : 57
    Par défaut
    Bonjour,


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

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2023
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Alpes de Haute Provence (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2023
    Messages : 3
    Par défaut
    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.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    La fonction ne retourne rien ..
    normal que tu récupères undefined
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2023
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Alpes de Haute Provence (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2023
    Messages : 3
    Par défaut
    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 !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Suppression produit dans un panier et mise à jour du total
    Par arwin dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 11/01/2021, 09h40
  2. [PrestaShop] Suppression automatique d'un produit vendu
    Par nogir dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 09/10/2015, 21h06
  3. Erreur lors de la suppression d'un produit
    Par jmbinformatique dans le forum Odoo (ex-OpenERP)
    Réponses: 3
    Dernier message: 16/04/2014, 16h17
  4. [eCommerce] Suppression de produit dans un panier
    Par sayes1 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 6
    Dernier message: 29/01/2008, 22h17
  5. suppression produit avec même nom
    Par betaphp dans le forum Langage SQL
    Réponses: 18
    Dernier message: 29/11/2005, 22h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo