Javascriptを使って買い物カート作成

前提

お忙しいところ閲覧ありがとうございます。
現在海外大学の課題でPHP ,HTML ,Javascriptを使ってECサイトを作成しています。
一つの画面上に商品一覧と買い物カートのページを同時に表示する必要があります。左部分が商品一覧で、右上部が商品一覧から商品をクリックした際にそれぞれ一致する商品の情報をデータベースから抽出して表示されるようになっています。（左はHTMLファイルのみ、右はPHPでデータベースから情報を取得しファイル上で反映され、ブラウザーに表示されるようになっています。）

右下部が買い物カートで、右上部に「買い物カート追加」ボタンをクリックした際にその商品の情報が表示されるようにしたいです。

現在、商品一覧ページと右上部のクリックした際に一致する商品情報が表示されるステップまではできました。

ネット上で様々な買い物カートの作り方の情報を見ましたが、ほとんどはHTMLファイル上で商品情報を直接入力した後買い物カートに反映する例で、データベースから取得し、反映する例はあまり見つからず、応用なので自力で解決できず途方に暮れています。

実現したいこと

ページの右下部が買い物カートで、右上部で「買い物カート追加」ボタンをクリックした際にその商品の情報が買い物カートに追加され、ページの買い物カート部分に表示されるようにしたいです。
合計金額なども計算する必要がありますが、その部分は自力でできます。
ですが、Javascriptそもそもコーディング自体が初心者なので生き詰まっています。

商品一覧クリックした際に一致した情報が表示されるPHPコード

PHP
1<html>
2<head>
3   
4</head>
5<body>
6<?php
7$servername = "localhost";
8$username = "・・・";
9$password = "・・・";
10$dbname = "assignment1";
11$conn = new mysqli($servername, $username, $password, $dbname);
12
13if ($conn->connect_error) {
14    die("Connection error: " . $conn->connect_error);
15}
16
17
18
19$product_name = "";
20$unit_price = "";
21$unit_quantity = "";
22$in_stock = "";
23$itemId = "";
24$showNoItem = "display: none";
25$showItem = "";
26
27
28if (isset($_GET['data'])) {
29    $itemId = $_GET['data'];
30    $sql = "SELECT product_id , product_name , unit_price, unit_quantity, in_stock  FROM products where product_id=".$itemId;
31    $result = $conn->query($sql);
32    if ($result->num_rows > 0) {
33        
34        $showNoItem = "display: none";
35        $showItem = "";
36        while($row = $result->fetch_assoc()) {
37            $product_name = $row["product_name"];
38            $unit_price =  $row["unit_price"];
39            $unit_quantity =  $row["unit_quantity"];
40            $in_stock =  $row["in_stock"];
41            break;
42        }
43    } else {
44
45        $showNoItem = "";
46        $showItem = "display: none";
47    }
48} else {
49    $showNoItem = "";
50    $showItem = "display: none";
51}
52
53
54
55?>
56
57<div id="noItem" style="<?php echo $showNoItem?>">Select items from categories on the left.</div>
58<div id="itemDiv" style="<?php echo $showItem?>">
59    <div class="item-title">
60        <span class="item-name"><?php echo $product_name?> </span>
61        (<span class="item-quatity"><?php echo $unit_quantity?></span>)
62    </div>
63    <div class="itemDetail">
64
65        <div class="item-desp">
66            <div class="in-stock-div">In Stock: <span class="item-in-stock"><?php echo $in_stock?> </span> </div>
67            <div class="price-tag-div">Price: <span class="item-price-red">$<?php echo $unit_price ?></span></div>
68            <p></p>
69            
70
71            <form action="bottom-right.php" method="get" target="bottom-right" class="order-row" onsubmit="return validate_quantity">
72                <input type="number" class="item-quatity-input spin0" min="1" value="1" name="display" id="display" onkeyup="addCartButtonCtrl()" >
73                <input type="hidden" name="productId" value="<?php echo $itemId?>">
74                <input type="hidden" name="productInfo" value='<?php echo "$product_name($unit_quantity)"?>'>
75                <input type="hidden" name="productPrice" value="<?php echo $unit_price ?>" >
76
77
78                <div class="add-cart-div">
79                    <input id="cart-button" class="btn btn-primary" type="submit" value="Add to Cart" title="Add to cart." onclick="updateShoppingCart()">
80
81                </div>
82            </form>
83        </div>
84
85    </div>
86</div>
87
88<?php
89$conn->close();
90
91?>
92</body>
93</html>

試したこと

他にPHPファイルを開いてJavascriptの「買い物カート追加」時のFunctionを設定してみましたが、今のところ何も反映されません・・・

Javascript
1$productId = "";
2$productInfo = "";
3$productPrice = "";
4
5if(isset($_GET['productId'])){
6    $productId = $_GET['productId'];
7    $productInfo = $_GET['productInfo'];
8    $productPrice = $_GET['productPrice'];
9}
10
11?>
12
13<html>
14<head>
15
16    <script type="text/javascript">
17
18        function updateShoppingCart() {
19            console.log('$productId','$productInfo','$productPrice');
20
21        }

Miyabi1101

2022/05/03 08:46

ご回答ありがとうございます。どの言語もちゃんと基礎から勉強し直そうと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

回答の前提

応用なので自力で解決できず途方に暮れています。

試したことを見る限り、PHPとJavaScriptを連携させる際の基本について理解が足りていない様に見受けられます。
そのため、具体的な回答をするためには最初から全部説明する必要があり、
質問掲示板で回答可能なボリュームを大きく超えているように思われます。

この状態だとなかなか回答がつかない（ほぼ回答作業依頼のような状態になるため）ので、
教材を最初から確認していって、理解できない部分をピンポイントに質問するところから始めるのが最終的には一番早いかと思いますよ。

質問の範囲で最も理解が足りていないと思われる点

他にも躓いているところはあると思うのですが、質問文から見える範囲で致命的に理解が足りていないところとしては

            console.log('$productId','$productInfo','$productPrice');

で、PHPの変数を直接JavaScriptから参照をしようとしているところです。
JavaScriptとPHPでは動作するタイミングも場所も違うので、直接変数を参照しあうことは出来ません。

（教材には何らかの形で必ず記載があるはずですが）基本的な流れとしては

PHPがサーバ上で動作しHTMLとJavaScriptを描画する
ブラウザがHTMLとJavaScriptを受け取る（ブラウザから右クリック→ソースを表示で表示されるものがこれです）
JavaScriptがブラウザ上で動作する

という流れになります。
JavaScriptが参照できるのは2の時点でHTMLとJavaScriptに記述されているもののみです。
(XHR,Fetchなどを使えばその限りではないですが、この課題の範疇だと気にしなくていいと思います)

まずは、ご自身で理解できる範囲でPHPとJavaScriptを書いてみて、上記の流れを理解されるのがいいかと思いますよ。

解決の流れ

解決の流れとしては以下のような感じにしてみると、どの時点で躓いているのかわかりやすいと思います。

PHPのことは忘れて、HTMLとJavaScriptだけで表からカートに投入する仕組みを作る
1で作ったHTMLをPHPで出力する

もし1の時点でさっぱりイメージ出来ないようであれば、JavaScriptによるHTML要素の操作について学習しなおす必要があります。
これも簡単なサンプルを書いてみて、分かりにくいところを具体的に質問されると良い回答が得られるかと思います。

投稿2022/04/18 05:09

編集2022/04/18 05:23

tanat

総合スコア18713

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！