• No : 2161
  • 公開日時 : 2018/02/17 11:08
  • 更新日時 : 2019/02/04 12:29
  • 印刷

バリエーションをプルダウンで表示させることはできますか？

サポートカテゴリー : 

回答

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

自動生成のカゴボタンでは出来ませんが、カートボタンHTMLを利用してHTMLソースをカスタマイズすれば可能です。

バリエーションご利用時にご注意

カゴボタンをHTMLで貼り付けて利用される際、バリエーション選択肢を削除されますと、
その後、CSVでバリエーションの一括登録を行うとバリエーションのvalue値が変わる場合がございます。
変わると商品がカートに入らなくなります。


バリエーションの選択肢を変更した場合は、再度タグを出力してvalue値が変わってないことをご確認ください。

 

1．商品のHTMLタグを出力する

運用メニュー＞商品管理＞商品グループ管理

「商品一覧／順序設定」の該当商品の右端にある

「HTMLタグ」をクリック

 

商品検索結果ページからもタグを出力することも可能です。

 

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

にて、該当商品を絞り込みを行い、

検索結果一覧箇所の、

該当商品の右端の列にチェックを入れます。

 

その後、

少し上にございます「 HTMLタグ出力 」の出力方法箇所を下記の通り設定し、

「HTMLタグをダウンロード」ボタンをクリック。

  • カートへボタン表示・・・「商品ごとにカートへボタンを出力」
  • バリエーション表示・・・「ラジオボタン」

ダウンロードしたテキストファイルに、2で使用するタグが表示されています。

 

2．出力されたカートボタンHTMLを修正

 

HTMLタグを

上記赤枠以外のところもすべてコピーし、

表示させたいところに貼り付けてください。

 

貼り付けたのちに、赤枠部分を書き換えます。

3． 出力されたタグをバリエーションからセレクトボックスへ修正します。

値は出力されているHTMLに合わせて、修正をしてください。

<select name="variation">
<option value="1_0">S</option>
<option value="1_0">M</option>
<option value="1_0">L</option>
<option value="1_0">LL</option>
</select>

 

4．書き換えたformタグを設置します。

書き換えたformタグは、商品説明等、HTMLソースを登録できるエリアに設置してください。

 

5．自動で表示されているカートボタンを隠します。

対象商品の商品基本情報編集画面＞上級デザイン＞上部コメントに、下記を記述します。

 

<style type="text/css">
.FS2_figure{display:none;}
</style>

6．自動出力されているバリエーションの表組みをCSSで隠します。

 

対象商品の商品基本情報編集画面＞上級デザイン＞上部コメントに、下記を記述します。

 

<style type="text/css">
.GoodsSelectionTable{display:none;}
.FS2_ItemStockSample_area{display:none;}
.itemStock FS2_noStockSample{display:none;}
.FS2_additional_image_tableVariation{display:none;}
</style>

 

設定後、必ず、ご確認を御願い致します。