複数の商品を一気にまとめ買いできるようにしたいです。
- 更新日： 2023-02-22 04:53:21 UTC
コマースクリエイター未利用店舗様専用の記事です
カートボタンHTMLタグの基本的な使い方については以下の記事をご参照ください。
本記事ではコマースクリエイター未利用店舗様向けに以下の4種類の実装方法をご紹介します。
- 好きな数量だけ、まとめてカートへ入れる方法
- 数量をセレクトボックスで選択し、まとめてカートへ入れる方法
- 欲しい商品だけチェック（選択）し、まとめてカートへ入れる方法
- 複数の商品の中から１つ商品を選択して、カートへ入れる方法
好きな数量だけ、まとめてカートへ入れる方法
サンプルソース
<form action="http://設定ドメイン/fs/店舗KEY/ToCart.html" method="post">
<table width="620" border="0" align="center" cellpadding="3" cellspacing="2" style="text-align:center;">
<tr>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
</tr>
<tr>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
</tr>
<tr>
<td style="font-size:18px; color:#FF9900; font-weight:bold" width="25%">オレンジ</td>
<td style="font-size:18px; color:#FF3333; font-weight:bold" width="25%">いちご </td>
<td style="font-size:18px; color:#009933; font-weight:bold" width="25%">キウイ </td>
<td style="font-size:18px; color:#FFCC00; font-weight:bold" width="25%">バナナ </td>
</tr>
<tr>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<input name="cnt_商品番号" type="text" value="" size="5" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<input name="cnt_商品番号" type="text" value="" size="5" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<input name="cnt_商品番号" type="text" value="" size="5" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<input name="cnt_商品番号" type="text" value="" size="5" />
</td>
</tr>
</table>
<div style="margin-top:20px;" align="center">
<input name="submit" type="image" src="カートへの画像URL" value="カートへ" />
</div>
</form>
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。
「HTMLタグをダウンロード」ボタンを押すと、テキストファイルをダウンロードするウィンドウが開きます。
「開く」もしくは「保存」を選択して、ダウンロードしたファイルを開き、
カートボタンを設置したい任意の箇所に、取得したHTMLタグを記述します。
数量をセレクトボックスで選択し、まとめてカートへ入れる方法
セレクトボックスで数量を選択させることにより、擬似的に数量を制限することができます。
（※カートページではユーザーの任意の数量に変更可能です）
サンプルソース
<form action="http://設定ドメイン/fs/店舗KEY/ToCart.html" method="post">
<table width="620" border="0" align="center" cellpadding="3" cellspacing="2" style="text-align:center;">
<tr>
<td><img src="商品画像のサムネイルのURL" /></td>
<td><img src="商品画像のサムネイルのURL" /></td>
<td><img src="商品画像のサムネイルのURL" /></td>
<td><img src="商品画像のサムネイルのURL" /></td>
</tr>
<tr>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
</tr>
<tr>
<td style="font-size:18px; color:#FF9900; font-weight:bold" width="25%">オレンジ</td>
<td style="font-size:18px; color:#FF3333; font-weight:bold" width="25%">いちご </td>
<td style="font-size:18px; color:#009933; font-weight:bold" width="25%">キウイ </td>
<td style="font-size:18px; color:#FFCC00; font-weight:bold" width="25%">バナナ </td>
</tr>
<tr>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量<select name="cnt_商品番号">
<option value="0" selected>0</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<select name="cnt_商品番号">
<option value="0" selected>0</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<select name="cnt_商品番号">
<option value="0" selected>0</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
数量
<select name="cnt_商品番号">
<option value="0" selected>0</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
</table>
<div style="margin-top:20px;" align="center">
<input name="submit" type="image" src="カート画像のURL" value="カートへ" />
</div>
</form>
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。
欲しい商品だけチェック（選択）し、まとめてカートへ入れる方法
ショッピングカートへ入れる数量は固定で、欲しい商品を簡単に選択することができるため購入しやすくなります。
サンプルソース
<form action="http://設定ドメイン/fs/店舗KEY/ToCart.html" method="post">
<table width="620" border="0" align="center" cellpadding="3" cellspacing="2" style="text-align:center;">
<tr>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
</tr>
<tr>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
<td>セール価格525円<br />
(本体価格:500円)</td>
</tr>
<tr>
<td style="font-size:18px; color:#FF9900; font-weight:bold" width="25%">オレンジ</td>
<td style="font-size:18px; color:#FF3333; font-weight:bold" width="25%">いちご </td>
<td style="font-size:18px; color:#009933; font-weight:bold" width="25%">キウイ </td>
<td style="font-size:18px; color:#FFCC00; font-weight:bold" width="25%">バナナ </td>
</tr>
<tr>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
<INPUT TYPE="checkbox" name="cnt_商品番号" VALUE="1" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
<INPUT TYPE="checkbox" name="cnt_商品番号" VALUE="1" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
<INPUT TYPE="checkbox" name="cnt_商品番号" VALUE="1" />
</td>
<td>
<input type="hidden" name="goodsNo" value="商品番号" />
<INPUT TYPE="checkbox" name="cnt_商品番号" VALUE="1" />
</td>
</tr>
</table>
<div align="center"><br />
選択した商品が１つショッピングカートに入ります </div>
<div style="margin-top:20px;" align="center">
<input name="submit" type="image" src="カートへの画像URL" value="カートへ" />
</div>
</form>
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。
複数の商品の中から１つ商品を選択して、カートへ入れる方法
いずれかの商品を数量「１」でカートに入れるため、
<input name="cnt" type="text" value="1" size="5">
のように記述し、数量をどの商品と限定せずにカートに入れます。
サンプルソース
<form action="http://設定ドメイン/fs/店舗KEY/ToCart.html" method="post">
<table width="620" border="0" align="center" cellpadding="3" cellspacing="2" style="text-align:center;">
<tr>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
<td><img src="商品画像パス****.jpg" /></td>
</tr>
<tr>
<td>セール価格525円<br>
(本体価格:500円)</td>
<td>セール価格525円<br>
(本体価格:500円)</td>
<td>セール価格525円<br>
(本体価格:500円)</td>
<td>セール価格525円<br>
(本体価格:500円)</td>
</tr>
<tr>
<td style="font-size:18px; color:#FF9900; font-weight:bold" width="25%">オレンジ</td>
<td style="font-size:18px; color:#FF3333; font-weight:bold" width="25%">いちご </td>
<td style="font-size:18px; color:#009933; font-weight:bold" width="25%">キウイ </td>
<td style="font-size:18px; color:#FFCC00; font-weight:bold" width="25%">バナナ </td>
</tr>
</table>
<br>
<div style="margin-top:20px;" align="center">
<p> 数量
<input name="cnt" type="text" value="1" size="5">
<select name="goodsNo">
<option value="商品番号">オレンジ 500円</option>
<option value="商品番号">いちご 500円</option>
<option value="商品番号">キウイ 500円</option>
<option value="商品番号">バナナ 500円</option>
</select>
<br>
<br>
<input name="submit" type="image" src="カートへの画像URL" value="カートへ" />
<p></p>
</div>
</form>
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。