时间戳

首页 > 解决方案 > 用JS计算总价

javascript - 用JS计算总价

问题描述

我正在做一个购物车，我需要获取购物车中物品的总价格。

例如，在我单击“添加到购物车”后，产品来自一个foreach()，因此，单击“添加到购物车”，我得到了被点击产品的名称和价格，并将其显示在购物车中。

但我不知道如何获取所有项目的价格，并显示总价。

Foreach 与产品

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

标签： javascriptphphtmlcsstwitter-bootstrap

解决方案

您可以遍历您的produto-text-pricediv 以获取添加到购物车的所有商品的价格，然后使用 split 并替换逗号。最后，在某些 div 中添加总价。

演示代码：

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>

推荐阅读