小计在我的电子商务购物车中更改产品数量后不会更新

Question

我正在创建一个电子商务网站，我正在努力与购物车部分的产品数量。当我增加数量时，小计不会增加。

这里是用户可以增加和减少产品数量的地方。

<div class="qty d-flex pt-2">
<div class="d-flex font-rale w-25">
<form method="post"> 
<button class="qty-up border bg-light" data-id="<?php echo $item['ProductID'] ?? '0'; ?>"><i class="fas fa-angle-up"></i></button>
<input type="text" data-id="<?php echo $item['ProductID'] ?? '0'; ?>" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1">
<button data-id="<?php echo $item['ProductID'] ?? '0'; ?>" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
</form>
</div>
</div>

下面是JavaScript代码

$(document).ready(function(){
$('.qty-up').click(function(e) {
e.preventDefault();
var inc_value = $(this).closest('.qty d-flex').find('.qty_input').val();
var value = parseInt(inc_value,10);
value = isNaN(value) ? 0 : value;
if(value < 10){
value++;
$(this).closest('.qty d-flex').find('.qty_input').val();
}
});
$('.qty-down').click(function(e) {
e.preventDefault();
var dec_value = $(this).closest('.qty d-flex').find('.qty_input').val();
var value = parseInt(dec_value,10);
value = isNaN(value) ? 0 : value;
if(value > 1){
value--;
$(this).closest('.qty d-flex').find('.qty_input').val();
}
});
// product qty section
let $qty_up = $(".qty .qty-up");
let $qty_down = $(".qty .qty-down");
let $input = $(".qty .qty_input");
// click on qty up button
$qty_up.click(function(e){
let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
let $price = $(`.productPrice[data-id='${$(this).data("id")}']`);
if($input.val() >= 1 && $input.val() <= 9){
$input.val(function(i, oldval){
return ++oldval;
});
}
});
// click on qty down button
$qty_down.click(function(e){
let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
if($input.val() > 1 && $input.val() <= 10){
$input.val(function(i, oldval){
return --oldval;
});
}
});
});

在这里你可以看到小计

<section id="cart-add" class="section-p1">
<div id="subtotal">
<h3>Cart Total</h3>
<table>
<tr>
<td>Cart Subtotal( <?php echo isset($subTotal) ? count($subTotal): 0; ?> item):</td>
<td>$<?php echo isset($subTotal) ? $Cart->getSum($subTotal) :0 ?></td>
</tr>
</table>
<button class="submit">proceed to checkout</button>
</div>

这里是getSum函数

//calculate sub total
public function getSum($arr){
if(isset($arr)){
$sum = 0;
foreach($arr as $product){
$sum += floatval($product[0]);
}
return sprintf('%.2f', $sum);
}
}

我试过了，但就是想不出来。

Answer 1

修改你的javascript代码为:

...
$('.qty-up').click(function(e) {
e.preventDefault();
var inc_value = $(this).closest('.qty d-flex').find('.qty_input').val();
var value = parseInt(inc_value,10);
value = isNaN(value) ? 0 : value;
if(value < 10){
value++;
$(this).closest('.qty d-flex').find('.qty_input').val(value); // updated line
}
});
$('.qty-down').click(function(e) {
e.preventDefault();
var dec_value = $(this).closest('.qty d-flex').find('.qty_input').val();
var value = parseInt(dec_value,10);
value = isNaN(value) ? 0 : value;
if(value > 1){
value--;
$(this).closest('.qty d-flex').find('.qty_input').val(value); // updated line
}
});
...

*在你的代码中没有地方可以更新后端数量