購物車中數量更改時如何更新價格

Question

我正在填寫評論購物車和結帳表格。 如果用戶要更改數量，我希望如果更改數量，其價格將自動更改。

請幫助調整代碼中相同的JS的減號或減號。

圖片在評論購物車和結帳下方：

JS for Plus＆Minus：

<script type="text/javascript">
function subtractQty(){
    if(document.getElementById("number").value - 1 < 0)
        return;
    else
    document.getElementById("number").value--;
    }
</script>

HTML / PHP的減號：

<div class="quantity">
<input style="font-size:21px;" type="button" value="-" onclick='javascript: subtractQty();' class="">
<input id="number" type="number" value="<?php echo $qtyT; ?>" class="qty" name="picpac">
<input style="font-size:21px;" type="button" value="+"  onclick='javascript: document.getElementById("number").value++;'  class="plus">
</div>

Answer 1

您可以遵循兩種不同的策略：

• 通過Ajax調用來調用服務器，將數量作為參數傳遞，計算總量並返回。
• 使用jQuery完成前端的所有操作，最后，傳遞計算出的值來存儲它。

在此鏈接中，我使用您提供的HTML編寫了第二個示例的快速示例。 我剛剛為計算值添加了一個div

<div id="product1_total_price">0</div>

隱藏產品基本價格的輸入

<input type="hidden" id="product1_base_price" value="10">

這段神奇的jQuery代碼：

$(document).ready(function() {

$(".operator").on('click',function() {
  $("#product1_total_price").text($("#product1_base_price").val()*$("#number").val());
 });
});

希望能幫助到你。

編輯：

我使用jQuery添加（並更新了JSFiddle鏈接）假定的Ajax調用，以在每次數量更改時更新數據庫：

$.ajax({
        type: "GET",
        data: {
            idProduct: yourProductId,
            quantity: $("#number").val(),
            totalPrice: calculatedValue
        },
        url: "your-script.php",
        success: function(json_response) {

          if(json_response.result != 'SUCCESS') {
              // Whatever
          } else {
              alert("Updated in DB");
          });
    })