如何使用 JavaScript 计算购物车中产品的总价？

Question

我在这个项目中卡住了如何计算我的购物车的总金额和总价。任务是创建一个简单的（初学者）电子商务网站，客户应该能够在其中点击产品并将其添加到他们的购物车（显示产品的名称、数量和价格，数量和价格应该更新根据客户点击产品附带的按钮的次数正确选择）。

而且我只能使用javascript（或html，如有必要）。

我的网站基本正常。一切都可以添加到购物车，购物车会跟踪每个产品的数量和价格。

但是我不知道怎么做，所以当我按下购物车下方的购买按钮时，添加到购物车的所有产品的总金额和总价显示在购物车下方的字符串中.

我试过在线搜索答案，但我似乎无法弄明白。

请帮忙！ :)

非常感谢您能想到的任何东西，因为在这一点上我完全一无所知。值得注意的是，我真的是 javascript 的新手！

到目前为止，这是我的 javascript 代码：

var products =
[
    {
        "name": "Aloe Vera",
        "image": "bilder/severin-candrian-dgvFsLfIX9E-unsplash.jpg",
        "origin": "Nederländerna",
        "description": "Lättskött suckulent med tjocka gröna blad. En av världens äldsta läkeväxkter. Trivs på soliga platser. Låt den torka ut mellan varje vattning.",
        "height": "120cm",
        "care": "Trivs ljust, men undvik direkt solljus. Vattna undertill och inte på växten, men låt jorden torka mellan varje vattning. Ge flytande näring från vår till höst. Eventuell omplantering ska göras på våren.",
        "price": 59
    },
    {
        "name": "Marmorblad",
        "image": "bilder/severin-candrian-8nONCr6eTeg-unsplash.jpg",
        "origin": "Brasilien",
        "description": "Fin och spännande växt med kontrastrika blad med grönt mönster och lila undersida på bladen. Denna dekorativa planta passar perfekt i en kruka på golvet eller på en piedestal eller ett sidobord.",
        "height": "65cm",
        "care": "Ge den lite utrymme så att bladen kan sträcka ut sig väl både uppåt och åt sidorna och skapa en grön och harmonisk atmosfär i hemmet. Trivs i ljus och halvskugga, undvik direkt solljus. Håll jorden lätt fuktig. Gillar att bli duschad på bladen.",
        "price": 299
    },
    {
        "name": "Lyktranka",
        "image": "bilder/severin-candrian-xGpYDi-0348-unsplash.jpg",
        "origin": "Sydafrika, Swaziland och Zimbabwe",
        "description": "Även känd som Hjärtan på tråd. Lyktrankan är mycket lätt att sköta och är en vacker hängväxt med små mörkgröna hjärtformade blad med ett silverskimrande mönster. Plantan kan bli över en meter, vilket gör den väl lämpad som hängväxt eller i en hög kruka.",
        "height": "15 cm",
        "care": "Trivs ljust, undvik direkt solljus. Låt den torka lätt mellan vattningarna.",
        "price": 79
    }
];


let cart = {} ; 

function initCart() {
for (let product of products) {
    cart[product.name] = 0;
}
  }

function renderCart() {
let tbody = document.querySelector("#cart > tbody");
tbody.innerHTML = "";
for (let product of products) {
    let row = tbody.insertRow(-1);
    let cellName = row.insertCell(-1);
    let cellAmount = row.insertCell(-1);
    let cellPrice = row.insertCell(-1);
    let amount = cart[product.name];
    cellName.textContent = product.name;
    cellAmount.textContent = amount;
    cellPrice.textContent = amount * product.price;
}
     }


function increment(name) {
console.log("Name: " + name);
cart[name]++;
renderCart();
   }


function buy() {
document.getElementById("totalCart").textContent = "Du har lagt till " + count + " st" + " produkter." + " " + "Vilket blir en summa på " + total + " kr" +  "." ;
 }


var count = countCart() ;
var total = totalCart() ;

function countCart() {
var totalCount = 0 ;
for (var i in cart) {
    totalCount += cart[i].amount ;
}
return totalCount ;
}

