FROM CACHE - jp_header
解決済

DAWN商品ページにバリエーションが設定されていた場合の商品画像初期値について

nagisane
観光客
4 0 0

 

現在、DAWNのテンプレートを使用してショップを制作中なのですが、商品のバリエーション登録を行って、バリエーションごとに画像を設定すると、実際の商品ページを開いた時に、商品のメディア欄に登録したメイン画像ではなく、バリエーションの一番上の画像が表示されてしまいます。

 

商品ページを開いた時の商品画像初期値は、商品のメイン画像にして、バリエーションを選択すると、バリエーション画像に切り替わるようにしたいです。

 

※バリエーション選択欄については、ドロップダウン式を採用しており、当方でliquidをいじって初期値が「選択してください」になるようにしました。

 

お詳しい方がいらっしゃいましたら、是非ご教授願います。

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1057 434 422

成功

Dawnのバージョンにもよるのですが、

もし、9.0.0をお使いであれば、

ストア管理画面 > オンラインストア > テーマ > コード編集

にて、

スニペット(snippets) > product-media-gallery.liquid

を下記のように編集します。

※十分に検証しておりませんので、不具合がある可能性もあります。

 

68行目付近

        {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

        {%- assign featured_media = product.featured_media -%}
        {%- if product.selected_variant -%}
          {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        {%- endif -%}

 

92行目付近

        {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

 ↓

        {%- assign exclude_media_id = product.featured_media.id -%}
        {%- if product.selected_variant -%}
          {%- assign exclude_media_id = product.selected_or_first_available_variant.featured_media.id -%}
        {%- endif -%}
        {%- unless media.id == exclude_media_id -%}

 

 

お使いのDawnのバージョンによっては、

上記がそのまま適用できない可能性もあります。

その場合はバージョンをお教えいただければ検証できるかもしれません。

 

ご参考まで。

(キュー田辺) 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

5件の返信5

Jizo_Inagaki
Shopify Partner
1046 394 707

https://community.shopify.com/c/shopify-%E3%83%86%E3%83%BC%E3%83%9E/%E3%83%86%E3%83%BC%E3%83%9E-dawn...

上記の投稿が類似の内容かと思いますが、違う場合は申し訳ありません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

Qcoltd
Shopify Partner
1057 434 422

成功

Dawnのバージョンにもよるのですが、

もし、9.0.0をお使いであれば、

ストア管理画面 > オンラインストア > テーマ > コード編集

にて、

スニペット(snippets) > product-media-gallery.liquid

を下記のように編集します。

※十分に検証しておりませんので、不具合がある可能性もあります。

 

68行目付近

        {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}

        {%- assign featured_media = product.featured_media -%}
        {%- if product.selected_variant -%}
          {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        {%- endif -%}

 

92行目付近

        {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

 ↓

        {%- assign exclude_media_id = product.featured_media.id -%}
        {%- if product.selected_variant -%}
          {%- assign exclude_media_id = product.selected_or_first_available_variant.featured_media.id -%}
        {%- endif -%}
        {%- unless media.id == exclude_media_id -%}

 

 

お使いのDawnのバージョンによっては、

上記がそのまま適用できない可能性もあります。

その場合はバージョンをお教えいただければ検証できるかもしれません。

 

ご参考まで。

(キュー田辺) 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
nagisane
観光客
4 0 0

詳しいご回答ありがとうございます!

早速コードを書き換えてみたところ、理想通りの表示になりました!

今のところとくに不具合もなさそうです。

本当にありがとうございました。

nagisane
観光客
4 0 0

詳しいご回答ありがとうございます!

早速コードを書き換えてみたところ、理想通りの表示になったと思ったのですが、後々よく確認してみると、バリエーションのない商品のメイン画像(大きい画像)が表示されなかったり、バリエーションのある商品に関してはサムネイルに1枚目の画像が2個続けて表示される感じになってしまいました。

こちらについても解決策わかればご教授いただけますと幸いです。

nagisane
観光客
4 0 0

度々失礼いたします。

教えていただいたコードを元にいろいろ書き換えて試していたら、ひとまず表面上は、理想通りの表示になったようなので、ご報告致します。

※素人のカスタマイズなので、おかしな部分があるかもしれません。

 

↓68行目付近の教えていただいたコードを下記のように変更

{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        {%- if product.selected_variant -%}
        {%- assign featured_media = product.featured_media -%}
        {%- endif -%}

 

・92行目付近は初期コードのまま使用

 

・232行目付近から下記のように変更

{%- for media in product.media -%}
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{ media.preview_image | image_url: width: 416 | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: media.alt | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}

{%- if product.selected_variant -%}
        {%- for media in product.media offset:1 -%}          
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{ media.preview_image | image_url: width: 416 | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: media.alt | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}

 

※バージョンはDawn 8.0.1でした。

 

改めて、この度はご回答いただきありがとうございました!