andreaem andreaem - 3 months ago 26
jQuery Question

jQuery: calculate price, total, shipping and vat in a cart system

Case:

I'm trying to create a Cart system that will Calculate the price based on the quantity of ordered items, then will be sum with the shipping amount and finally calculate the grand total adding VAT price.

Code:

$(document).ready(function(){

update_amounts();
$('.qty').change(function() {
update_amounts();
});
});

function update_amounts()
{
var sum = 0.0;
$('#myTable > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
sum+=amount;
$(this).find('.amount').text(''+amount);
});
//calculate the total to sum
$('.total').val(sum);
//calculate total + shipping and add VAT
var shipping = $(this).find('.shipping').val();
var total = $(this).find('.total').val();
var vat = $(this).find('.vat').val();
//calculate vat
var vat_amount = ((total, 10) * 100);
//calculate grand total
var total_shipping = (total+shipping);
var ship_amount = (total_shipping+vat_amount);
sum+=ship_amount;
$('.grandTotal').val(sum);
}


Behaviour:

This don't work even if I've taken the first part of a working fiddle, can't see data changing on item total price, and can't calculate the grand total too.

Expected Behaviour:

When an user click on the Q.ty select:
- total of the row must to be updated calculating price * qty
- total of rows price must to be updated
- the sum of total of row price must to be added to shipping price
- finally the vat, calculated on sum of total row must return the grand total.

Fiddle:

Here is a full fiddle with the html part adapted (I'm using a PHP script to populate the table) https://jsfiddle.net/a1o2nmw8/1/

Thanks to all who can collaborate.

Answer

$(document).ready(function(){
		    update_amounts();
		    $('.qty').change(function() {
		        update_amounts();
		    });
		});

function update_amounts()
		{

				var sum = 0.0;
		    $('#myTable > tbody  > tr').each(function() {
       
		        var qty = $(this).find('option:selected').val();
		        var price = $(this).find('.price').text();
		        var amount = (qty*price)
		        sum+=amount;
		        $(this).find('.amount').text(''+amount);
		    });
		    //calculate the total to sum  
		    $('.total').val(sum);
		    //calculate total + shipping and add VAT
		    var shipping = $('.shipping').val();
		    var total = $('.total').val();
		    var vat = $('.vat').val();
		    //calculate vat
		     var vat_value = ((total*vat)/100);
		    //calculate grand total
		    
        sub_total = (parseFloat(total)+parseFloat(shipping)).toFixed(1);
        
		    var grand_total = (parseFloat(sub_total)+parseFloat(vat_value                    )).toFixed(1);
		  
		    $('.grandTotal').val(grand_total);
		}
            	
               
            
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped" id="myTable">
  	<thead>
  		<tr>
		  <th>ID</th>
		  <th>Name</th>
		  <th>Desc</th>
		  <th>Q.ty</th>
		  <th>Price</th>
		  <th>Total</th>
		</tr>
  	</thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>product</td>
        <td>description</td>
        <td><select class="qty" value="500">
        <option value="500">500</option>
        <option value="1000">1000</option>
        </select></td>
        <td><span class="price">50.0</span></td>
        <td><span class="total">0.0</span></td>
      </tr>
    </tbody>
  </table>
  <div class="row">
	  <div class="col-sm-3 col-sm-offset-9">
	  	<table class="table table-striped">
	  		<tr>
	  			<td>Total</td>
	  			<td><input type="text" class="total input" value="0.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>Shipping</td>
	  			<td><input type="text" class="shipping input" value="30.0" > €</td>
	  		</tr>
	  		<tr>
	  			<td>VAT</td>
	  			<td><input type="text" class="vat input" value="22" disabled> %</td>
	  		</tr>
	  		<tr>
	  			<td><strong>Grand Total</strong></td>
	  			<td><strong><input type="text" class="grandTotal input" value="0.0" disabled> €</strong></td>
	  		</tr>
	  	</table>
	  </div>