jQuery Shopping Cart summing Subtotal to calculate Total Price

Question

I have 2 shopping cart items and simply want to calculate total price by using price, quantity , subtotals but it returns NaN output .

I tried parseFloat but I don't know where I went wrong .

Hope I get some help thanks...

HTML Code:

 <tr class="cart">
                    <td class="pt-3">
                      <img class="img-fluid rounded-pill float-left col-md-3 "  src="{{asset('front/')}}/assets/img/1.png"  alt="">
                      <div class="title pb-2">Margarhitta</div>
                      <div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
                    
                    </td>

                    <td  class="text-center"> 

                    <span class="price"><strong>13.99</strong></span>
                    
                    </td>
                    <td  class="text-center">
                      
                     
                    <input class="qty form-control" type="number" value="1" min="1">
                      
                      
                    </td>
                    <td  class="text-center">
                    <span class="subtotal">13.99</span>
                      
                    </td>
                    <td>
                    <a href="javascript:void(0)" class="remove"  ><i class="icofont-trash"></i></a>
                    </td>
                    
                
                </tr>
                
            </tbody>

          </table>
          <span class="float-right" style="color:white" id="total">0</span>

jQuery Code:.............................................

$('.qty').change(function() {
      updateQuantity(this);
    });


    function recalculateCart(){
      subtotal = 0 ;
      var cartRow = $('.price').closest('tr');

      cartRow.each(function(){
        subtotal += parseFloat($(this).children('.subtotal').text());
      })
      
      $('#total').html(subtotal.toFixed(2));



    }

    function updateQuantity(qtyInput){
      var cartRow = $(qtyInput).closest('tr');
      var price = parseFloat($('.price', cartRow).text());
      var quantity = $('.qty',cartRow).val();
      var subtotal = $('.subtotal', cartRow);
      var linePrice = price * quantity;

      subtotal.each(function(){
        $(this).text(linePrice.toFixed(2));
         recalculateCart();
      })
    }

score 1 · Accepted Answer · answered Mar 01 '21 at 04:03

You need to check if the span subtotal value is not empty if yes then only use parseFloat() else get value of that span as 0 and do further calculation.

Demo Code :

$('.qty').change(function() {
  updateQuantity(this);
});


function updateQuantity(qtyInput) {
  var cartRow = $(qtyInput).closest('tr');
  var price = parseFloat($('.price', cartRow).text());
  var quantity = $('.qty', cartRow).val();
  var subtotal = $('.subtotal', cartRow);
  var linePrice = price * quantity;
  $(subtotal).text(linePrice.toFixed(2));
  total_calculate() //call
}

function total_calculate() {
  var total = 0;
  //loop through subtotal
  $(".cart .subtotal").each(function() {
    //chck if not empty
    var value = $(this).text() != "" ? parseFloat($(this).text()) : 0;
    total += value; //add that value
  })
  //assign to total span
  $("#total").text(total.toFixed(2))
}
total_calculate()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="cart">
    <td class="text-center">
      <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
      <input class="qty form-control" type="number" value="1" min="1">
    </td>
    <td class="text-center">
      <span class="subtotal">13.99</span>
    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>
  </tr>
  <tr class="cart">
    <td class="text-center">
      <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
      <input class="qty form-control" type="number" value="1" min="1">
    </td>
    <td class="text-center">
      <span class="subtotal">13.99</span>
    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>
  </tr>

</table>

<span class="float-right" style="color:blue" id="total">0</span>

jQuery Shopping Cart summing Subtotal to calculate Total Price

1 Answers1

Linked