Solution 1 :

You can loop through your produto-text-price div to get price all items which is added to cart then use split and replace commas .Finally, add total price in some div .

Demo Code :

function addProd(number) {
  var product_id = 'prod' + number;
  var prod = document.getElementById(product_id).innerText;

  var productPreco = id = 'prodPreco' + number;
  var prodPreco = document.getElementById(productPreco).innerText;
  var divProd = document.createElement('div');
  divProd.className = 'produto-in';
  document.getElementById('cesta-in').appendChild(divProd);
  var prodText = document.createElement('div');
  prodText.className = 'produto-text';
  var prodText2 = document.createElement('div');
  prodText2.className = 'produto-text-price';

  divProd.appendChild(prodText);
  divProd.appendChild(prodText2)
  prodText.innerHTML = prod;
  prodText2.innerHTML = prodPreco;
  var price = 0;
  //loop through price div inside cart
  document.querySelectorAll('.produto-text-price').forEach(function(el) {
  //split from `$`
    var totals = el.textContent.split('$')[1]
    var numbers = totals.replace(/,/g, '') //replace comma
    price += Number(numbers) //add

  })
  document.getElementById("totalprice").innerHTML = "U$" + addCommas(price); //put result inside totalprice
}

function addCommas(value) {
  return value.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}
.produtos {
  min-width: 80%;
  width: 80%;
}

.prod {
  width: 25%;
  padding: 20px;
}

.prod p {
  margin: 0;
}


/*-- SHOPPING CART --*/

#cesta {
  max-width: 20%;
  width: 20%;
  display: flex;
  flex-direction: column;
}

.produto-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

.produto-in div {
  font-size: 14px;
  width: 100%;
}
<div class="container container-produtos-geral d-flex">
  <div class="produtos d-flex justify-content-start flex-wrap text-center">

    <div class="prod">
      <p id="prod1">Abc</p>
      <p id="prodPreco1">U$5,99</p>
      <button type="button" onclick="addProd('1')">Add to Cart</button>
    </div>

    <div class="prod">
      <p id="prod2">Abcd</p>
      <p id="prodPreco2">U$14,99</p>
      <button type="button" onclick="addProd('2')">Add to Cart</button>
    </div>
     <div class="prod">
      <p id="prod3">Abcd</p>
      <p id="prodPreco3">U$143,99</p>
      <button type="button" onclick="addProd('3')">Add to Cart</button>
    </div>
  </div>

  <div id="cesta">
    <div class="title">Cart</div>
    <div class="produto-in">
      <div id="cesta-in">
        <!-- CLICKED PRODUCTS -->
      </div>
    </div>
    <div>Total Price : <span id="totalprice"></span></div>
  </div>
</div>

Problem :

I’m doing a shopping cart and I need to get the total price of the items in cart.

Example after I click the “Add to Cart”, the products are coming from a foreach(), so, onclick “Add to Cart”, I get the name and the price os the product which was clicked and show it inside the cart.

But I don’t know how to get the price of all items, and show the total price.

Foreach with products

<?php
    $produtos = array(['name'=>'Balloon', 'preco'=>'9'],
        ['name'=>'Bike', 'preco'=>'79'],
        ['name'=>'Cake', 'preco'=>'24']);
?>

<div class="container container-produtos-geral d-flex">
    <div class="produtos d-flex justify-content-start flex-wrap text-center">
        <?php $i=1 ?>
        <?php foreach($produtos as $prods) {                
        echo'
            <div class="prod">
                <p id="prod'.$i.'">'.$prods['name'].'</p>
                <p id="prodPreco'.$i.'">U$'.$prods['preco'].',99</p>
                <button type="submit" onclick="addProd('.$i.')">Add to Cart</button>
            </div>';
        $i++;
        } ?>
    </div>

    <div id="cesta">
        <div class="title">Cart</div>
        <div class="produto-in">
            <div id="cesta-in">
                <!-- CLICKED PRODUCTS -->
            </div>
        </div>
    </div>
</div>

CSS

/*-- PRODUCTS --*/
.produtos {min-width: 80%; width: 80%;}
.prod {width: 25%; padding: 20px;}
.prod p {margin: 0;}

/*-- SHOPPING CART --*/
#cesta {
    max-width: 20%;
    width: 20%;
    display: flex;
    flex-direction: column;
}    

.produto-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
}

.produto-in div {font-size: 14px; width: 100%;}

Javascript

function addProd(number) {
    // Getting which product was clicked
    var product_id='prod'+number;
    var prod = document.getElementById(product_id).innerText;

    var productPreco = id='prodPreco'+number;
    var prodPreco = document.getElementById(productPreco).innerText;

    // Div container to name and price
    var divProd = document.createElement('div');
    divProd.className = 'produto-in';
    document.getElementById('cesta-in').appendChild(divProd);

    // Div with the name of the product
    var prodText = document.createElement('div');
    prodText.className = 'produto-text';

    // Div with the item price
    var prodText2 = document.createElement('div');
    prodText2.className = 'produto-text-price';

    divProd.appendChild(prodText);
    divProd.appendChild(prodText2)
    prodText.innerHTML = prod;
    prodText2.innerHTML = prodPreco;
}

Comments

Comment posted by dududornelees

Forgot to say that I’m using Bootstrap 5.

Comment posted by minimal reproducible example

No, you posted the php script that generates the html file; when JavaScript runs on the client the php is irrelevant, since it works on the html that was sent to the browser. Please: read the “

Comment posted by dududornelees

OK! Sorry for that, I’m gonna read this.

Comment posted by DCR

are you trying to calculate the total price on the client side with javascript or are you trying to calculate total price on the server side wih php?

Comment posted by dududornelees

Total price on the client side. Just the products which was added to the cart.

By