Discussion :

[flexi2202]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

[SpaceFrog]

Pas très compliqué ...

Tu as une boucle sur le contenu du panier ..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(var i in panierArray)

puis pour chaque article contenu dans le panier tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 panierArray[i].quantite

[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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[flexi2202]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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
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 = "";
  }  
}

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 var countart = document.getElementById("countart").innerHTML;

[Doksuri]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

const total = panierArray.reduce((acc,val) => acc + val.quantite, 0);

[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

[flexi2202]

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 :

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