Bonjour, j'ai un problème d'affichage des quantités de mes produits qui apparait lorsque le visiteur accède à sa page panier. Voici un exemple du problème :
Normalement, l'utilisateur peut choisir un produit à acheter qui va donc apparaitre dans sa page panier. Puis, il peut retourner une seconde fois dans sa page produit et rajouter une nouvelle fois le même produit, en choisissant une nouvelle quantité. A ce moment-là, la nouvelle quantité choisie doit se rajouter à l'ancienne quantité choisie. Par exemple, s'il s'agit la première fois une quantité de 50, et une seconde fois une quantité de 5, le panier doit afficher 55. Ou s'il choisit la première 4 et la deuxième fois 5, il doit normalement apparaitre 9. Mais systématiquement, mon panier colle les deux quantités choisies au lieu de les additionner.
Je ne comprends pas quelle partie de mon code peut causer ce problème, mais voici mon code relatif à l'augmentation des quantités depuis la page produit.
async function UpdateCart() {
//OneProduct est un objet récupéré avec les informations du produit notamment son id, sa couleur(coloration), et sa quantité(number) (instance de classe)
const OneProduct = await CreateProductForCart();
const AllProducts = localStorage.getItem('Allproducts');
const Cart = AllProducts ? JSON.parse(AllProducts) : [];
if (Cart.length == 0) {
Cart.push(OneProduct);
return Cart;
} else {
for (let CartParts of Cart) {
if (CartParts.id === OneProduct.id && CartParts.coloration === OneProduct.coloration) {
CartParts.number += OneProduct.number;
return Cart;
} else {
Cart.push(OneProduct);
return Cart;
}
}
}
}
async function UpdateStorage() {
const Cart = await UpdateCart();
localStorage.removeItem('Allproducts');
localStorage.setItem('Allproducts', JSON.stringify(Cart));
console.log("Le Storage s'est mis à jour.");
}
De plus, le même problème intervient dans ma page panier, à l'endroit où je cherche à afficher la quantité totale de tous les produits (les quantités de chaque produit se collent les uns derrière les autres), ce qui peut rapidement me donner des totaux extravagants.
J'ai également essayé d'enlever le 0 au début du total, mais sans résultat. Je ne comprends même pas pourquoi il apparait. Voici mon code qui doit afficher le total dans la page panier ainsi que le prix total :
let totalForarticles = [];
let numberofarticles = 0;
for (let T = 0; T < Cart.length; T++) {
let Totalpriceofarticles = Cart[T].price*Cart[T].number;
numberofarticles += Cart[T].number;
totalForarticles.push(Totalpriceofarticles);
}
const reducer = (accumulator, currentvalue) => accumulator + currentvalue;
const TotalPrice = totalForarticles.reduce(reducer, 0);
document.getElementById("totalPrice").innerHTML = TotalPrice / 100;
document.getElementById("totalQuantity").innerHTML = numberofarticles;
Bonjour lors de l'addition des valeurs pour obtenir une nouvelle quantité, tu effectues les additions sur des chaînes de texte, quand javascript doit faire une addition avec du texte il les "concatène" (les mais bout à bout) ce qui provoque ce bug d'affichage:
Il y a aussi un "raccourci" qui tire parti du transtypage automatique de javascript. Il suffit de soustraire 0.
Disons qu'on récupère la valeur contenue dans un input ayant pour id "monInput" et disons que dans mon exemple l'input contient "1" ( même si l'input est du type number, la valeur récupérée par JS sera du type String ) :
let inputValue = document.getElementById('monInput').value;
console.log(inputValue + 1); // Affiche 11
let inputNumericValue = document.getElementById('monInput').value - 0;
console.log(inputNumericValue + 1); // Affiche bien 2.
Bon, c'est une "bidouille", mais ça fonctionne.
Problème d'affichage des quantités de produit
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.