FROM CACHE - jp_header

スライドショーのバグについて

s_yamaoka
Shopify Partner
15 0 1

商品詳細ページにおいて全てのサムネイルが、セレクトしたバリエーションのカラーに変わる機能を実装しました。

 

 

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

 

 

LiquidファイルのHTML構造に下記の内容を組み込むと、スライドショーにも上の機能が実行され、サムネイルとスライドの内容がマッチします。

 

 

data-thumbnail-color="{{ media.alt }}"

 

 

しかし、pc画面でスライドが解除されて縦に伸びてしまうバグが起こってしまいました。スクリーンショット 2022-08-02 9.11.38.png

 

 

 

data-thumbnail-color="{{ media.alt }}"

 

 

これを組み込まないとスライドは正常に機能します。

スクリーンショット 2022-08-02 9.13.49.png

しかし、実装したい機能ができません。(スライドの内容がサムネイルと一致しない)

スライドの内容がなぜ崩れるのでしょうか?

分かる方がいましたらご教授ください(>_<)

 

--------------------------------------------------

@Qcoltd さん

昨日いただいた回答が素晴らしかったので、勝手ながらメンバーリンクさせていただきました。

お忙しいところ申し訳ございません。

1件の返信1

Qcoltd
Shopify Partner
1049 429 412

実際にプレビューを拝見してみないと分からないので、推測になります。

 

こちらを、付与しているHTML要素は何でしょうか?

 

data-thumbnail-color="{{ media.alt }}"

 

 

imgに付与していますか?

buttonに付与していますか?

liに付与していますか?

 

もし、imgに付与されている場合、display: none, blockの切り替え(hide, showの切り替え)で、表示がうまくいかなくなる可能性があります。

liに付与するようにすると、改善するかもしれません。

 

しかし、そういう問題ではないようにも思います。

 

この現象が発生するタイミングによるのですが、

ローディングした時から発生しているようでしたら、

onVariantChange(event)内での、

filterThumbnailsnを実行する順番を変更することで、

改善するかもしれません。

 

もし、バリエーションを切り替えたときにだけ発生しているようでしたら、

申し訳ありません、

実際にサイトを拝見しないと何とも言えないです。

 

もし、

差し支えなければ、

私に個別メッセージで、

プレビューリンクを共有いただければ、

もう少し調査できるかもしれません。

(プレビューリンクの寿命が非常に短い(1日くらい?)ので、私が拝見するタイミングによっては、閲覧できなくなっているかもしれないという懸念があることご了承ください。)

 

ご参考まで。

(キュー田辺)

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