ショッピングカート応用例

■基本

表示例

自動発行されるHTMLタグは以下のとおりです
<form Action="http://www.luckybreak.co.jp/sc02/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/sc02/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="Ｓサイズ">Ｓ</option>
<option value="Ｍサイズ">Ｍ</option>
<option value="Ｌサイズ">Ｌ</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/sc02/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="Ｓサイズ">Ｓ</option>
<option value="Ｍサイズ">Ｍ</option>
<option value="Ｌサイズ">Ｌ</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>

■複数商品を一覧表示にする

表示例
商品番号
商品名
金額
色
サイズ
注文数
ab001
 商品Ａ
５８００円
−
−
ab002
 商品Ｂ
４８００円
−
ab003
 商品Ｃ
７８００円

ポイント
<form Action="http://www.luckybreak.co.jp/sc02/your_ID/cart/setcook.cgi" METHOD=POST>
と
<INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="カートに入れる"></FORM>
の間に複数商品を記入する

以下はショッピングカートサンプルに掲載している一覧表示の例です
テーブルを使っているため、ソース表示にするとちょっと解りずらくなってしまいますが...
タグ記入例
<form action="http://www.luckybreak.co.jp/sc02/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>商品Ａ</td>
<td><div align="right">５８００円</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="商品Ａ"><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>商品Ｂ</td>
<td><div align="right">４８００円</div></td>
<td><div align="center">−</div></td>
<td><div align="center"><select name="bikou" size="1"><option value="Ｓサイズ">Ｓ</option><option value="Ｍサイズ">Ｍ</option><option value="Ｌサイズ">Ｌ</option></select></div></td>
<td><div align="center"><INPUT TYPE="hidden" NAME="shouhinnumber" VALUE="ab002"><INPUT TYPE="hidden"NAME="shouhinmei" VALUE="商品Ｂ"><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>商品Ｃ</td>
<td><div align="right">７８００円</div></td>
<td><div align="center"><select name="shouhinmei" size="1"><option value="商品Ｃ（赤）">赤</option><option value="商品Ｃ（青）">青</option><option value="商品Ｃ（黄）">黄</option></select></div></td>
<td><div align="center"><select name="bikou" size="1"><option value="Ｓサイズ">Ｓ</option><option value="Ｍサイズ">Ｍ</option><option value="Ｌサイズ">Ｌ</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/sc02/your_ID/cart/setcook.cgi">
<input type="SUBMIT" value="カートの中を確認">
</form>

または http://www.luckybreak.co.jp/sc02/your_ID/cart/setcook.cgi へ直接リンクしてもＯＫ
タグ記入例
<a href="http://www.luckybreak.co.jp/sc02/your_ID/cart/setcook.cgi">カートの中を見る</a>

■ショッピングカートが利用できるかテストする

ショッピングカートを利用するにはブラウザの設定でクッキー（Cookie）が有効になっている必要があります。ショッピングカートの作動試験ができるＣＧＩがありますのでご利用ください。

表示例

タグ記入例
<form action="http://www.luckybreak.co.jp/shoppingcart/cookie.cgi">
<input type="SUBMIT" value="作動テスト">
</form>

または http://www.luckybreak.co.jp/shoppingcart/cookie.cgi へ直接リンクしてもＯＫ
タグ記入例
<a href="http://www.luckybreak.co.jp/shoppingcart/cookie.cgi">作動テスト</a>

■その他

在庫を表示する
フォームの中に以下のタグを記入すると在庫が表示され、在庫数以上の注文が出来なくなります。
<input type="hidden" name="zaiko" value="在庫数">

（注）注文に連動して在庫数が減るわけではないので、受注後にホームページの在庫数の書き換えが必要です