カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。

コマースクリエイター未利用店舗様専用の記事です

※従来のfutureshopとコマースクリエイターでは、カートボタンの表示に用いるHTMLが異なります。
 コマースクリエイターご利用店舗様は以下の記事をご参照ください。

 ■虎の巻:カートボタンHTMLタグの出力方法と仕様、カスタマイズ方法について教えてください。
 https://faq.future-shop.jp/hc/ja/articles/4419645404697

 

「カートヘ」の部分の<form>タグを任意の位置に記述することで、自由に商品ページを作ることができます。
また、<form>タグの記述を変更することで、「まとめ買い」のタグを作成することができます。

 

【ご注意ください:バリエーション商品について】

カートボタンのHTMLタグを貼り付けて利用する際、バリエーションの登録や削除、変更を行うと、
バリエーション選択肢のvalue値が変わります。
商品情報のvalue値と、ページに記述されているHTMLタグのvalue値が不一致だと、カートに商品入らなくなります。


バリエーションの選択肢を変更した場合は、再度タグを出力してvalue値をお確かめください。

 

もくじ

 

HTMLタグの出力方法

商品一覧からの出力方法

運用メニュー>商品管理>商品グループ管理>(商品グループ)>商品一覧/順序設定
商品一覧右にある「HTMLタグ」をクリックしてください。

商品検索からの出力方法

運用メニュー>商品管理>商品検索

検索結果画面を開き、HTMLタグを出力したい商品行の右端の「HTML列」にチェックを入れ、
HTMLタグ出力箇所の出力方法を設定し、「HTMLタグをダウンロード」をクリックしてください。

 

タグの仕様

バリエーションや項目選択肢などの有無により出力内容が異なりますが、主要なタグとしては下記の4行です。

1つをカートへ入れる

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

複数商品をカートに入れる方法については、以下の記事もあわせてご参照ください。

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

この記事は役に立ちましたか?