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 :

Shooping list : stopper ajout d'article si stock épuisé


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Points : 64
    Points
    64
    Par défaut Shooping list : stopper ajout d'article si stock épuisé
    Bonjour, J'ai créé un panier d'achat pour lequel il y a un maximum d'article que le client peut acheter. J'ai fixé le nombre d'article à 25.

    Si le client sélectionne plus de 25 fois le même article, je souhaite stopper l'ajout de cet article, et donc bloquer l'affichage à 25.

    Mais dans mon code l'affichage va au delà de 25 malgré ma condition ...


    Voila à quoi ça ressemble, lorsque je clique sur le "+" j'ajoute 1 à chaque fois

    Nom : shopping.png
Affichages : 69
Taille : 2,0 Ko

    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
     
    const shoppingList = [{
            product: 'headphone',
            quantity: 25,
            price: 2999
        },
        {
            product: 'earphone',
            quantity: 28,
            price: 110
        },
        {
            product: 'speakers',
            quantity: 14,
            price: 98
        }
    ];
     
     
     
    add.addEventListener('click', function() {
        if (shoppingList[0]) {
     
            // On ajoute un produit à chaque clique
            items.textContent++;
     
     
            // On enlève à chaque fois une quantité du produit
            shoppingList[0].quantity--;
            console.log(shoppingList[0].quantity);
     
            if (shoppingList[0].quantity === 0) {
              // ICI stopper l'ajout
             // items.textContent === 25, soit le maximum possible
            }
     
     
            // On stocke le prix total en fonction du nombre d'article choisi
            const totalPrice = parseInt(price.textContent) + shoppingList[0].price;
     
            // Le prix affiché correspond au nombre de produit choisi
            price.textContent = totalPrice;
     
     
            numberOfProducts.textContent = 'x' + items.textContent;
            numberOfProducts.style.color = '#000';
     
     
            headphoneMarkTwoImg.style.display = 'block';
            product.textContent = 'xx99 mk ii';
        }
    });
    Voici ce que j'ai essayé mais ça ne fonctionne pas.

    Merci pour votre aide

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 990
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 990
    Points : 44 151
    Points
    44 151
    Par défaut
    Bonjour,
    Voici ce que j'ai essayé mais ça ne fonctionne pas.
    ta logique n'est pas bonne lorsque que tu écris
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        if (shoppingList[0]) {
            // On ajoute un produit à chaque clique
            items.textContent++;
    il ne te faut ajouter un produit que si la quantité est supérieure à o pas avant.

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2020
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2020
    Messages : 119
    Points : 64
    Points
    64
    Par défaut
    Merci pour la réponse, en effet la logique était simple.

    Cependant, lorsque je veux réduire les articles à zéro, cela descend à -1 et j'ai mon message d'alerte. Du coup je ne peux plus réaugmenter car je sors de ma condition de > à 0 .

    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
     
    add.addEventListener("click", function() {
        console.log(shoppingList[0].quantity)
        if (shoppingList[0].quantity > 0 && shoppingList[0].quantity <= 25) {
            // On ajoute un produit à chaque clique
            items.textContent++;
     
            // On enlève à chaque fois une quantité du produit
            shoppingList[0].quantity--;
     
            if (shoppingList[0].quantity === 0) {}
     
            // On multiplie le nombre de produits disponbile par son prix
            const totalPrice = parseInt(price.textContent) + shoppingList[0].price;
            // Le prix affiché correspond au nombre de produit choisi
            price.textContent = totalPrice;
     
            // price.textContent = totalPrice;
            numberOfProducts.textContent = "x" + items.textContent;
            numberOfProducts.style.color = "#000";
     
            headphoneMarkTwoImg.style.display = "block";
            product.textContent = "xx99 mk ii";
        } else {
     
            alert("Vous ne pouvez plus ajouter ce produit");
        }
    });
     
    remove.addEventListener("click", function() {
        console.log(shoppingList[0].quantity)
        if (shoppingList[0].quantity >=  0 && shoppingList[0].quantity <= 25) {
            items.textContent--;
            const totalPrice = parseInt(price.textContent) - shoppingList[0].price;
            price.textContent = totalPrice;
     
            // price.textContent = totalPrice;
            numberOfProducts.textContent = "x" + items.textContent;
            numberOfProducts.style.color = "#000";
            shoppingList[0].quantity++;
            console.log(shoppingList[0].quantity);
     
            headphoneMarkTwoImg.style.display = "block";
            product.textContent = "xx99 mk ii";
        } else {
            alert('La somme de vos articles ne peut être inférieur à zéro');
        }
    });

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 990
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 990
    Points : 44 151
    Points
    44 151
    Par défaut
    Même soucis de logique
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    remove.addEventListener("click", function() {
        console.log(shoppingList[0].quantity)
        if (shoppingList[0].quantity >=  0 && shoppingList[0].quantity <= 25) {
            items.textContent--;
    il ne te faut supprimer un produit que si la quantité est inférieure à 25, pas inférieure ou égale !

  5. #5
    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 638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 638
    Points : 66 667
    Points
    66 667
    Billets dans le blog
    1
    Par défaut
    Par curiosité, il y a un ajax qui réserve les produits sur le serveur sur l'ajout au panier ?
    Car le temps de valider le panier il se peut que la quantité restante ait été prise pas un autre user ...
    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 !

Discussions similaires

  1. [AC-2003] Ajout d'articles dans une liste déroulante
    Par ortiz dans le forum IHM
    Réponses: 0
    Dernier message: 14/08/2009, 16h04
  2. Réponses: 9
    Dernier message: 01/12/2005, 16h19
  3. Réponses: 14
    Dernier message: 19/10/2004, 13h58

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