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

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

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

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

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

 

バリエーション商品で利用する際の注意点

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

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

 

商品グループ、商品詳細のレイアウト内で利用する際の注意点

商品詳細レイアウト内の商品詳細エリア(システムパーツグループ)配下など、
特定のレイアウト内に配置する際はHTMLの構造上エラーになる場合があります。

詳細は下記のページをご確認ください。

■虎の巻:カートに入れるボタンを押した際にショッピングカートに商品が入りません。考えられる原因は何でしょうか。

 

もくじ

 

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">

<input type="submit" value="カートへ">

</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」に変更、name="submit"を追加して、srcで画像パスを指定します。

<input type="submit" value="カートへ">

 ↓  ↓  ↓

<input type="image" name="submit" 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">

<input type="submit" value="カートへ">

</form>

  • action=""にて「カートへ」をクリックした先のURLを指定します。(https://契約ドメイン/p/cart/add)
  • name="products[商品番号].productNo" value="商品番号" にて「どの商品か」を指定します。
  • name="products[商品番号].quantity"のvalue値にて「何個買うか(数量)」を指定します。
この記事は役に立ちましたか?