■基本
自動発行されるHTMLタグは以下のとおりです
<form Action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi" METHOD=POST>
<INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="商品番号">
<INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品名">
<INPUT TYPE="hidden" NAME="kakaku" VALUE="金額">
<INPUT TYPE="hidden" NAME="bikou" VALUE="備考">
<SELECT NAME="kazu">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
</SELECT>
<BR>
<INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="カートに入れる"></FORM>
■商品のサイズ項目を設けたい
ポイント
<INPUT TYPE="hidden" NAME="bikou" VALUE="備考"> の部分をサイズ選択のポップアップに変更する
タグ記入例
<form Action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi" METHOD=POST>
<INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="商品番号">
<INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品名">
<INPUT TYPE="hidden" NAME="kakaku" VALUE="金額">
<select name="bikou">
<option value="Sサイズ">S</option>
<option value="Mサイズ">M</option>
<option value="Lサイズ">L</option>
</select>
<SELECT NAME="kazu">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
</SELECT>
<BR>
<INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="カートに入れる"></FORM>
■さらに商品の色を選択する項目を追加
ポイント
<INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品名">の部分を色選択のポップアップに変更する
タグ記入例
<form Action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi" METHOD=POST>
<INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="商品番号">
<INPUT TYPE="hidden" NAME="kakaku" VALUE="金額">
<select name="shouhinmei">
<option value="商品名(赤)">赤</option>
<option value="商品名(青)">青</option>
<option value="商品名(黄)">黄</option>
</select>
<select name="bikou">
<option value="Sサイズ">S</option>
<option value="Mサイズ">M</option>
<option value="Lサイズ">L</option>
</select>
<SELECT NAME="kazu">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
</SELECT>
<BR>
<INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="カートに入れる"></FORM>
■複数商品を一覧表示にする
ポイント
<form Action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi" METHOD=POST>
と
<INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="カートに入れる"></FORM>
の間に複数商品を記入する
以下はショッピングカートサンプルに掲載している一覧表示の例です
テーブルを使っているため、ソース表示にするとちょっと解りずらくなってしまいますが...
タグ記入例
<form action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi" method=POST>
<table border="1" cellpadding="0" cellspacing="0" width="400">
<tr>
<td bgcolor="#ffffcc"><div align="center">商品番号</div></td>
<td bgcolor="#ffffcc"><div align="center">商品名</div></td>
<td bgcolor="#ffffcc"><div align="center">金額</div></td>
<td bgcolor="#ffffcc"><div align="center">色</div></td>
<td bgcolor="#ffffcc"><div align="center">サイズ</div></td>
<td bgcolor="#ffffcc"><div align="center">注文数</div></td>
</tr>
<tr>
<td><div align="center">ab001</div></td><td>商品A</td>
<td><div align="right">5800円</div></td>
<td><div align="center">−</div></td>
<td><div align="center">−</div></td>
<td><div align="center"><INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="ab001"><INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品A"><INPUT TYPE="hidden" NAME="kakaku" VALUE="5800"> <INPUT TYPE="hidden" NAME="bikou" VALUE="-"><SELECT NAME="kazu"><OPTION>0<OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5</SELECT></div></td>
</tr>
<tr><td><div align="center">ab002</div></td>
<td>商品B</td>
<td><div align="right">4800円</div></td>
<td><div align="center">−</div></td>
<td><div align="center"><select name="bikou" size="1"><option value="Sサイズ">S</option><option value="Mサイズ">M</option><option value="Lサイズ">L</option></select></div></td>
<td><div align="center"><INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="ab002"><INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品B"><INPUT TYPE="hidden" NAME="kakaku" VALUE="4800"><SELECT NAME="kazu"><OPTION>0<OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5</SELECT></div></td>
</tr>
<tr>
<td><div align="center">ab003</div></td>
<td>商品C</td>
<td><div align="right">7800円</div></td>
<td><div align="center"><select name="shouhinmei" size="1"><option value="商品C(赤)">赤</option><option value="商品C(青)">青</option><option value="商品C(黄)">黄</option></select></div></td>
<td><div align="center"><select name="bikou" size="1"><option value="Sサイズ">S</option><option value="Mサイズ">M</option><option value="Lサイズ">L</option></select></div></td>
<td><div align="center"><INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="ab003"><INPUT TYPE="hidden" NAME="kakaku" VALUE="7800"><SELECT NAME="kazu"><OPTION>0<OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5</SELECT></div></td></tr></table>
<input name="SUBMIT" type="SUBMIT" value="カートに入れる"></form>
■「カートの中を確認」ボタンを置く
タグ記入例
<form action="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi">
<input type="SUBMIT" value="カートの中を確認">
</form>
または http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi へ直接リンクしてもOK
タグ記入例
<a href="http://www.luckybreak.co.jp/shoppingcart/your_ID/cart/setcook.cgi">カートの中を見る</a>
■ショッピングカートが利用できるかテストする
ショッピングカートを利用するにはブラウザの設定でクッキー(Cookie)が有効になっている必要があります。ショッピングカートの作動試験ができるCGIがありますのでご利用ください。
タグ記入例
<form action="http://www.luckybreak.co.jp/shoppingcart/cookie.cgi">
<input type="SUBMIT" value="作動テスト">
</form>
または http://www.luckybreak.co.jp/shoppingcart/cookie.cgi へ直接リンクしてもOK
タグ記入例
<a href="http://www.luckybreak.co.jp/shoppingcart/cookie.cgi">作動テスト</a>
■その他
在庫を表示する
フォームの中に以下のタグを記入すると在庫が表示され、在庫数以上の注文が出来なくなります。
<input type="hidden" name="zaiko" value="在庫数">
(注)注文に連動して在庫数が減るわけではないので、受注後にホームページの在庫数の書き換えが必要です
|