カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。
- 更新日： 2024-08-24 02:09:28 UTC
コマースクリエイターご利用店舗様専用の記事です
※従来のfutureshopとコマースクリエイターでは、カートボタンの表示に用いるHTMLが異なります。
コマースクリエイター未利用店舗様は以下の記事をご参照ください。
■虎の巻：カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。
「カートヘ」の部分の<form>タグを任意の位置に記述することで、自由に商品ページを作ることができます。
|
バリエーション商品で利用する際の注意点 カートボタンのHTMLタグを貼り付けて利用する際、バリエーションの登録や削除、変更を行うと、 バリエーションの選択肢を変更した場合は、再度タグを出力してvalue値をお確かめください。
商品グループ、商品詳細のレイアウト内で利用する際の注意点 商品詳細レイアウト内の商品詳細エリア（システムパーツグループ）配下など、 詳細は下記のページをご確認ください。 |
もくじ
- HTMLタグの出力方法
- タグの仕様
- 数量をセレクトボックスにする方法
- 数量選択はチェックボックスにして「1個」（固定数量）をカートに入れる方法
- 数量選択はさせずに「1個」でカートに入れる方法
- 「カートへ」ボタンを「ボタン画像」にする方法
- 複数商品をまとめてカートに入れる方法
HTMLタグの出力方法
商品一覧からの出力方法
運用メニュー＞商品管理＞商品グループ管理＞(商品グループ)＞商品一覧/順序設定の
商品一覧右にある「HTMLタグ」をクリックしてください。
商品検索からの出力方法
運用メニュー＞商品管理＞商品検索 にて任意の条件で検索、
検索結果画面にてHTMLタグを出力したい商品行の右端、HTML列にチェックを入れ、
HTMLタグ出力の出力方法を選択し、「HTMLタグをダウンロード」をクリックしてください。
タグの仕様
バリエーションや項目選択肢などの有無により出力内容が異なりますが、カートボタンの基本は下記の5行になります。
<form action="https://契約ドメイン/p/cart/add" method="post">
<input type="hidden" name="products[商品番号].productNo" value="商品番号">
<input name="products[商品番号].quantity" type="text" value="" size="5">
<button type="submit">カートへ</button>
</form>
- action=""にて「カートへ」をクリックした先のURLを指定します。（https://契約ドメイン/p/cart/add）
- name="products[商品番号].productNo" value="商品番号" にて「どの商品か」を指定します。
- name="products[商品番号].quantity"のvalue値にて「何個買うか(数量)」を指定します。
数量をセレクトボックスにする方法
数量をセレクトボックス表示にするには、数量の記述部分を下記のように書き換えます。
※カートへ入れる購入数量を制限したい場合などに利用できますが、ショッピングカート部分での数量変更を制限することはできません。
<input type="text" name="products[商品番号].quantity" value="1" size="5">
↓ ↓ ↓
<select name="products[商品番号].quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
【設置サンプル】
数量選択はチェックボックスにして「1個」（固定数量）をカートに入れる方法
商品のチェックボックスにチェックを入れてカートボタンを押下することで「1個」（固定数量）カートに入れる、という表現もできます。
数量のtype値を「checkbox」に変更し、value値には「1」を入力します。
（value値を変更することでカートに入れる数量を変更できます）
チェックを入れて「カートへ」をクリックするだけで「サンプル商品」が「数量：1」でカートに入ります。
<input name="products[商品番号].quantity" type="text" value="" size="5">
↓ ↓ ↓
<input name="products[商品番号].quantity" type="checkbox" value="1">
【設置サンプル】
数量選択はさせずに「1個」でカートに入れる方法
テキストボックスやチェックボックスを表示させずに、ボタン押下のみで「1個(固定)」でカート投入させることも可能です。
数量を指定するinputタグのtype値を「hidden」に変更し、value値に「1」を入力します。
「カートへ」をクリックするだけで「数量：1」でカートに入ります。
<input name="products[商品番号].quantity" type="text" value="" size="5">
↓ ↓ ↓
<input name="products[商品番号].quantity" type="hidden" value="1">
「カートへ」ボタンを「ボタン画像」にする方法
カートへの部分を画像にする場合は、type値を「image」にして、srcで画像パスを指定します。
<button type="submit">カートへ</button>
↓ ↓ ↓
<input type="image"name="submit" src="画像パス" value="カートへ">
定期購入・頒布会商品の場合
<button type="submit" name="subscribe">定期購入する</button>
↓ ↓ ↓
<input type="image"name="subscribe" src="画像パス" value="定期購入する">
複数商品をまとめてカートに入れる方法
複数の商品をカートへ入れる場合も、基本的な考え方は1商品をカートに入れる場合と同じです。
2行目と3行目（下線部）を、複数商品分記述します。
<form action="https://契約ドメイン/p/cart/add" method="post">
<input type="hidden" name="products[商品番号].productNo" value="商品番号">
<input name="products[商品番号].quantity" type="text" value="" size="5">
<button type="submit">カートへ</button>
</form>
- action=""にて「カートへ」をクリックした先のURLを指定します。（https://契約ドメイン/p/cart/add）
- name="products[商品番号].productNo" value="商品番号" にて「どの商品か」を指定します。
- name="products[商品番号].quantity"のvalue値にて「何個買うか(数量)」を指定します。