ショッピングカートの会員登録から商品管理に
戻ってしまいましたが、再びカートの内容を
進めていきましょう。
とはいっても、【9.顧客情報入力完了】で
一通りショッピングカートを作り終え、
それ以降は会員登録を追加していきました。
では、カートフロー(お買い物の流れ)を入れましょう。
カートフロー
カートフローとは、今ショッピングカートの
どの位置にいるのかを示すものです。
サンプルファイル
＜記述例＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ショッピングカートフロー</title>
<style type="text/css">
<!--
ul.cartflow {padding:10px;background:palegoldenrod;border:1px solid silver;margin: 10px auto;display:inline-block;}
ul.cartflow li{background: darkgray;border-radius: 0 30% 30% 0 / 0 50% 50% 0;padding: 5px 15px 5px 10px;width:80px;display:inline-block;text-align: center;margin: 0;}
ul li.choice{background: tomato;border:3px solid maroon;font-weight: bold;}
-->
</style>
</head>
<body>
<main>
<section>
<h3>カートフロー見本</h3>
<div style="text-align: center;">
<ul class="cartflow">
<li>カート</li>
<li class="choice">情報入力</li>
<li>入力確認</li>
<li>注文確定</li>
</ul>
</div>
</section>
</main>
</body>
</html>＜表示例＞
21行目：今の位置をclass=”choice”で示しています。
カートであれば20行目にclass=”choice”を入れます。
追加分のみ記述します。
ファイル名：item_cart.php
＜記述例＞
21：ul.cartflow {padding:10px;background:palegoldenrod;border:1px solid silver;margin: 10px auto;display:inline-block;}
22：ul.cartflow li{background: darkgray;border-radius: 0 30% 30% 0 / 0 50% 50% 0;padding: 5px 15px 5px 10px;width:80px;display:inline-block;text-align: center;margin: 0;}
23：ul li.choice{background: tomato;border:3px solid maroon;font-weight: bold;}21～23行目：カートフローのCSS追加
74：print '<div style="text-align: center;">';
75：print '<ul class="cartflow">';
76：print '<li class="choice">カート</li>';
77：print '<li>情報入力</li>';
78：print '<li>入力確認</li>';
79：print '<li>注文確定</li></ul></div>';74～79行目：カートフロー追加。
76行目：カートを選択。
＜表示例＞
ファイル名：inputinfo.html
＜記述例＞
CSS追加
21：ul.cartflow {padding:10px;background:palegoldenrod;border:1px solid silver;margin: 10px auto;display:inline-block;}
22：ul.cartflow li{background: darkgray;border-radius: 0 30% 30% 0 / 0 50% 50% 0;padding: 5px 15px 5px 10px;width:80px;display:inline-block;text-align: center;margin: 0;}
23：ul li.choice{background: tomato;border:3px solid maroon;font-weight: bold;}カートフロー追加
32：<div style="text-align: center;">
33： <ul class="cartflow">
34： <li>カート</li>
35： <li class="choice">情報入力</li>
36： <li>入力確認</li>
37： <li>注文確定</li>
38： </ul>
39：</div>36行目：情報入力を選択。
＜表示例＞
ファイル名：inputinfo_chk.php
＜記述例＞
CSS追加
21：ul.cartflow {padding:10px;background:palegoldenrod;border:1px solid silver;margin: 10px auto;display:inline-block;}
22：ul.cartflow li{background: darkgray;border-radius: 0 30% 30% 0 / 0 50% 50% 0;padding: 5px 15px 5px 10px;width:80px;display:inline-block;text-align: center;margin: 0;}
23：ul li.choice{background: tomato;border:3px solid maroon;font-weight: bold;}カートフロー追加
30：<div style="text-align: center;">
31： <ul class="cartflow">
32： <li>カート</li>
33： <li>情報入力</li>
34： <li class="choice">入力確認</li>
35： <li>注文確定</li>
36： </ul>
37：</div>34行目：入力確認を選択。
＜表示例＞
ファイル名：inputinfo_end.php
CSS追加
＜記述例＞
22：ul.cartflow {padding:10px;background:palegoldenrod;border:1px solid silver;margin: 10px auto;display:inline-block;}
23：ul.cartflow li{background: darkgray;border-radius: 0 30% 30% 0 / 0 50% 50% 0;padding: 5px 15px 5px 10px;width:80px;display:inline-block;text-align: center;margin: 0;}
24：ul li.choice{background: tomato;border:3px solid maroon;font-weight: bold;}カートフロー追加
31：<div style="text-align: center;">
32： <ul class="cartflow">
33： <li>カート</li>
34： <li>情報入力</li>
35： <li>入力確認</li>
36： <li class="choice">注文確定</li>
37： </ul>
38：</div>36行目：注文確定を選択。
＜表示例＞
これでお買い物の流れがわかるでしょう。
商品詳細ページ
これまで作成したショッピングカート見本では、
商品一覧からそのままカートに入るようになっています。
普通のECサイトでは商品の数がもっと多い
ですから、一覧から詳細ページに行き、
詳細ページにカートに入れるボタンがあります。
詳細ページからフォームで商品IDと商品名、数量を
送信できれば、どのようなデザインでも
問題なくカートに入れることができます。
商品の情報が多い場合、例えば色違いや大きさ違い等
細かい情報が必要なら、すべての情報を送信すると
間違いやすく大変です。
だから別の方法として、商品IDと数量だけ送信して
後はカートのページでデータベースに接続して
情報を得ることで解決します。
変更例として以下のファイルを修正してみます。
ファイル名：item_cart.php
[$name]と[$price]のセッションを使わないので、
変更前37・38・44・45・57・58・61・62・69・70行を削除します。
変更前92行目に追加。
82：try
83：{
84：$dbh=dbconnect();
85：$dbh->query('SET NAMES utf8');
86：for($i=0;$i<$max;$i++)
87：{
88： $sql='SELECT name,price FROM goods WHERE id=?';
89： $stmt=$dbh -> prepare($sql);
90： $data[0]=$id[$i];
91： $stmt -> execute($data);
92： $rec=$stmt -> fetch(PDO::FETCH_ASSOC);
93： $name[]=$rec['name'];
94： $price[]=$rec['price'];
95： $i1=$i+1;
96： print '<tr><td>'.$i1.'</td><td>'.$name[$i].'</td>';
97： print '<td class="right">'.number_format($price[$i]).'</td>';
98： print '<td><input type="text" name="num'.$i.'" style="width:30px;" value="'.$num[$i].'" class="right"></td>';
99： $sub=$price[$i] * $num[$i];
100： $sum += $sub;
101： print '<td class="right">'.number_format($sub).'</td>';
102： print '<td><input type="checkbox" name="del'.$i.'"></td></tr>';
103：}
104：$dbh=null;
105：}
106：catch(Exception $e)
107：{
108： print ' ただいま障害により大変ご迷惑をおかけしております。';
109： exit();
110：}88行目：SELECT文で[id]が同じ商品を探し
その商品名と価格を読み込んでいます。
変更前92～102行目のprint文は一緒にしたので削除します。
こんな感じでできますが、この後の
顧客情報入力チェック[inputinfo_chk.php]
顧客情報入力完了[inputinfo_end.php]
で商品情報をデータベースから読み込む必要があります。
その方法は上記[item_cart.php]の時と同じです。
これでショッピングカート作成に
会員登録など追加部分も終わりました。
コメント