Question

大家好我从头开始构建一个简单的电子商务网站，而不是使用Shopify，我已经制作了所有简单的前端位，但我似乎无法根据客户选择的产品数量。

到目前为止，如果客户＆＃34;添加到购物车＆＃34;然后购物车中的价格和总数将更新为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等。< / p>

由于

Answer 1

点击＆＃34;添加到购物车＆＃34;什么都没有检索当前的数量，所以它总是静态的。通过从数量输入框中检索值，您的数学运算将正常工作。

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

＆＃13;

//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")
       });
    });

＆＃13;

<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

＆＃13;

如何获取数量框以更新总价

1 个答案: