ショッピングカートの個数、小計を動的に表示するには？

Question

練習用にECサイトを自作しています。ショッピングカートページの商品の個数をセレクトボックスで表示しています。

              <select name="product-num"　data-productid="<?php echo $val['id']; ?>"　class="js-select-num">
                <?php for($i = 0; $i < 30; $i++) : ?>
                  <option value="<?php echo $i?>" <?php if ($i == $num)  echo "selected"; ?> ><?php echo $i?></option>
                <?php endfor ; ?>
              </select>

こんな感じです。（変数は気にしないでください）

ショッピングカートページで個数を増やしたり減らしたりできる（同時に合計金額やカート内の個数も増減する）仕様にしたいです。

ショッピングカートのデータはセッションで保存してあります。

Ajaxを使えば可能だと思いましたが、よくわかりませんでした。

他にも、ググってみましたが、ピントくるものがなかったので質問させていただきました。

こーゆう感じでできるのでは？だったり、このサイト見れば参考になるだったり、ざっくりでいいので助言をお願いします。不備があればご指摘お願いします。

※追記

  var $select = $('.js-select-num');
  var selectProductId = $select.data('productid');
  $select.on('change', function() {
  var value = $select.val();
    $.ajax({
      type: "POST",
      url: "ajaxNum.php",
      data: {
        productId : selectProductId,
        number : value,
      },
    }).done(function( data ) {
      console.log('Ajax success');

    }).fail(function ( msg ) {
      console.log('Ajax failure');
    });

    });

ajaxNum.phpではショッピングカート内のデータである$_SESSIONを変更するようにしましたが、
$_SESSION変数の値を変えた後に、動的にhtmlを変える方法が分かリません。

以上の理由でajaxではなく、違う方法で探そうと思いました。

Answer 1

Ajaxを使えば可能だと思いましたが、よくわかりませんでした。

「わからない」ではこちらもわからないのですけど、
理解できるまで頑張ってください。
唯一の手段というわけではないですが、最もよく用いられる手段のひとつですし、理解しておくべき技術です。

リクエストとレスポンスの概念さえ理解できていればやってることはform送信と同じです。

Comments

[m.ts10806]

試してもなければ分からないのは当然というスタンス。

[neginattofan]

仰るとおりです。現時点で分からない箇所をあげてみました。

Answer 2

カートの数字は本来サブミットさせるべき処理
どうしてもajaxでカートまでいじりたいなら

• ajaxでapiに送る
• apiでカートに登録、セッション更新、登録アイテム・数量・金額を戻す
• 受け取ったデータをもとに表示領域を更新

Comments

[neginattofan]

なるほど、そうだったんですね。APIについてもう少し調べてみます。

Answer 3

増減するボタンにclickイベント仕込んで再計算させればいいんじゃないかな。
当然、数量のinput要素に一定のルールのnameやidをつけてあれば、
セレクターですぐたぐれそうな気がする。

しらんけど。

「jquery ボタン クリック」とか
「jquery セレクタ」で説明記事を探して理解を深めてください、としか。

Comments

[neginattofan]

ありがとうございます。僕もjQueryで画面の数字だけを変えることはできるだろうとは思いました。ただそれだけでは不十分で同時にカートのデータを変更する必要があると考えますが、いかがでしょうか？

[退会済みユーザー]

input要素に計算後の数字を詰める前提で話をしているんじゃないの？
input要素を適切に選択するのに、セレクターを駆使してね、って話。
（あぁ、カートの情報はセッションに置いてあるのか。）

[退会済みユーザー]

セッションに置いているデータを更新するのに、サーバーに一旦データ送信したらいいと思う。
それもjQueryでajaxするとか方法はある。
って、結局は、yambejpさんのいう話になってしまうのだけど。

[neginattofan]

ありがとうございます。質問がわかりづらかった部分があったと思うので、再度分からない部分を整理して質問させていただきます。（ajaxでセッションのデータを更新することはなんとか実装できました）