Liquid、JavaScriptなどに関する質問
商品にバリエーションをもたせて、各バリエーションに紐づく画像を設定しています。
すると、商品ページでバリエーションを変えた際に、追従して各バリエーションの画像に切り替わります。
しかし、商品ページを開いた初期状態でいずれかのバリエーションが選択されている状態のため、本来初めに表示したい画像とは別の画像が表示されてしまいます。
▼実現したい状況
商品ページを開いた初期状態で、バリエーション選択がされていない状態にする。
各バリエーションの変更に追従して、画像が切り替わる。
テーマは「Simple」を使用しており、空欄のOptionを追加してSelectedにしようとしたのですが、
どうやらバリエーション選択のセレクトボックスは別の箇所で指定されているらしく見当たりませんでした。
よろしくお願いいたします
解決済! ベストソリューションを見る。
成功
この件は英語フォーラムの以下のスレッドにていくつか対応策が書かれていましたので、いずれかで実現できるかもしれません。
なお、以下は興味があったので試作してみた案です。一応Debutでは動いたのでSimpleでも動くかもしれません。
結構強引な方法なので、仮に動いたとしても問題が出るようなら別の案を試されることをお勧めします。
目的は以下の通りです
手順は以下の通りです。
上記2で追加するのは以下のコードです。(querySelectorで指定するクラス名はサムネイル画像を包含するaタグのクラスを指定してください)
{% unless product.selected_variant %}
<script>
var f = function() {
document.querySelector('.product-single__thumbnails .product-single__thumbnail').click();
window.removeEventListener( 'load', f, false );
}
window.addEventListener( 'load', f, false );
</script>
{% endunless %}
意図する動作は以下の通りです。
もしも内容がご要望と違う場合は申し訳ありません。
成功
この件は英語フォーラムの以下のスレッドにていくつか対応策が書かれていましたので、いずれかで実現できるかもしれません。
なお、以下は興味があったので試作してみた案です。一応Debutでは動いたのでSimpleでも動くかもしれません。
結構強引な方法なので、仮に動いたとしても問題が出るようなら別の案を試されることをお勧めします。
目的は以下の通りです
手順は以下の通りです。
上記2で追加するのは以下のコードです。(querySelectorで指定するクラス名はサムネイル画像を包含するaタグのクラスを指定してください)
{% unless product.selected_variant %}
<script>
var f = function() {
document.querySelector('.product-single__thumbnails .product-single__thumbnail').click();
window.removeEventListener( 'load', f, false );
}
window.addEventListener( 'load', f, false );
</script>
{% endunless %}
意図する動作は以下の通りです。
もしも内容がご要望と違う場合は申し訳ありません。
ご回答ありがとうございます。
英語フォーラムも確認しまし、試作して頂いたコードで動作を確認しました。
メインの画像が切り変わるのに少し時間を要しますが、目的にかなったものとなっています。
ありがとうございました。
今後ともよろしくお願いいたします。
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023