前回は在庫状況コードを取得し、在庫状況の文字列を表示させるという事をしました。
という事で、今回は『カートへ入れる』ボタンを追加してみようと思います。
それとせっかくなので、個数を選んでもらえるようにしましょう★
今回はまず「 .tpl 」の追加項目を記載しておきます。
━━━ ↓ サ ン プ ル 5 こ こ か ら ↓ ━━━━━━━━━━━━━━━━━━━━━
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル5</title>
</head>
<body>
【商品名】
<br>
{$name}
<br><br>
【商品説明】
<br>
{$Description}
<br><br>
【商品スペック】
<br>
{$spec}
<br><br>
<form action="http://cart.mp.moshimo.com/mp/cart/add">
個数
<select name="amount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<input type="image" src="http://www.moshimo.com/images/article/button-cart.gif" alt="カートに入れる" name="action_cart_add" value="カートに入れる" id="cartadd">
<input type="hidden" name="shop_id" value="{$shop_id}">
<input type="hidden" name="article_id" value="{$Article_Id}">
<input type="hidden" name="signature" value="">
</form>
<br><br>
【在庫状況】
<br>
{$stock_status}
</body>
</html>
━━━ ↑ サ ン プ ル 5 こ こ ま で ↑ ━━━━━━━━━━━━━━━━━━━━━
赤文字の部分を追加しました。
【商品スペック】と【在庫状況】の間に『カートへ入れる』ボタンのフォームを追加しています。
新たに {$shop_id} と {$Article_Id} の変数を追加しているので、次回は「 .php 」のソースを記載します。
下記はプルダウンメニューで、1個~5個までの個数を選べるようにしています。
<select name="amount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
個数を増やしたい場合は、同じように6,7,8、と増やしていっていください。
<input type="image" src="http://www.moshimo.com/images/article/button-cart.gif" alt="カートに入れる" name="action_cart_add" value="カートに入れる" id="cartadd">
今回はもしマーケットのボタンを使用していますが、赤文字部分を変えることで自分で作った画像や使いたい画像にすることができます。
その辺の解説はここではしませんので、変更したい場合は調べてくださいね。
それでは今回はこの辺で!次回は「 .php編 」をお届けします。
お疲れ様でした。
実際の表示確認 ⇒ サンプルサイト5
サンプルファイルのダウンロード ⇒ サンプル5