I am creating a shopping cart using session which is working, Now I am making the quantity part I mean User can increase the product quantity and decrease the quantity and according to that the total amount will display on screen without refresh the page. I just need when the user clicked on Plus sign then the amount will change as per quantity.
<?php echo $product['qty'];?>
I am getting this value from my session
Any idea how can I do this? I also added same code in https://jsfiddle.net/Narendra2015/uLx0912t/
/*increase the product qty*/
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
});
Second code after suggested Mr.A. Iglesias
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseInt($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
Css
.sp-quantity {
width:124px;
height:42px;
float: left;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
HTMl
<?php if(!empty($_SESSION['products'])):
foreach($_SESSION['products'] as $key=>$product):?>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-img">
<img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
</div>
<div class="pro-detail-name">
<h3><?php echo $product['p_name'];?></h3>
</div>
<?php
$p_delete=$product['p_id'];
//$decrypted_delete_id = decryptIt($p_delete);
$encrypted_user_id = encryptIt($p_delete);
$delete_product_id=urlencode($encrypted_user_id);
?>
<a href="my-cart?action=empty&deletekey=<?php echo $delete_product_id;?>" class="cross-cta"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</td>
<td>£<span id="price_cal"><?php echo $product['p_currentprice'];?></span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<?php $single_total = $product['qty']*$product['p_currentprice'];?>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
</tr>
<?php $total = $total+$single_total;
$_SESSION['total_cost']=$total;
endforeach;?>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td>£<?php $_SESSION['total_cost']=$total;echo $total;?></td>
<!-- <td><span>Shiping Cost</span></td>
<td><i class="fa fa-fighter-jet" aria-hidden="true"></i>£<?php echo $total;?></td> -->
</tr>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Total Cost</span></td>
<td>£<?php echo $total;?></td>
</tr>
</tbody>
<?php endif;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
for total amount, I added this in the script.
// Refresh total div.
var subtotal_amount = subtotal_amount+lineTotal;
$pro_list.find('td.subtotal_amount').data('price','£'+subtotal_amount).html('£'+subtotal_amount);
HTML inside <tr class="pro-list">
<td class='subtotal_amount' data-price='£<?php echo $total;?>'>£<?php echo $total;?></td>