function totalCart() {
var totalPrice = 0 ;
for (var i in cart) {
    totalPrice += cart[i].price ;
}
return totalPrice ;
}




function renderProducts() {
const template = `
    <img>
    <div class="p-template">
        <div>
            <span class="name"></span>
        </div>
        <div class="origin"></div>
        <div class="height"></div>
        <div class="care"></div>
        <div class="description"></div>
        <div class="price"></div>
        <div>
            <input class="button" value="Lägg i varukorg" type="button"/>
        </div>
    </div>
`;
const container = document.querySelector("#products");
for (let product of products) {
    let item = document.createElement("div");
    item.classList.add("item", "ml-2");
    item.innerHTML = template;
    item.querySelector("img").src = product.image;
    item.querySelector(".name").textContent = product.name;
    item.querySelector(".origin").textContent = product.origin;
    item.querySelector(".height").textContent = product.height;
    item.querySelector(".care").textContent = product.care;
    item.querySelector(".description").textContent = product.description;
    item.querySelector(".price").textContent = product.price;
    item.querySelector(".button").addEventListener("click", () => increment(product.name));
    container.appendChild(item);
}
}

window.onload = function() {
renderProducts();
initCart();
renderCart();
}

还有我的html：

<body>
<h1>Varukorg</h1>
    <div class="container">
        <div class="row">
            <table class="table" id="cart">
                <thead>
                    <tr>
                        <th>Produkt</th>
                        <th>Antal</th>
                        <th>Pris</th>
                    </tr>
                </thead>
                <tbody id="table-body"></tbody>
            </table>
            <form>
                <input class="buy-btn" onclick="buy()" value="Köp" type="button"/>
            </form>
            <p id="totalCart"></p>
            <h2>Växter</h2>
            <div class="" id="products"></div>
        </div>
    </div>
</body>
<script src="inlamning2.js"></script>

抱歉有些词是瑞典语！您可能需要知道的唯一词是：

"lägg i varukorgen" = 添加到购物车

"köp" = 购买

“价格”=价格

“antal”=金额

“产品”=产品

Answer 1

您的问题是您的 cart 仅将以下信息存储在键值对中：键是产品名称，数量是值。 cart 对象中根本没有价格信息，因此计算它需要查找原始 products 数组。

此外，count 和 total 是在 buy() 函数之外声明的，但该函数在调用时不会更新这些值。这些值仅在运行时设置，之后不会更新。

因此，最快的解决方案是将 buy() 函数重写成这样，同时删除 countCart() 和 totalCart() 函数：

function buy() {
  var count = Object.values(cart).reduce((sum, cur) => sum += cur, 0);
  var total = Object.entries(cart).reduce((sum, cur) => {
    const [product, quantity] = cur;
    return sum += products.find(p => p.name === product).price * quantity;
  }, 0);
  
  document.getElementById("totalCart").textContent = "Du har lagt till " + count + " st" + " produkter." + " " + "Vilket blir en summa på " + total + " kr" + ".";
}

代码解释：

count 非常简单：您获取 cart 对象中的所有值并使用 Array.prototype.reduce
total 有点复杂：您需要以一种让您可以访问键（产品名称）和值（数量）的方式遍历 cart。 Object.entries() 可以为您做到这一点。然后就是查找 products 对象数组以检索给定产品的价格，然后乘以数量。

