ショッピングカートの会員登録から商品管理に
戻ってしまいましたが、再びカートの内容を
進めていきましょう。
とはいっても、【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]の時と同じです。
これでショッピングカート作成に
会員登録など追加部分も終わりました。
コメント