Calculer le mombre total d'articles dans mon panier

Version imprimable

bonjour a tous

j'ai trouve un bon de commande sur le net
mais je suis confronte a un petit problème je souhaiterais connaître le nombre total d article dans le panier et afficher le total sur une autre page html ou se trouve le formulaire

La variable qui m intéresse est

Code:

panierArray[i].quantite

qui est crée pour chaque numéro d article et a l'intérieur se trouve le nombre d article pour cet article

donc imaginons que j'ai article 1 avec comme quantité commandée 3
article 2 avec comme quantité commandée 5
article 3 avec comme quantité commandée 22
je souhaiterais pouvoir afficher 30

je vous donne le code car je ne vois pas tres bien comment m y prendre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
    + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + " euro</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
         //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      +  "</div>";
      count++;
 
      console.log(panierArray[i]);
 
        }

13/01/2022, 08h06
SpaceFrog

Pas très compliqué ...

Tu as une boucle sur le contenu du panier ..

Code:

for(var i in panierArray)

puis pour chaque article contenu dans le panier tu as

Code:

panierArray[i].quantite
13/01/2022, 08h11
flexi2202

Merci pour la reponse
je suis débutant de chez débutant en javascript

cela je l avais remarque en effet mais alors je dois compter le nombre de i
13/01/2022, 08h34
SpaceFrog
Tout dépend de si tu veux le nombre de produits différents ou le total d'articles

Si c'est le nombre de produits tu l'a déja avec count.

Si c'est le total du nombre d'articles ti dois rajouter un compteur DANS la boucle sur i pour sommer les quantités
Code:

1 2 3 4 5 6 7 var countart=0; for(var i in panierArray) { .../... count++; countart += panierArray[i].quantite; // somme des unités d'articles
Après cela dépend si les unités de vente des articles sont compatibles entre elles ( pièces, mètres, kilos ...)

Un grand merci pour ce code

comme je suis nul en javascript je me suis inspiré d un code que j'ai trouvé et que j'ai finalement par comprendre plus ou moins son fonctionnement
il y a donc deux pages un pages html avec le bon de commande qui affiche les différentes informations comme la ristourne , le prix total ; les frais d envois ect...
quelque chose de basique
et j aurais donc souhaiter dans cette page ajouter le total de tous les paniers
donc si j ai l article avec 5 comme quantité
l article b avec comme quantité 7
avoir comme total 12 qui s affiche sur ma page html

je pense donc que ton morceau de code effectue bien ce travail mais une fois que j'ai cette valeur countart

je peux faire comment pour la passer html

je suppose que comme pour le reste de cette manière

Code:

document.getElementById('countart').innerHTML=countart;

voici a fonction complète de la page panier .js qui gère ce panier et son affichage

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
function afficherpanier() {
  var panierArray = MonPanier.listpanier();
  var output = "";
  var countart=0;
  for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
    + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + " euro</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
         //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      +  "</div>";
      count++;
countart += panierArray[i].quantite; 
 
              }
  $('.show-panier').html(output);
 
  if (Livraison == 3)
  {
     // % du prix total total correspondant au prix de la livraison
const cases = document.querySelectorAll('input[name="choix_livraison"]');
//const cases = document.querySelectorAll('input[name="ajout");
for (const x of cases) {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;
//console.log(panierArray[i].quantite );
 
let prix_et_livraison = (( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
//document.getElementById('amount').value = prix_et_livraison ;
$('.total-panier').html(prix_et_livraison.toFixed(2));
document.getElementById('remise').innerHTML = "<div class='row'><div class='col'></div><div class='col'></div><div class='col'></div><div class='col'style ='background-color: #eab551;text-align:center;'>Montant ristourne si disponible</div><div class='col' style ='background-color: #eab551;text-align:center;'>-" + MonPanier.totalpanier()*Poucentage_Livraison_opposse + " euros</div> </div>";
document.getElementById('nouveau_prix').innerHTML = "<div class='row' style ='margin-bottom:5px;'><div class='col'></div><div class='col'></div><div class='col'></div><div class='col'style ='background-color: #79ff94;text-align:center;'>Nouveau prix apres la remise</div><div class='col' style ='background-color: #79ff94;text-align:center;'>" + (MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse)) + " euros</div> </div>";
document.getElementById('livraison-detail').innerHTML = "<div class='row' style ='margin-bottom:5px;'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") </div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison +" euro(s)</div></div>";
document.getElementById('frais-fixe').innerHTML = "<div class='row' style ='margin-bottom:5px;'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + Forfait_Livraison + "  " +" euro</div></div>";
break;
  }
  }
 
  }
 
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(0));
  }
 
  $('.total-panier-modal').html(MonPanier.totalpanier());
  $('.total-quantite').html(MonPanier.totalquantite());
  if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0))
  {
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
  }
  else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (MonPanier.totalquantite() != 0))
  {
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok;
  }
  else if (Qte_Minimum == 1)
  {
    document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut;  
  }
  else if (Qte_Minimum == 0)
  {
document.getElementById('qte_minimum_report').innerHTML = "";
  }  
}

13/01/2022, 09h32
flexi2202

j' ai essaye de cette manière mais cela n affiche rien

dans le panier j'ai ajouter cette ligne dans ma fonction

Code:

document.getElementById('countart').innerHTML = "<div class='row' style ='margin-bottom:5px;'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>nombre article total </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + countart + " " +" euro</div></div>";

dans mon html j'ai ajouté ces lignes

Code:

<i id="countart"></i>

et

Code:

var countart = document.getElementById("countart").innerHTML;
13/01/2022, 10h03
Doksuri

quand tu seras plus a l'aise avec le JS, tu pourra te pencher sur le reduce() ;)

Code:

const total = panierArray.reduce((acc,val) => acc + val.quantite, 0);
13/01/2022, 10h08
flexi2202

Merci pour la réponse c est super sympa
mais ce morceau de code je l affiche sur mon code html pour récupérer le nombre total d article

voila cela est en partie resolu

sauf que le total des articles n'est pas le bon

si j aoute un seul produit
le résultat est de 0 articles peu importe le nombre d article
lorsque j ajoute un deuxième article le résultat du nombre d article est = a celui de la ligne précédente
donc j 'ai un soucis dans ma boucle qui compte les quantités

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
function afficherpanier() {
  var panierArray = MonPanier.listpanier();
  var output = "";
  var countart=0;
  var count=0;
    for(var i in panierArray) {
             output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>(" + panierArray[i].prix.toFixed(0) + ")</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + countart + " articles</div>"
            +  "</div>";
        count++;
 
countart += panierArray[i].quantite;  // somme des unités d'articles
console.log(countart );
console.log(panierArray[i].quantite );
 
const total = panierArray.reduce((acc,val) => acc + val.quantite, 0);
console.log(total );
 
}