PHPでショッピングカートを!【19.お買い物の流れを入れる】

PHP

ショッピングカートの会員登録から商品管理に
戻ってしまいましたが、再びカートの内容を
進めていきましょう。

とはいっても、【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]の時と同じです。

これでショッピングカート作成に
会員登録など追加部分も終わりました。

コメント

タイトルとURLをコピーしました