Dawnテンプレートで商品バリエーションに画像を設定すると、商品ページ初期表示時にメイン画像ではなくバリエーション画像が表示される問題について質問が投稿されました。
提案された解決策:
Qcoltdが、Dawn 9.0.0向けにproduct-media-gallery.liquidファイルの編集方法を提示:
featured_mediaの割り当てロジックを調整発生した追加問題:
最初の修正後、バリエーションのない商品でメイン画像が表示されず、サムネイルに2個の画像が表示される不具合が発生。
最終的な解決:
nagisaneが提案されたコードを基に独自にカスタマイズを実施:
Dawn 8.0.1で表面上は理想通りの表示を実現したと報告。ただし、素人カスタマイズのため完全な検証は未実施との注記あり。
現在、DAWNのテンプレートを使用してショップを制作中なのですが、商品のバリエーション登録を行って、バリエーションごとに画像を設定すると、実際の商品ページを開いた時に、商品のメディア欄に登録したメイン画像ではなく、バリエーションの一番上の画像が表示されてしまいます。
商品ページを開いた時の商品画像初期値は、商品のメイン画像にして、バリエーションを選択すると、バリエーション画像に切り替わるようにしたいです。
※バリエーション選択欄については、ドロップダウン式を採用しており、当方でliquidをいじって初期値が「選択してください」になるようにしました。
お詳しい方がいらっしゃいましたら、是非ご教授願います。
https://community.shopify.com/post/1448100
上記の投稿が類似の内容かと思いますが、違う場合は申し訳ありません。
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のバージョンによっては、
上記がそのまま適用できない可能性もあります。
その場合はバージョンをお教えいただければ検証できるかもしれません。
ご参考まで。
(キュー田辺)
詳しいご回答ありがとうございます！
早速コードを書き換えてみたところ、理想通りの表示になりました！
今のところとくに不具合もなさそうです。
本当にありがとうございました。
詳しいご回答ありがとうございます！
早速コードを書き換えてみたところ、理想通りの表示になったと思ったのですが、後々よく確認してみると、バリエーションのない商品のメイン画像(大きい画像)が表示されなかったり、バリエーションのある商品に関してはサムネイルに1枚目の画像が2個続けて表示される感じになってしまいました。
こちらについても解決策わかればご教授いただけますと幸いです。
度々失礼いたします。
教えていただいたコードを元にいろいろ書き換えて試していたら、ひとまず表面上は、理想通りの表示になったようなので、ご報告致します。
※素人のカスタマイズなので、おかしな部分があるかもしれません。
↓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
-%}
- {%- if media.media_type == 'model' -%}
{%- render 'icon-3d-model' -%}
{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
{%- render 'icon-play' -%}
{%- endif -%}
{%- capture thumbnail_id -%}
Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
{%- endcapture -%}
{%- 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
-%}
- {%- if media.media_type == 'model' -%}
{%- render 'icon-3d-model' -%}
{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
{%- render 'icon-play' -%}
{%- endif -%}
{%- capture thumbnail_id -%}
Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
{%- endcapture -%}
{%- endunless -%}
{%- endfor -%}
※バージョンはDawn 8.0.1でした。
改めて、この度はご回答いただきありがとうございました！