バリエーションで指定したカラーのサムネールを表示させたいです。
アプリで「G:Variant Image + Color Swatch」というアプリがありますが、アプリを使用しないで実装したいです。
参考サイト
https://nga-appstore.myshopify.com/products/asymmetric-strap-dorsay-pumps
下記のURLを参考にして
https://shopify.github.io/liquid-code-examples/example/preselected-variant-image
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
![{{ featured_image.alt | escape }}]()
上記のコードを下記のコードに追加いたしました。
{% comment %} if color swatch {% endcomment %}
{% if color_swatch_options contains option_name and style == ‘swatches’ %}
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
![{{ featured_image.alt | escape }}]()
<input type=“radio” class=“product-form__swatch__input u-hidden-visually” id=“{{ id }}” name=“{{ option_name }}-c” value=“{{ value | escape }}” data-position=“{{ option.position }}” {{ checked }}/>
{{ value }}
{% comment %}
サムネールは表示されましたが、バリアントで指定したカラー全部の数だけ、現在選択されているカラーのサムネールなっています。
自分でいろいろ調べましたが、思った解決策が見つかりません。
どうか、ご教授いただけると嬉しいです。
何卒よろしくお願い申し上げます。
Qcoltd
2
掲載されているコードの前後がどうなっているかによって変わってしまうのですが、
おそらく、下記のようなfor文の中に記載されたコードを掲載いただいたのではないかと思いますので、それを前提に回答いたします。
{% for option in product.options_with_value %}
{% for value in option.values %}
{{ 対象のコード }}
{% endfor %}
{% endfor %}
下記のようにされてはいかがでしょうか？
{% for option in product.options_with_value %}
{% for value in option.values %}
{% comment %}掲載コードの赤色の部分を下記に書き換えます ここから{% endcomment %}
{% assign featured_img_src='' %}
{% assign featured_img_alt = '' %}
{% for variant in product.variants %}
{% if variant.option1 == value %}
{% assign featured_img_src=variant.featured_image.src | img_url: '1024x' %}
{% assign featured_img_alt = variant.featured_image.alt | escape %}
{% break %}
{% endif %}
{% endfor %}
{% comment %}掲載コードの赤色の部分を下記に書き換えます ここまで{% endcomment %}
{% endfor %}
{% endfor %}
注意点
- 上記のコードは動作確認しておりません。
- 上記のコードは、同じカラーのバリエーションには全て同じ画像が設定してあることを前提にしています。(BlackのSサイズ、BlackのMサイズ、BlackのLサイズ、これら全てに、同じ画像がfeatured imageとして設定してあることを前提にしています。)
- カラーがoption1であることを前提にしています。
推測も前提も多いので、うまく動くか分かりませんが、
ご参考になれば幸いです。
(キュー田辺)
1 Like
