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

Version imprimable

1 pièce(s) jointe(s)

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

Pièce jointe 604613

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
 
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

10/09/2021, 11h53
NoSmoking
Bonjour,

Citation:

Voici ce que j'ai essayé mais ça ne fonctionne pas.

ta logique n'est pas bonne lorsque que tu écris
Code:

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.

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:

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');
    }
});

Même soucis de logique
Code:

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 !

10/09/2021, 15h36
SpaceFrog

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 ...