FROM CACHE - jp_header
解決済

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

s_yamaoka
Shopify Partner
15 0 1

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

 

 

 

1 件の受理された解決策
Qcoltd
Shopify Partner
1049 428 412

成功

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

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

 

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要素が複数ある場合には想定通りの挙動をしない可能性があります。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

3件の返信3

s_yamaoka
Shopify Partner
15 0 1

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

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

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

Qcoltd
Shopify Partner
1049 428 412

成功

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

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

 

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要素が複数ある場合には想定通りの挙動をしない可能性があります。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
s_yamaoka
Shopify Partner
15 0 1

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

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

 

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

 

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

助かりました!