お世話になります。
variant 選択する時にサムネ画像表示したいですが何が決めているんですか。
テームのカスタマイズしているのでJSの実装が必要です。
variantはinputです。
やりたいのは：
variantの選択する時にvariantのIDとサムネ画像のIDをハンドルしたいですが無理ですか。
IDがあったら表示する。
すみませんがよろしくお願いします。
variantの画像を表示する件ですが、テーマをカスタマイズしているとのことですので、
javascriptではなく.liquidファイルを編集する形はいかがでしょうか。
カスタマイズしているテーマが不明のため、
ShopifyのDawnテーマを元に画像を表示させる方法を説明します。
手順1
サムネイルを表示したいオプションを、仮に「カラー」とします。
下記画像のように、「管理画面 > 商品管理]」にて、オプション「color」のバリエーションのサムネイル画像を、全て設定します。
### 手順2
section > main-product.liquidの{%- for value in option.values -%}内にある、
下記部分が初期状態でオプションのテキストを表示しています。
この部分を下記のように変更いただくと、
{%- if option.name == "color" -%}
{%- else -%}
{%- endif -%}
下記画像赤枠のようにバリエーションで登録した画像を表示することが可能です。
### 設定について
{%- if option.name == "color" -%}
colorはオプションで設定した名前となります。
「style="border: none; border-radius: 0; padding: 0;"」は画像が表示する際不要な線などをなくすために入れています。
直接スタイルを設定していますが、classを設定し別途cssファイルに格納いただいても問題ありません。
```markup
{%- if variant.option1 == value -%}
今回の例では、オプションの1つ目を「カラー」としたため、vriant.option1を判定に使用しました。
質問者様が画像を表示したいオプションが、2であればoption2を、3であればoption3を設定してください。
{%- assign variant_images_src=variant.image.src | img_url: '80x' -%}
'80x’は表示する画像のサイズとなります。
現在は80pxで設定していますが、任意の数値に変更してください。
ご参考まで。
(キュー小坂)
1 Like