カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。
- 更新日: 2024-08-24 03:34:17 UTC
コマースクリエイター未利用店舗様専用の記事です
※従来のfutureshopとコマースクリエイターでは、カートボタンの表示に用いるHTMLが異なります。
コマースクリエイターご利用店舗様は以下の記事をご参照ください。
■虎の巻:カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。
https://faq.future-shop.jp/hc/ja/articles/4419645404697
「カートヘ」の部分の<form>タグを任意の位置に記述することで、自由に商品ページを作ることができます。
また、<form>タグの記述を変更することで、「まとめ買い」のタグを作成することができます。
【ご注意ください:バリエーション商品について】 カートボタンのHTMLタグを貼り付けて利用する際、バリエーションの登録や削除、変更を行うと、
|
もくじ
HTMLタグの出力方法
商品一覧からの出力方法
運用メニュー>商品管理>商品グループ管理>(商品グループ)>商品一覧/順序設定の
商品一覧右にある「HTMLタグ」をクリックしてください。
商品検索からの出力方法
運用メニュー>商品管理>商品検索
検索結果画面を開き、HTMLタグを出力したい商品行の右端の「HTML列」にチェックを入れ、
HTMLタグ出力箇所の出力方法を設定し、「HTMLタグをダウンロード」をクリックしてください。
タグの仕様
バリエーションや項目選択肢などの有無により出力内容が異なりますが、主要なタグとしては下記の4行です。
<form action="http://設定ドメイン/fs/店舗KEY/ToCart.html" method="post">
→フォームの飛ばし先URLを指定
→methodは"post"で設定
<input name="cnt" type="text" value="1" size="5">
→数をどうするのかの指定
→valueで初期値を指定
<input type="hidden" name="goodsNo" value="商品番号">
→「どの商品を」の指定
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。
※複数商品をまとめてカートに入れる場合は、一部のタグが異なります。
「複数商品をまとめてカートに入れる方法」をご確認の上でカスタマイズしてください。
数量をセレクトボックスにする方法
数量をセレクトボックス表示にするには、数量の記述部分を下記のように書き換えます。
※カートへ入れる購入数量を制限したい場合などに利用できますが、
ショッピングカート部分での数量変更を制限することはできません。
<input type="text" name="cnt" value="1" size="5">
↓ ↓ ↓
<select name="cnt">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
数量選択はチェックボックスにして「1個」(固定数量)をカートに入れる方法
商品のチェックボックスにチェックを入れてカートボタンを押下することで「1個」(固定数量)カートに入れる、という表現もできます。
数量の部分を「checkbox」にしvalueを「1」にします。
※「value」の値を変更することで、カートへ入れる数量がかわります。
<input type="text" name="cnt" value="1" size="5">
↓ ↓ ↓
<input type="checkbox" name="cnt" value="1">
数量選択はさせずに「1個」でカートに入れる方法
チェックボックスやセレクトボックスなどを表示せずに、
数量は必ず「1個」(固定)でカートに入るようにする場合は、
数量の部分を「hidden」(隠し項目)にしvalueを「1」にします。
<input type="text" name="cnt" value="1" size="5">
↓ ↓ ↓
<input type="hidden" name="cnt" value="1">
「カートへ」ボタンを「ボタン画像」にする方法
カートへの部分を画像にする場合は、
「name」を「submit」に変更、「type」を「image」に変更して、画像パスを追加します。
<input type="submit" value="カートへ">
↓ ↓ ↓
<input name="submit" type="image" src="画像パス" value="カートへ">
複数商品をまとめてカートに入れる方法
複数の商品をカートへ入れる場合も、基本的な考え方は1商品をカートに入れる場合と同じです。「name="goodNo"」の商品番号と「name="cnt_商品番号"」の数量の2行を、複数商品分記述します。
複数商品を「カートへ」入れる場合のタグの内容
- フォームの飛ばし先URL(単品の場合と同じ)
- どの商品なのか( name="goodsNo" value="商品番号 を記述)
- どの数量なのか(name="cnt_商品番号" を記述)
※独自SSLもしくは常時SSLご利用店舗様は、ToCart.htmlをhttpsはじまりで記述してください。
複数商品をカートに入れる方法については、以下の記事もあわせてご参照ください。