1
Colleagues,
I have this cart:
I would like to have you add or decrease the cart quantity (img 1), change the subtotal and total purchase (img 2 and 3) without refresh on the page. The code I have of img 1 follows below:
The values are stored in this way:
<td class="invert">R$<span id="produto">200,00</span></td>
<td class="invert">R$<span id="produto">270,00</span></td>
<td class="invert">R$<span id="produto">212,00</span></td>
Quantity buttons are of the shape below:
<div class="quantity">
<div class="quantity-select">
<div class="entry value-minus"> </div>
<div class="entry value"><span>1</span></div>
<div class="entry value-plus active"> </div>
</div>
</div>
<script>
$('.value-plus').on('click', function(){
var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)+1;
if(newVal < <?php echo $estoque; ?>) divUpd.text(newVal);
});
$('.value-minus').on('click', function(){
var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
</script>
I was able to change the total value by adding quantity by changing this line:
$('.value-plus').on('click', function(){
var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)+1;
if(newVal < <?php echo $numero; ?>) divUpd.text(newVal);
valor = document.getElementById("produto").innerHTML;
trocar = valor.replace(",",".");
valorTotal = trocar * newVal;
//alert(valorTotal);
document.getElementById("total").innerHTML = "R$"+valorTotal.toFixed(2);
});
But when I change the quantity for example of product 1 (200.00), it multiplies and changes the value, but when I change product 2 (270.00), it erases the value of product 1 and the same happens with product 3.
Hey, Fox, wouldn’t it be better to send this to the server side? Via ajax, because otherwise someone can change the value on the console easily and can give a headache when buying even, or even buy for a value of 0, just change the text on the console
– Miguel
Being a shopping cart, the ideal is to validate both on the client side and on the server side, as @Miguel commented. So you make sure that no one changes the value and sends a wrong value to the server.
– Douglas Garrido
Right. Actually it will change on the server yes, because the values of the cart are being stored in a BD table. I just need to make sure that when changing the quantity, the values are corrected without refreshing the page
– user24136