フォーラムで見かけて気になったので試作してみました。
[追記:2021.3.26]
記事末のフォーラムのスレッドにて情報を知りましたが、Shopify公式がこの件に対応したサンプルコードを公開したようなので「公式のサンプルコード」の項目として追記しています。
実現したいこと
- 商品ページにアクセス時に、任意のメイン画像を表示させたい
- メイン画像はバリエーションの画像とは別の画像
テーマによるとは思いますが、Shopifyでは商品ページアクセス時に最初のバリエーション(バリエーションを複数追加していない場合でも内部的にはバリエーションが作られている模様)に紐づいた画像がメインとして表示されます。
仮に管理画面で商品画像を入れ替えた場合、商品一覧ではメイン画像に指定した画像が意図通りに表示されますが、上記のようにメイン画像ではない画像が表示されてしまいます。
対応策
- 管理画面の商品登録画面でメイン画像に任意の画像を設定する(ドラッグで順序を変更可能)
- liquidファイルにJavascriptのコードを追加
- 商品ページを表示する際に、最初の画像(=メイン画像)のサムネイルをJSでクリックさせる
手順は上記の通りで、以下がJSのサンプルです。
サンプル
{% unless product.selected_variant %}
<script>
var f = function() {
document.querySelector('.product-single__thumbnails-item .product-single__thumbnail').click();
window.removeEventListener( 'load', f, false );
}
window.addEventListener( 'load', f, false );
</script>
{% endunless %}
書き方次第にはなりますが、とりあえずproduct.liquidの下の方に上記コードを追加します。
querySelectorで指定しているクラス名はテーマごとに違う可能性があるため適宜書き換える必要があります。サムネイルの最初の画像を包含するaタグのクラス名を指定してください。
不要なページでのJSの動作を防ぐためunlessで条件を絞っています。
具体的には、一覧から商品ページにアクセスした場合、liquid上ではバリエーションは未選択のため、product.selected_variant.idはnilがかえってくるようなのでそれを利用しています。
- The product object
nilの件の記述あり - How do I check if a variable is defined? · Issue #89 · Shopify/liquid
unlessが使えると記述あり
懸念点
単純にJSでクリックすると、本来は機能を停止させられているはずのaタグが普通に発火して画像のURLにアクセスし、画面には画像だけが表示されてしまいます。調べきれていませんが、恐らく本来のスライダー用JSの動作よりも早く実行されるためではと考えています。
そのため、loadイベントを使ってJSによるクリックのタイミングを後ろにずらしています。他にはsetTimeout()などでも動作を確認できました。
ただ確実な方法とは言い難いため、閲覧環境次第では意図せず画像のURLに飛んでしまう可能性が残ります。
公式のサンプルコード
上記記事内にありますが、このコードには以下のような動作と副作用があるようです。
- 通常は商品ページにアクセスすると、最初のバリエーションの写真や価格が表示される(=「メディア」の順序を入れ替えてもこのせいで反映されない」)
- サンプルコードを用いることで、バリエーションの写真を選ぶ動作を無効化できる(=「メディア」で入れ替えた先頭の画像が表示されるようになる)
- 結果として商品ページアクセス時にバリエーションが選択されていない状態となるため、写真だけではなく価格も表示されなくなる
つまり、最初に表示させる写真を自由に選べる反面、ページアクセス時には価格が表示されなくなってしまいます。
バリエーションを選択すれば通常通り価格も画像も表示されるようですが、それにしてもこの状態ではあまりよいものとは思えません。
実際に試したわけではないので上記のような状態にならない可能性もありますが、試される方はサンプルコードが載ったページをよく確認されることをお勧めします。
結び
この件はフォーラムの以下のスレッドが関連します。
- How can I choose the default product image? – Shopify Community
※ものは試しでこの英語フォーラムにも投稿してみました
Shopifyスタッフとしては管理画面のメイン画像入れ替えで対応できるという認識のようですが、その後に続く投稿を見ますと多くのテーマがそのような動作になっていないことが伺えます。
他方、テーマのJSを書き換えることで対応できるのではと思っていたのですが、Shopify自体の仕様のような書き込みもあり、少々不透明な印象です。
4人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
