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

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 function

//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
    }
});
...

*在您的代码中，您没有在后端更新数量的地方。