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

  1. #1
    Nouveau membre du Club Avatar de arwin
    Profil pro
    Inscrit en
    mars 2009
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 44
    Points : 32
    Points
    32
    Par défaut 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 : 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 + " €"
          }
        })
    }

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 094
    Points : 37 522
    Points
    37 522
    Par défaut
    Bonjour,
    tu supprimes un élément du DOM mais pas les données associées dans le panier.

    Nota : Une ID diot être UNIQUE !

  3. #3
    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
    38 767
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    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 : 38 767
    Points : 64 618
    Points
    64 618
    Billets dans le blog
    1
    Par défaut
    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.
    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 !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Nouveau membre du Club Avatar de arwin
    Profil pro
    Inscrit en
    mars 2009
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 44
    Points : 32
    Points
    32
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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

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

Discussions similaires

  1. Empêcher l'ajout ultérieur d'un produit dans un panier
    Par bahamut100 dans le forum Langage
    Réponses: 9
    Dernier message: 26/11/2008, 22h46
  2. [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, 23h17
  3. [Conception] Ajout des produits dans un panier
    Par ghyosmik dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 22/09/2006, 12h17
  4. [MySQL] Ajout d'un nouveau produit dans un panier
    Par ghyosmik dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 07/09/2006, 16h41
  5. Modifier la quantité d'un produit dans un panier
    Par budiste dans le forum Langage
    Réponses: 22
    Dernier message: 14/02/2006, 10h38

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