商品詳細ページのバリエーション画像について

[s_yamaoka]

現在、『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();
  }
}

[s_yamaoka]

現在、『Be Yours』というShopifyテーマでセットアップしていますが、バリエーションごとに複数の商品画像を持つ機能を実装しました。
（商品バリエーションのカラーを選択すると、該当カラーの商品画像のみが表示される）
以下の通りです。

しかし、読み込んだ時点では全ての画像が表示されているので、読み込んだ時点で該当カラーのものだけが表示されるようにしたい。

分かる方がいれば教えてほしいです(>_<)

[Qcoltd · Accepted solution]

実際にサイトを拝見しながら、であればより正確な情報はお伝えできると思うのですが、

いただいている情報だけで推測しますと、

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'));
});

なお、上記コードは、

• 動作確認はしておりません。
• variant-selects要素が複数ある場合には想定通りの挙動をしない可能性があります。

ご参考まで。

(キュー田辺)

[s_yamaoka]

かなり困っていたので大変助かりました。

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

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イベントで実装すると完璧に表現できました。

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

助かりました！