カートの数量が変更された場合の価格の更新方法

Question

私はレビューカートを作成しています&チェックアウトフォーム。ユーザーが数量を変更したい場合は、数量を変更すると自動的に価格が変更されます。

コードを同じJSでプラスマイナスまたはセパレートで調整する際にお役立てください。

プラス&のためのJSマイナス：プラスマイナスのため

<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

次の2つの異なる戦略に従うことができます。

• を、Ajax呼び出しを使用してサーバーを起動パラメータとして数量を渡し、合計金額を計算し、それを返します。
• フロントエンドのすべての操作をjQueryで行い、最後に計算された値を渡して保存します。

In this link私は、提供されたHTMLで2番目の簡単な例をコーディングしました。私は、製品の基本価格

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

と魔法を行い、このjQueryのコードを隠さ入力計算値のため

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

をdiv要素を追加しました：

$(document).ready(function() { 

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

はそれが役に立てば幸い。 EDITED

：

私が追加（およびJSFiddleリンクを更新）すべての数量変化にDBを更新するために、jQueryを使ってAjax呼び出しをsuppossed：

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