SQL見るだけクエリ#292 特定の商品の数量を増やす「+」ボタン

記入日：2023-10-27　編集日：2023-10-27

特定の商品の数量を増やす「+」ボタンに関して解説してみようと思います。

特定の商品の数量を増やす「+」ボタン

このJavaScriptスクリプトは、Webページ上で商品の数量を操作する機能を提供します。

$('.increaseBtn').click(function() {
  var item_id = $(this).data('item_id'); 
  var quantity = parseInt($('#quantity' + item_id).text()); 
  var limit = 10;
  if (quantity < limit) { 
    quantity++; 
    $('#quantity' + item_id).text(quantity); 
    calculateSubtotal(item_id, quantity, unitItems); 
    calculateTotalPrice(unitItems); 
    if (quantity >= 1) { 
      $('#subtotalLabel' + item_id).show(); 
    }
  }
});

例えば、ショッピングカートで特定の商品の数量を増やす「+」ボタンを押した際に、 どのような処理が行われるかを制御します。

もし商品の在庫数に制限がある場合、このスクリプトはそれを考慮し、 制限内でのみ数量を増やすことができるようにします。

さらに、このスクリプトでは小計や合計金額も正しく計算され、リアルタイムに画面に反映されます。 これにより、ユーザーはショッピングカート内の商品の数量を直感的に操作できます。

このスクリプトは、JavaScriptを使用してこれらの機能を実現しています。


このスクリプトは、特定の商品の数量を増やす「+」ボタンがクリックされた際に実行されます。
具体的な処理は以下の通りです：

1. クリックされたボタンが属している商品の識別子を取得します。
2. 現在の商品の数量を取得します。
3. 個数の制限値を設定します（ここでは最大10個まで）。
4. 制限値未満の場合、個数を1増やし、画面に表示します。
5. 小計を計算する関数を呼び出します。
6. 合計金額を計算する関数を呼び出します。
7. 個数が1以上の場合、小計のラベルを表示します。

以上の手順により、商品の数量を操作し、それに応じて小計と合計金額を更新します。


以下では、具体的なコードの説明を行います：

// +ボタンがクリックされたときの処理
$('.increaseBtn').click(function() {
  // クリックされたボタンが属している商品の識別子を取得
  var item_id = $(this).data('item_id'); 

  // 現在の商品の個数を取得
  var quantity = parseInt($('#quantity' + item_id).text()); 

  // 制限値を設定
  var limit = 10;

  // 制限値を超えていない場合の処理
  if (quantity < limit) { 
    // 個数を1増やす
    quantity++; 
    // 個数を画面に表示
    $('#quantity' + item_id).text(quantity); 
    
    // 小計を計算する関数を呼び出し
    calculateSubtotal(item_id, quantity, unitItems); 
    
    // 合計金額を計算する関数を呼び出し
    calculateTotalPrice(unitItems); 

    // 個数が1以上の場合、小計のラベルを表示
    if (quantity >= 1) { 
      $('#subtotalLabel' + item_id).show(); 
    }
  }
});