バリエーションで指定したカラーのサムネールを表示させたい。

日本語 ディスカッション 技術的なQ＆A
1

バリエーションで指定したカラーのサムネールを表示させたいです。

アプリで「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 %}

サムネールは表示されましたが、バリアントで指定したカラー全部の数だけ、現在選択されているカラーのサムネールなっています。

sample.jpg
sample.jpg2400×1438 119 KB

自分でいろいろ調べましたが、思った解決策が見つかりません。

どうか、ご教授いただけると嬉しいです。

何卒よろしくお願い申し上げます。

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
3

うまく表示されました。

ありがとうございます。

本当に助かりました。