0

我正在开发一个网上商店，当我将 band.html 中的产品添加到我的购物车时，我得到了单个产品的两个实例，这也导致了 cart.html 页面上小计和总计的错误计算。此外，由于这些产品被添加到我在 cart.html 页面上创建的产品名称、标题、价格之上，这也推迟了我的设计。

问题是，每当我从 band.html 文件中添加产品时，通过单击添加到购物车按钮，它会添加同一产品的两个实例，并且计算部分也给出了错误的答案，即 podth 的小计和总价产品。产品计算在 updateCartTotal 函数下的 cart.js 文件中完成。我在 cart.js 文件中所有函数的末尾调用这个函数，这样如果购物车有任何变化，购物车的总数就会保持更新。

我面临的问题是：

  1. 每次在band.html页面中单击添加到购物车按钮时，都会将两个band产品实例添加到cart.html页面中。（即使该按钮仅被单击一次）

  2. 总价和小计价给出了错误的产品总和

  3. 我想将产品添加到 cart.html 中的 all-items 部分下，但它不允许我这样做。

这是 cart.html 文件

<!DOCTYPE html>

  <!-- Cart items details section -->
  <div class="small-container cart-page">
    <table>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Subtotal</th>
      </tr>
      <div class="all-items">
  <script type="text/javascript" src="cart.js">
  function addItemToCart(title, price, imageSrc) {
  
    var cartItems = document.getElementsByClassName('all-items')[0]
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartRowContents = `
    <table class="all-items">
    <tr class="cart-row">
      <td>
        <div class="cart-info">
          <img src="${imageSrc}">
          <div>
            <p>${title}</p>
            <small>${price}</small>
            <br>
            <button class="btn btn-danger" type="button">Remove</button>
          </div>
        </div>
      </td>
      <td><input class="cart-quantity-input" type="number" value="1"></td>
      <td class="cart-price">${price}</td>
    </tr>

    `
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
  }

  </script>
      </div>
    </table>
    <div class="total-price">
      <table>
        <tr>
          <td>Subtotal</td>
          <td class="cart-subtotal-price">₹0</td>
        </tr>
        <tr>
          <td>Tax</td>
          <td>18%</td>
        </tr>
        <tr>
          <td id="total">Total</td>
          <td class="cart-total-price">₹0</td>
        </tr>
        <tr>
          <td><button class="btn btn-purchase" id="checkout" onclick="clk()">Checkout</button></td>
          <script>
          function clk(){
            window.localStorage.clear();
          }
          </script>
        </tr>
      </table>
    </div>
  </div>

  
  <!-- script for cart functioning -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
  <script src="cart.js"></script>

这是cart.js文件，products是一个数组，包含sn（数字类型的序列号），tittle（字符串类型的产品名称），price（数字类型的产品价格），imageSrc（存储源图像文件的位置，是字符串类型）和数量（存储产品的数量是数字类型，所有产品都初始化为 -1）

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {

  var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
    var inputs = quantityInputs[i];
    inputs.addEventListener('change', quantityChanged)
  }

  addToCartClicked()

  if (document.getElementById('checkout') != null) {
    document.getElementById('checkout').addEventListener('click', checkoutClicked)
  }
}

function removeCartItem(event) {
  var buttonClicked = event.target
  buttonClicked.parentElement.parentElement.parentElement.parentElement.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var inputs = event.target
  // to check if the value is a number or not
  if (isNaN(inputs.value) || inputs.value <= 0) {
    inputs.value = 1
  }
  updateCartTotal()
}

function addToCartClicked(event){
  var fl = 0;
  var i;
  outer: for (i = 0; i < 13; i++) {
    fl = 0;
      var q = JSON.parse(localStorage.getItem(i));
      for (var j = 0; j < 13; j++) {
        if (products[j].sn == q) {
          fl = 1;
          break outer
        }
      }
    }
    if( fl == 1)
    {
      addItemToCart(products[i].title, products[i].price, products[i].imageSrc)
      updateCartTotal()
    }
}


function checkoutClicked() {
  alert("Thank you for shopping with us.")
  var cartItems = document.getElementsByClassName('all-items')[0]
  while (cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild)
  }
  updateCartTotal()
}

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-row')
  var total = 0;
  for (var i = 0; i < 13; i++) {
        var q = JSON.parse(localStorage.getItem(i));
    for (var j = 0; j < 13; j++) {
      if (products[j].sn == q) {
        for (var k = 0; k < cartItemContainer.length; k++){
          var cartRow = cartItemContainer[k];
          var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
          var quantityFinal = quantityElement.value;
          total = total + products[j].price * quantityFinal;
        }
      }
    }
  }
  document.getElementsByClassName('cart-subtotal-price')[0].innerText = "₹&quot; + total
  total = total + (total * 0.18);
  total = Math.round(total * 100) / 100
  document.getElementsByClassName('cart-total-price')[0].innerText = "₹&quot; + total
}

这是我添加产品并将其发送到 cart.html 文件的 band.html 文件


  <!-- Single product details section -->
  <div class="small-container single-product shop-item">
    <div class="row">
      <div class="col-2">
        <img class="shop-item-image" src="images/exclusive.png" width="100%" id="ProductImg">
      </div>
      <div class="all-items">
      <div class="col-2 shop-item-detail cart-row" id="cart">
        <p>Exclusive / Smart Band</p>
        <h1 class="shop-item-title cart-item-title">Smart Band 4</h1>
        <h4 class="shop-item-price cart-price">₹3299</h4>
        <input class="cart-quantity-input" id="qt" type="number" value="1">
        <a href="#" class="btn shop-item-button" onclick="clicked()">
          <script>
          function clicked(){
            var sn = 12;
            var qty = document.getElementsByClassName('shop-item')[0];
            var qq = qty.getElementsByClassName('cart-quantity-input')[0].value;
            localStorage.setItem(sn, qq);
            window.location.replace("cart.html");
          }
         </script>
         Add to Cart</a>
        <h3>Product Details <i class="fa fa-indent" aria-hidden="true"></i></h3>
        <br>
        <p>Mi Smart Band 4 features a large 0.94-inch AMOLED Color Display, 20 Days Battery life,
          5ATM Water Resistance, Music Control, Unlimited Watch Faces and is
          compatible with both Android and iOS.
        </p>
      </div>
    </div>
    </div>
  </div>
4

0 回答 0