Liquid、JavaScriptなどに関する質問
現在、『Be Yours』というテーマのストアをセットアップしていますが、バリエーションごとに複数の画像を持つ機能を実装しました。
以下の通りです。
そこで、読み込んだ時点でバリエーションごとの画像が表示されるようにしたいです。
分かる方がいれば教えてほしいです(>_<)
class VariantSelects extends HTMLElement {
constructor() {
super();
this.addEventListener('change', this.onVariantChange);
}
onVariantChange(event) {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);
this.updatePickupAvailability();
this.removeErrorMessage();
this.validateGang();
if (!this.currentVariant) {
this.toggleAddButton(true, '', true);
this.setUnavailable();
} else {
if(this.gangOption) {
this.updateGangMedia();
} else {
this.updateMedia();
}
this.filterThumbnails();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
}
this.handleStickyCart(event.target);
}
...
}
filterThumbnails() {
if (this.currentVariant.featured_media != null && this.currentVariant.featured_media.alt != null) {
$('[data-thumbnail-color]').hide();
const selected_color = this.currentVariant.featured_media.alt;
const thumbnail_selector = '[data-thumbnail-color = "' + selected_color + '"]';
$(thumbnail_selector).show();
} else {
$('[data-thumbnail-color]').show();
}
}
解決済! ベストソリューションを見る。
成功
実際にサイトを拝見しながら、であればより正確な情報はお伝えできると思うのですが、
いただいている情報だけで推測しますと、
filterThumbnails()関数を、windowのloadイベントで実行してあげるとうまく行くかもしれません。
window.addEventListener('load', filterThumbnails);
しかし、この場合、thisがしっかり質問者様が欲しい内容を保持しているか怪しいです。
上記がうまくいかないようなら、下記ではどうでしょうか?
window.addEventListener('load', function(){
document.querySelector('variant-selects').onVariantChange();
});
もしくは、下記の方が良いかもしれません。
window.addEventListener('load', function(){
document.querySelector('variant-selects').dispatchEvent(new Event('change'));
});
なお、上記コードは、
ご参考まで。
(キュー田辺)
現在、『Be Yours』というShopifyテーマでセットアップしていますが、バリエーションごとに複数の商品画像を持つ機能を実装しました。
(商品バリエーションのカラーを選択すると、該当カラーの商品画像のみが表示される)
以下の通りです。
しかし、読み込んだ時点では全ての画像が表示されているので、読み込んだ時点で該当カラーのものだけが表示されるようにしたい。
分かる方がいれば教えてほしいです(>_<)
成功
実際にサイトを拝見しながら、であればより正確な情報はお伝えできると思うのですが、
いただいている情報だけで推測しますと、
filterThumbnails()関数を、windowのloadイベントで実行してあげるとうまく行くかもしれません。
window.addEventListener('load', filterThumbnails);
しかし、この場合、thisがしっかり質問者様が欲しい内容を保持しているか怪しいです。
上記がうまくいかないようなら、下記ではどうでしょうか?
window.addEventListener('load', function(){
document.querySelector('variant-selects').onVariantChange();
});
もしくは、下記の方が良いかもしれません。
window.addEventListener('load', function(){
document.querySelector('variant-selects').dispatchEvent(new Event('change'));
});
なお、上記コードは、
ご参考まで。
(キュー田辺)
かなり困っていたので大変助かりました。
本当にありがとうございます。
2つ目と3つ目の回答でうまくいきました。
window.addEventListener('load', function(){
document.querySelector('variant-selects').onVariantChange();
});
window.addEventListener('load', function(){
document.querySelector('variant-selects').dispatchEvent(new Event('change'));
});
loadイベントで実行すると、読み込みが終わって画像が切り替わるまでに少しタイムラグがあったので、DOMContentLoadedイベントで実装すると完璧に表現できました。
本当にありがとうございました!
助かりました!
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024