Пересчет корзины товаров

272

27 февраля 2017, 14:00

Здравствуйте!

Подскажите, пожалуйста, как можно запоминать первоначальное значение количества товара и его суммы до изменения пользователем его кол-ва. Необходимо это для того, чтобы пересчет в корзине работал правильно.

Первая операция: (введенное кол-во) - (первоначальное кол-во) = результат.

Вторая операция: (итоговое кол-во корзины) + (результат).

Математически считать все должно правильно. С суммой точно также.

Сейчас у меня считает не корректно. Из-за того, что не запоминает значение суммы и кол-ва.

 $(".kolvo").each(function(){    
    var cart_qty_start = parseInt($(this).closest('.js_cart').find('.kolvo').val(),10), 
        cart_sum_start = parseInt($('.cart_total_sum').text(),10); 
    
    $(this).change(function(){              
        var cart_product = $(this).closest('.js_cart'), 
        		cart_qty=parseInt(cart_product.find('.kolvo').val(),10),  
            cart_nas = parseInt(cart_product.find('.z_price').text(),10), 
      			cart_total_quantity = parseInt($('.cart_total_quantity').text(),10), 
            cart_total_sum = parseInt($('.cart_total_sum').text(),10), 
            vbn = cart_qty - cart_qty_start, 
            nbv = cart_total_sum - cart_sum_start; 
               
            var totals_cart_quantity = cart_total_quantity+vbn;                                       
            var totals_cart_sum = cart_total_sum+nbv; 
                                                                 
            $(".cart_total_quantity").text(totals_cart_quantity);  
            $(".cart_total_sum").text(totals_cart_sum);                         
    }); 
});

.table{text-align: center;} 
.kolvo{width:40px;text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="table" border="2" cellspacing="0" cellpadding="5"> 
  <tr>       	 
          <td>Имя</td> 
          <td>Кол-во</td>  
          <td>Цена</td>	 
  </tr> 
  <tr class="js_cart">       	 
          <td>Товар №1</td> 
          <td><input class="kolvo"  type="number" value="1" /></td>  
          <td class="z_price">450</td>	 
  </tr> 
  <tr class="js_cart">       	 
          <td>Товар №2</td> 
          <td><input class="kolvo"  type="number" value="1" /></td>  
          <td class="z_price">550</td>	 
  </tr> 
  <tr> 
		<td>Итого:</td> 
		<td colspan="2"  align="right"> 
          <span class="cart_total_quantity">2</span> шт. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cart_total_sum">1000</span> руб.  
    </td> 
	 </tr> 
</table>

Обновление:

$(".kolvo").on("change keyup", function(){
  var totals_cart_quantity = 0,
      totals_cart_sum = 0,
      id = $(this).attr("id");    
      id=id.substr(2);
      $(".js_cart").each(function() {
         var cart_qty = parseInt($(this).find(".kolvo").val(),10),   
             cart_price = parseInt($(this).find('.z_price').text(),10);                                          
         $.ajax({
            url: '/'+"cart/qty="+cart_qty+"/id="+id,
            data: {id: id, cart_qty: cart_qty},
            type: 'GET',
            success: function(res){
              totals_cart_quantity = totals_cart_quantity + cart_qty;
              totals_cart_sum = totals_cart_sum + cart_qty * cart_price;
              $(".cart_total_quantity").text(totals_cart_quantity); 
              $(".cart_total_sum").text(totals_cart_sum);
          },
          error: function(){
            alert('Ошибка!');
          }
        });
     });                                                           
});

Answer 1

function UpdateTotals() { 
  var count = 0; 
  var sum = 0; 
 
  $(".js_cart").each(function() { 
    count = count + parseInt($(this).find(".kolvo").val()); 
    sum = sum + parseInt($(this).find(".kolvo").val()) * parseInt($(this).find(".z_price").text()); 
  }); 
 
  $(".cart_total_quantity").text(count);  
  $(".cart_total_sum").text(sum);                         
} 
 
$(".kolvo").on("change keyup", function(){ 
  // 1. send the changing item info to the server  
  var id = $(this).attr("id").substr(2); 
  var newQuantity = parseInt($(this).val());   
 
  $.ajax({ 
    url: '/'+"cart/qty="+newQuantity+"/id="+id, 
    // why do we need data, if values are already in url? 
    data: {id: id, cart_qty: cart_qty}, 
    type: 'GET', 
    success: function(res){ 
      console.log("success"); 
    }, 
    error: function(request){ 
      console.log(request); 
    } 
  }); 
 
  // 2. recalculate the number of things bought and what they cost 
  UpdateTotals(); 
});

.table{text-align: center;} 
.kolvo{width:40px;text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="table" border="2" cellspacing="0" cellpadding="5"> 
  <tr>       	 
          <td>Имя</td> 
          <td>Кол-во</td>  
          <td>Цена</td>	 
  </tr> 
  <tr class="js_cart">       	 
          <td>Товар №1</td> 
          <td><input class="kolvo"  type="number" value="1" /></td>  
          <td class="z_price">450</td>	 
  </tr> 
  <tr class="js_cart">       	 
          <td>Товар №2</td> 
          <td><input class="kolvo"  type="number" value="1" /></td>  
          <td class="z_price">550</td>	 
  </tr> 
  <tr> 
		<td>Итого:</td> 
		<td colspan="2"  align="right"> 
          <span class="cart_total_quantity">2</span> шт. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="cart_total_sum">1000</span> руб.  
    </td> 
	 </tr> 
</table>