更改我的電子商務購物車中的產品數量后，小計不會更新

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

*在您的代碼中，您沒有在后端更新數量的地方。