この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスでショッピングカートを作ろう その6 商品をカートに追加する準備をする

前回は基本的なセッションの使い方までをひと通りやったので、今回はカート部分の作り方です。
ショッピングカートの基本はリスト化です。
おおまかには選択したものをリストに追加する、リストを確認する、リストを消去する、といった機能で構成されています。

「リストに追加する」というのは「カートに入れる」に相当します。この機能はセッション変数があるので簡単ですね。配列も使えるので複雑なデータも保存しておくことができます。
「リストを確認する」というのは「カートの中身を見る」に相当するわけですが、これは逆にセッション変数を呼び出して一覧にするだけです。
最後の「リストを消去する」というのは決済後にリストを空にすることですが、これは最後にセッションを破棄すればいいだけです。

今回は「カートに入れる=リストに追加する」ところまでを作ってみます。
作るにおいて大事なことは、保存するデータ構成です。
最低限必要なのは4つでしょうか。

・商品ID
・商品名
・価格
・購入数

場合によってはここに商品のカラー、サイズ、在庫といった情報が必要になってきます。
まずは簡単にするために上記の4つの情報だけに絞ります。

因みに一番ネックになるのが在庫管理です。というのも在庫は他のユーザーと同タイミングでの取り合いになった場合、下手をすると商品が1つなのに2人のユーザーのカートに入る可能性があるからです。
これを防ぐためには商品マスタ(帳簿)をデータベースに持ち、排他制御(セマフォ)をする必要があります。
どちらか一方が先に商品を買ったらロックをかけるわけです。これはデータベースが自動的にやってくれるので意識する必要はあまりないかと思います。
とりあえず、在庫管理が必要のない単純な無制限のデータという前提で作ってみます。

まず用意しなければならないのは仮の商品ページとショッピングカートのページです。
仮の商品ページはなんでもいいのですが、ショッピングカートのページは固定URLにする必要があるので、固定ページで作ります。

固定ページは管理画面の左サイドメニューから[ 固定ページ ] → [ 新規追加 ] の順序で作ります。
タイトルに「カートを見る」と入力し本文は「空」のままにしておきます。
次にタイトル下のパーマリンクを編集します。[ 編集 ] ボタンをクリックして「カートを見る」から「ml-cart」に変更します。
最後に [ 公開 ] ボタンで公開して終了です。

次に、商品をカートに入れると「http://あなたのドメイン/ml-cart/」またはパーマリンク表記がデフォルトであれば「http://あなたのドメイン?p=123456」のページが表示されるようにします。

これは簡単で以下のようにフォームを記述すれば先ほど作った固定ページが開きます。
「action」のURLはご自分のドメインに置き換えてみて下さい。

<form action="http://lesson-school.com/ml-cart/" method="post">
	<input name="cart-in" type="submit" value="カートへ入れる" />
</form>

上記の記述はただのHTMLなのでワードプレスであろうと、PHPファイルであろうと、HTMLファイルであろうと関係はないです。実際には商品ページを作ってそこから購入できるようにするわけですが、サンプルなので商品ページのサンプルはワードプレスにはおかないことにします。

以下はサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>商品ページテスト</title>
</head>
<body>

	<form action="http://lesson-school.com/ml-cart/" method="post">
		<input name="cart-in" type="submit" value="カートへ入れる" />
	</form>

</body>
</html>

▼サンプル

サンプルを開いて [ カートへ入れる ] ボタンをクリックすると固定ページ「ml-cart」に移動するのが分かると思います。

しかし、これだけでは商品の情報がまったく含まれていないので、なにか商品情報を追加しましょう。
商品名と商品価格を追加してみます。

<form action="http://lesson-school.com/ml-cart/" method="post">
	<input name="ml-item_name[1][test_01]" value="テスト商品" type="hidden" />
	<input name="ml-item_price[1][test_01]" value="100" type="hidden" />
	<input name="cart-in" type="submit" value="カートへ入れる" />
</form>

ポイントは商品情報は「type=”hidden”」で非表示にしておくことと、「name属性」配列で渡すことです。

name="ml-item_name[1][test_01]"

という表記は二次元配列を意味していて、こうすることであとでPHP側で配列で取り出すことが出来ます。
配列の一次元目の [1] はワードプレスのページIDを意味します。
配列の二次元目の [test_01]商品IDを意味します。
もちろん今は仮の値です。

以下はサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>商品ページテスト</title>
</head>
<body>

	<form action="http://lesson-school.com/ml-cart/" method="post">
		<input name="ml-item_name[1][test_01]" value="テスト商品" type="hidden" />
		<input name="ml-item_price[1][test_01]" value="100" type="hidden" />
		<input name="cart-in" type="submit" value="カートへ入れる" />
	</form>

</body>
</html>

▼サンプル

さて、サンプルを実行してみると何も起きませんね。
これはなぜかというと、ワードプレス側で値を受け取って処理していないためです。
値を送るだけではなにも起きないということを知ってもらうためにあえて作りました。

というわけで、次はワードプレス側で固定ページ「ml-cart」が閲覧されて、かつ値が送信されていればカートの中身を表示する、という機能を追加します。

カートを見る

ワードプレス側でで固定ページ「ml-cart」が閲覧されたかを判定するには以下のようにします。
プラグイン化は説明が面倒になるのでテーマフォルダの「functions.php」に記述します。

関連記事