• No : 242
  • 公開日時 : 2017/10/06 10:52
  • 更新日時 : 2021/11/02 13:21
  • 印刷

複数の商品を一気にまとめ買いできるようにしたいです。

回答

【注意:futureshopと別のドメインにてカートHTMLタグを利用される場合(2020/1/22追記)】

2020年2月にGoogle Chromeにおいて仕様変更があり、
futureshop側の設定変更を行わない場合、
ショッピングカートのデータがクリアされたり、
ログイン状態がログアウトされる場合があります。
詳細は下記の記事をご覧ください。

■虎の巻:Google ChromeのCookie 設定の変更に伴い、必要な対応はありますか?(SameSite)

 

カートボタン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 />
    選択した商品が1つショッピングカートに入ります </div>
  <div style="margin-top:20px;" align="center">
    <input name="submit" type="image" src="カートへの画像URL" value="カートへ" />
  </div>
</form>
  

※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。

 

 

 

複数の商品の中から1つ商品を選択して、カートへ入れる方法

いずれかの商品を数量「1」でカートに入れるため、

<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はじまりで記述してください。