Bonjour,

Pour la création d'un site e-commerce en javascript uniquement et après avoir quasiment tout terminé,

je cherche à récupérer les montants totaux des différents articles, pour en créer le montant total à payer.

Quelqu'un peut-il m'aider ?

Par où commencer ?

• getElementById()?
• querySelector()?

• Quelle fonction ?
• Quelle Boucle ?

Merci d'avance,

Philippe

Bonjour, sans savoir dans quel type de champs tu as les montants et les quantités, c'est difficile de répondre.

Utilises-tu un framework quelconque ou codes tu en vanilla js?

Je n'utilise aucun framework, uniquement du pur javascript. Le prix d'un article est dans une <td> et le montant total à payer dans une <th>.

Cela fait à peu près cela :

Article.         Couleur.         Prix unitaire.         Qté.         Montant.         Supprimer.         

article1           Brown            45.00 €  <td>          2             90.00 €              x   (dans le localstorage)

article2           White            40.00 €  <td>          1             40.00 €              x   (dans le localstorage)

                                                           Total à payer :          ?  <th>

En espérant être assez clair dans mon explication.

Cordialement,

Philippe 

-
Edité par Phildav 23 février 2021 à 19:23:19

Salut, le souci c'est qu'en faisant comme ceci l'utilisateur a le champ libre pour modifier le montant du panier à sa guise et donc de mettre la somme à 0 s'il en a envie. Pour sécuriser ton panier il faudrait passer par un contrôleur côté back qui te renverrait la donnée en temps réel et ne serait pas sujette aux modifications externes.

-
Edité par EisaHadaran 24 février 2021 à 20:49:32

Bonjour EisaHadaran,

Je n'ai pas besoins de sécuriser c'est juste pour un exercice. Cela ne sera pas en ligne. Peux-tu m'aider quand même ?

Cordialement ,

Philippe 

Salut, dans ce cas tu peux faire comme ceci : placer un ID sur ton table et boucler sur tes tr pour venir récupérer la valeur chaque td qui contient la valeur que tu veux. Quelque chose du style :

document.addEventListener('DOMContentLoaded', function() {
  let rowElements = document.getElementById('table').querySelectorAll('tr');
  let total = getTotal(rowElements); // total here
}, false);

getTotal(array) {
  let total = 0;
    
  array.forEach((row) => {
    let value = Number(row.querySelector('.value').innerText);
    total += value;
  });
    
  return total;
}

Sur cet exemple il faut rajouter la classe "value" sur les td qui contiennent la valeur à récupérer.

-
Edité par EisaHadaran 25 février 2021 à 18:53:58

Merci beaucoup,

cela me semble très bien, je vais tester.

Philippe