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

[s_yamaoka]

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

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画面でスライドが解除されて縦に伸びてしまうバグが起こってしまいました。

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

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

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

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

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

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

@Qcoltd さん

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

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

[Qcoltd]

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

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

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

imgに付与していますか？

buttonに付与していますか？

liに付与していますか？

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

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

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

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

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

onVariantChange(event)内での、

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

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

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

申し訳ありません、

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

もし、

差し支えなければ、

私に個別メッセージで、

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

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

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

ご参考まで。

(キュー田辺)