テーマファイルDawnモバイル表示でのサイズ選択時について

日本語 ディスカッション Shopify テーマ
1

テーマファイル「Dawn」の商品ページをモバイル表示した際に、カラーやサイズを選択すると商品写真のサムネイルのところまで上スクロールして戻ってしまうのですが、こちらをスクロールさせない方法はありますでしょうか。

デモではカラーだけなので、カラー選択時に商品写真が変わるのが見れて良いのですが、サイズ、カラーがあり、サイズを選択しても常に上に戻ってしまうので何度も下に戻らないといけなくなってしまい、もしテンプレートファイルから修正可能でしたらスクロールさせないようにしたいです。よろしくお願いいたします。

2

Dawn 6.0.2を調べました。

アセット(assets)のmedia-gallery.jsのsetActiveMediaという関数でスクロール処理をしているように見受けらしました。

カスタマイズしていないようでしたら、42行目から49行目の下記のあたりです。

window.setTimeout(() => {
        if (this.elements.thumbnails) {
          activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
        }
        if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
          activeMedia.scrollIntoView({behavior: 'smooth'});
        }
      });

上記の、

activeMedia.scrollIntoView({behavior: 'smooth'});

で処理していると思われますので、

こちらを単純にコメントアウトすればスクロールしなくなるかと思います。

ただし、下記ご了承ください。

  • 動作検証はしておりません。
  • この処理をコメントアウトすることで他の処理に影響が出る可能性があります。(影響があったとしても、クリティカルなものではないと思いますが。)

ご参考まで。

(キュー田辺)

1 Like
3

@Qcoltd
ご返信ありがとうございました！上記コメントアウトしたところ、スクロールしなくなりました！

他動作部分に影響ないか全体を確認して本番環境で実行しようと思います。

とても助かりました :raising_hands: ありがとうございますー！

1 Like