如何獲取數量框以更新總價

Question

嗨，大家好，我是從頭開始構建一個簡單的電子商務網站，而不是使用Shopify，並且我已經制作了所有簡單的前端位，但是我似乎無法根據客戶選擇的產品數量來獲取總價格。

到目前為止，如果客戶“添加到購物車”，那么購物車中的價格和總數將更新為1，但是如果他們想選擇2個或更多，它將不起作用，我想知道如何使它起作用

HTML：

<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart 
<div class="input-group plus-minus-input"> //Quantity of product 
  <div class="input-group-button">
    <button class="button hollow circle1 btn btn-primary"
         data-field="quantity" data-quantity="minus" type="button">
      <i aria-hidden="true" class="fa fa-minus"></i>
    </button>
  </div>
  <input class="input-group-field" name="quantity" type="number" value="0">
  <div class="input-group-button">
    <button class="button hollow circle2 btn btn-primary"
         data-field="quantity" data-quantity="plus" type="button">
      <i aria-hidden="true" class="fa fa-plus"></i>
    </button>
  </div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart 

Javascript：

//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){ 
  $('[data-quantity="plus"]').click(function(e){
     e.preventDefault();
     fieldName = $(this).attr('data-field');
     var currentVal = parseInt($('input[name='+fieldName+']').val());
     if (!isNaN(currentVal)) {
        $('input[name='+fieldName+']').val(currentVal + 1);
     } else {
        $('input[name='+fieldName+']').val(0);
     }
   });
   $('[data-quantity="minus"]').click(function(e) {
     e.preventDefault();
     fieldName = $(this).attr('data-field');
     var currentVal = parseInt($('input[name='+fieldName+']').val());
     if (!isNaN(currentVal) && currentVal > 0) {
        $('input[name='+fieldName+']').val(currentVal - 1);
     } else {
        $('input[name='+fieldName+']').val(0);
     }
   });
});

//When the user clicks add to cart this will update the total price and the quantity in the cart 
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
  $(".add-to-cart").click(function(){
     currentItems++;
     var totalPrice = currentItems * cartPrice;
     $(".cart-badge").text(currentItems);
     $(".cartPrice").text(totalPrice + " kr")
  });
});

所以再次，我只是想弄清楚用戶何時單擊+添加更多產品，我希望價格更新為該價格：因此，如果用戶想要5種產品，它將做5 * 565等。

謝謝

Answer 1

當您單擊“添加到購物車”時，沒有任何東西可以檢索當前數量，因此它始終是靜態的。 通過從數量輸入框中檢索值，您的數學將正確運行。

currentItems = $("input.input-group-field[name='quantity']").val();

 //Quanity animation when the user clicks + or - jQuery(document).ready(function(){ $('[data-quantity="plus"]').click(function(e){ e.preventDefault(); fieldName = $(this).attr('data-field'); var currentVal = parseInt($('input[name='+fieldName+']').val()); if (!isNaN(currentVal)) { $('input[name='+fieldName+']').val(currentVal + 1); } else { $('input[name='+fieldName+']').val(0); } }); $('[data-quantity="minus"]').click(function(e) { e.preventDefault(); fieldName = $(this).attr('data-field'); var currentVal = parseInt($('input[name='+fieldName+']').val()); if (!isNaN(currentVal) && currentVal > 0) { $('input[name='+fieldName+']').val(currentVal - 1); } else { $('input[name='+fieldName+']').val(0); } }); }); //When the user clicks add to cart this will update the total price and the quantity in the cart var currentItems = 0; var cartPrice = 565.00; $(document).ready(function(){ $(".add-to-cart").click(function(){ currentItems = $("input.input-group-field[name='quantity']").val(); var totalPrice = currentItems * cartPrice; $(".cart-badge").text(currentItems); $(".cartPrice").text(totalPrice + " kr") }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart <div class="input-group plus-minus-input"> //Quantity of product <div class="input-group-button"> <button class="button hollow circle1 btn btn-primary" data-field="quantity" data-quantity="minus" type="button">-<i aria-hidden="true" class="fa fa-minus"></i></button> </div> <input class="input-group-field" name="quantity" type="number" value="0"> <div class="input-group-button"> <button class="button hollow circle2 btn btn-primary" data-field="quantity" data-quantity="plus" type="button">+<i aria-hidden="true" class="fa fa-plus"></i></button> </div> </div> <p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart