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


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

前回は商品をカートに追加する準備ができたので、今回は実際に商品をカートに追加します。
商品をカートに追加する処理はセッション変数を使います。
画面に [ 次へ ] ボタンと [ 買い物を続ける ] ボタンも追加します。

ついでに商品のカラーやサイズといった要素も追加して、セレクト(プルダウン)メニューで選択できるようにしてみます。まずは商品の購入画面を変更します。
これは前回同様ただの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="ml-item_name[01][test_01]" value="テスト商品" type="hidden" />
		<input name="ml-item_price[01][test_01]" value="100" type="hidden" />

	テスト商品<br />
	100円<br />
	サイズ
		<select name="ml-item_size[01][test_01]">
			<option>小</option>
			<option>中</option>
			<option>大</option>
		</select><br />
	カラー
		<select name="ml-item_color[01][test_01]">
			<option>赤</option>
			<option>白</option>
			<option>黒</option>
		</select><br />
	個数
		<select name="ml-item_num[01][test_01]">
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select><br />

		<input name="cart-in" type="submit" value="カートへ入れる" />
	</form>

</body>
</html>

▼サンプル

次にカート側の処理です。
前回は単純にフォームの値を配列で受け取り表示していただけですが、カートらしくテーブルを使って整形された状態で表示してみます。

カートを見る

前回同様、テーマフォルダの「functions.php」に記述します。

前回のスクリプトを以下のように改作してみましょう。

関連記事