Cart quantity and Price Controls

by Faisal Khan Janjua

HTML

<table class="views-table">
	<thead>
		<tr>
			<th class="views-field views-field-nothing-1">Product</th>
			<th class="views-field views-field-nothing">Quantity</th>
			<th class="views-field views-field-commerce-total">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd views-row-first">
			<td class="views-field views-field-nothing-1">
				<div class="product_t_p"><h3>pkg 599</h3>
					<p class="cart_pro_price">315.00&nbsp; SAR</p>
				</div>
			</td>
			<td class="views-field views-field-nothing edt-qty">
				<div class="qty-controls">
					<span class="decrQut">-</span>
					<div class="form-item form-item-edit-quantity-0 form-type-textfield form-group"><input title="Quantity" class="form-control form-text" type="text" id="edit-edit-quantity-0" name="edit_quantity[0]" value="1" size="4" maxlength="4"></div> 
					<span class="incrQut">+</span>
				</div>
			</td>
			<td class="views-field views-field-commerce-total price" data-totalval="315">
			315.00&nbsp; SAR          </td>
		</tr>
		<tr class="even">
			<td class="views-field views-field-nothing-1">
				<div class="product_t_p"><h3>pakage</h3>
					<p class="cart_pro_price">420.00&nbsp; SAR</p>
				</div>
			</td>
			<td class="views-field views-field-nothing edt-qty">
				<div class="qty-controls">
					<span class="decrQut">-</span>
					<div class="form-item form-item-edit-quantity-1 form-type-textfield form-group"><input title="Quantity" class="form-control form-text" type="text" id="edit-edit-quantity-1" name="edit_quantity[1]" value="1" size="4" maxlength="4"></div> 
					<span class="incrQut">+</span>
				</div>
			</td>
			<td class="views-field views-field-commerce-total price" data-totalval="420">
			420.00&nbsp; SAR          </td>
		</tr>
		<tr class="odd">
			<td class="views-field views-field-nothing-1">
				<div class="product_t_p"><h3>IPhone X</h3>
					<p class="cart_pro_price">735.00&nbsp; SAR</p>
				</div>
			</td>
			<td class="views-field views-field-nothing edt-qty">
				<div...

CSS

table{
  width:100%;
}
tr{
  width:33%;
  text-align:center;
}
span.decrQut, span.incrQut{
  cursor: pointer;
  font-size: 30px;
  padding: 0px 10px;
  line-height: 33px;
  font-family: 'Arial';
  vertical-align: top;
  display: inline-block;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.form-item{
  display:inline-block;
}

JavaScript

$(document).ready(function(){
  function sumTotalQty(){
    var sumVal = 0;
    $('.views-table tbody tr').each(function(){
      sumVal +=  parseFloat($(this).find('td:last-child').attr('data-totalVal'));
    });
    return sumVal;
  }
  function calCartTax(){
    return parseFloat($('.cartInfo tbody tr').eq(1).find('td:first-child').attr('data-taxVal'))*sumTotalQty();
  }
  if($('.views-table td.edt-qty').length){
    $('.views-table tbody tr').each(function(){
      var rowPrice = $(this).find('.qty-controls input').val()*(parseFloat($(this).find('p.cart_pro_price').text().replace(/[^0-9.]/g, "")));
      $(this).find('td:last-child').attr("data-totalVal", rowPrice);
    });
    $('.cartInfo tbody tr:first-child td:last-child').attr('data-sumQty', sumTotalQty());
    $('.cartInfo tbody tr').eq(1).find('td:first-child').attr('data-taxVal', ($('.cartInfo tbody tr').eq(1).find('td:first-child').html()).replace(/[^0-9.]/g, "")/100);
    $(document).on('click', '.decrQut', function(){
      proQuty = parseFloat($(this).parent().find('input.form-text').val());
      if(proQuty>=2){
        proQuty-=1;
        $(this).parent().find('input.form-text').val(proQuty);
      }
      cart_pro_price = $(this).closest('tr').find('p.cart_pro_price').text();
      cart_pro_price = cart_pro_price.replace(/[^0-9.]/g, "");
      cart_pro_PxQ = cart_pro_price*proQuty;
      $(this).closest('tr').find('td:last-child').attr("data-totalVal", cart_pro_PxQ).html((cart_pro_PxQ.toLocaleString('en')) + ' SAR');
      $('.cartInfo tbody tr:first-child td:last-child').html((sumTotalQty()-calCartTax()).toLocaleString('en') + ' SAR');
      $('.cartInfo tbody tr').eq(1).find('td:last-child').html(calCartTax().toLocaleString('en') + ' SAR');
      $('.cartInfo tbody tr:last-child td:last-child').html(sumTotalQty().toLocaleString('en') + ' SAR');
    });
    $(document).on('click', '.incrQut', function(){
      proQuty = parseFloat($(this).parent().find('input.form-text').val())+1;
     ...