var products = [{
    "name": "Aloe Vera",
    "image": "bilder/severin-candrian-dgvFsLfIX9E-unsplash.jpg",
    "origin": "Nederländerna",
    "description": "Lättskött suckulent med tjocka gröna blad. En av världens äldsta läkeväxkter. Trivs på soliga platser. Låt den torka ut mellan varje vattning.",
    "height": "120cm",
    "care": "Trivs ljust, men undvik direkt solljus. Vattna undertill och inte på växten, men låt jorden torka mellan varje vattning. Ge flytande näring från vår till höst. Eventuell omplantering ska göras på våren.",
    "price": 59
  },
  {
    "name": "Marmorblad",
    "image": "bilder/severin-candrian-8nONCr6eTeg-unsplash.jpg",
    "origin": "Brasilien",
    "description": "Fin och spännande växt med kontrastrika blad med grönt mönster och lila undersida på bladen. Denna dekorativa planta passar perfekt i en kruka på golvet eller på en piedestal eller ett sidobord.",
    "height": "65cm",
    "care": "Ge den lite utrymme så att bladen kan sträcka ut sig väl både uppåt och åt sidorna och skapa en grön och harmonisk atmosfär i hemmet. Trivs i ljus och halvskugga, undvik direkt solljus. Håll jorden lätt fuktig. Gillar att bli duschad på bladen.",
    "price": 299
  },
  {
    "name": "Lyktranka",
    "image": "bilder/severin-candrian-xGpYDi-0348-unsplash.jpg",
    "origin": "Sydafrika, Swaziland och Zimbabwe",
    "description": "Även känd som Hjärtan på tråd. Lyktrankan är mycket lätt att sköta och är en vacker hängväxt med små mörkgröna hjärtformade blad med ett silverskimrande mönster. Plantan kan bli över en meter, vilket gör den väl lämpad som hängväxt eller i en hög kruka.",
    "height": "15 cm",
    "care": "Trivs ljust, undvik direkt solljus. Låt den torka lätt mellan vattningarna.",
    "price": 79
  }
];


let cart = {};

function initCart() {
  for (let product of products) {
    cart[product.name] = 0;
  }
}

function renderCart() {
  let tbody = document.querySelector("#cart > tbody");
  tbody.innerHTML = "";
  for (let product of products) {
    let row = tbody.insertRow(-1);
    let cellName = row.insertCell(-1);
    let cellAmount = row.insertCell(-1);
    let cellPrice = row.insertCell(-1);
    let amount = cart[product.name];
    cellName.textContent = product.name;
    cellAmount.textContent = amount;
    cellPrice.textContent = amount * product.price;
  }
}


function increment(name) {
  console.log("Name: " + name);
  cart[name]++;
  renderCart();
}


function buy() {
  var count = Object.values(cart).reduce((sum, cur) => sum += cur, 0);
  var total = Object.entries(cart).reduce((sum, cur) => {
    const [product, quantity] = cur;
    return sum += products.find(p => p.name === product).price * quantity;
  }, 0);
  
  document.getElementById("totalCart").textContent = "Du har lagt till " + count + " st" + " produkter." + " " + "Vilket blir en summa på " + total + " kr" + ".";
}

function renderProducts() {
  const template = `
    <img>
    <div class="p-template">
        <div>
            <span class="name"></span>
        </div>
        <div class="origin"></div>
        <div class="height"></div>
        <div class="care"></div>
        <div class="description"></div>
        <div class="price"></div>
        <div>
            <input class="button" value="Lägg i varukorg" type="button"/>
        </div>
    </div>
`;
  const container = document.querySelector("#products");
  for (let product of products) {
    let item = document.createElement("div");
    item.classList.add("item", "ml-2");
    item.innerHTML = template;
    item.querySelector("img").src = product.image;
    item.querySelector(".name").textContent = product.name;
    item.querySelector(".origin").textContent = product.origin;
    item.querySelector(".height").textContent = product.height;
    item.querySelector(".care").textContent = product.care;
    item.querySelector(".description").textContent = product.description;
    item.querySelector(".price").textContent = product.price;
    item.querySelector(".button").addEventListener("click", () => increment(product.name));
    container.appendChild(item);
  }
}

window.onload = function() {
  renderProducts();
  initCart();
  renderCart();
}

<h1>Varukorg</h1>
<div class="container">
  <div class="row">
    <table class="table" id="cart">
      <thead>
        <tr>
          <th>Produkt</th>
          <th>Antal</th>
          <th>Pris</th>
        </tr>
      </thead>
      <tbody id="table-body"></tbody>
    </table>
    <form>
      <input class="buy-btn" onclick="buy()" value="Köp" type="button" />
    </form>
    <p id="totalCart"></p>
    <h2>Växter</h2>
    <div class="" id="products"></div>
  </div>
</div>

如何使用 JavaScript 计算购物车中产品的总价？

How can I calculate the total price of products in a cart using JavaScript?

javascript

arrays

dom

cart

shopping-cart