Voici la structure du code. J'ai commenté les balises pertinentes. Je veux essentiellement résumer tous les prix des produits, puis stocker la somme à afficher dans la page via -> div class = "totals-value"

        ... Several Products ....

        <div class="product">
            <div class="product-image">
                <img src="images/adidas.jpg">
            </div>
            <div class="product-price">5.99</div>
            <div class="product-line-price">5.99</div> // I WANT TO SUM ALL OF THESE VALUES IN DOCUMENT
        </div>

        <div class="totals">
            <div class="totals-item">
                <label>Subtotal</label>
                <div class="totals-value" id="cart-subtotal"></div> // I WANT TO WRITE SUM HERE
            </div>
        </div>
-1
micshapicsha 7 avril 2020 à 05:36

3 réponses

Meilleure réponse

Oui c'est possible en utilisant javascript ou jquery
assurez-vous d'avoir inclus jquery cdn ou localement dans votre fichier avant d'exécuter ce code.

$(document).ready({
   let total_price = 0;
   $('.product-line-price').each(function() {
         total_price += parseFloat(this.innerHTML, 10)
   })
   $('#cart-subtotal').text(total_price);
});
0
user3709901 7 avril 2020 à 02:50

Dans Vanilla Javascript, vous pouvez utiliser quelque chose comme,

window.addEventListener('load', function() {
  let divs = document.getElementsByClassName("product-price");
  var total = 0;
  for (let item of divs) {
    let itemPrice=parseFloat(item.textContent);
    total += itemPrice;
  }
  document.getElementsByClassName("totals-value")[0].innerText = total;
})

Cela va parcourir le div avec le prix et le additionner pour définir le total sur pageload.

-1
Kaveen Rodrigo 7 avril 2020 à 02:58
var sum = 0;
$(function() {
   var sum = 0;
   $('div.product-line-price').each(function() {
         sum += parseFloat(this.innerHTML, 10)
   })

   $('#cart-subtotal').text(sum);
})
-1
micshapicsha 7 avril 2020 à 02:46