FROM CACHE - jp_header

テーマ【DAWN】 のコレクション絞り込み機能がiPhoneで正しく機能しない

WEBUILD
Shopify Partner
39 11 41

いつもお世話になっております。
現在 テーマDAWNをベースにテーマを再構築しています。
ほぼほぼ形になり、テストを行っていたところ、iPhone実機のみコレクションの絞り込み機能(facet filter)が機能しないことが判明しました。

PCやandroid端末では問題なく機能しますが、iPhone実機のみ正しく動作しません。
当方windows環境のため、iOS リモートデバッガーを使用してChromeで検証してみたところ

画像のエラーが表示されています。

WEBUILD_0-1689907310789.png

各Facetのパーツにイベントハンドラを渡すコンストラクターでエラーになっているため、絞り込みがされない状態です。

 

調べてみたらそもそもテーマのデモサイトの時点でエラーになっていました。

どなたか解決方法をご存知でしたらご教示いただければ幸いです。

最初に確認するべきでしたが、公式のテーマなので油断しておりました。。。

iPhoneがかなり古いのでそれが原因とかあるのかもしれないので一応バージョン情報も・・・

iPhone 5s
iOS : 12.5.7

ブラウザ:safari

1件の返信1

WEBUILD
Shopify Partner
39 11 41

自己解決いたしました。
エラーが出ていたdebounce 自体は 別のファイル global.jsに記述されていました。
そしてglobal.js内でいくつか古いSafariブラウザに対応しない記述があり、そちらがシンタックスエラーで止まってしまっており、debounceも未定義になっており機能しなかったようです。

global.js内のエラー箇所を古いブラウザに対応するよう修正したら無事機能するようになりました。

修正箇所は以下のとおりでした。
Line:155周辺

class QuantityInput extends HTMLElement {
  constructor() {
    super();
    this.input = this.querySelector('input');
    this.changeEvent = new Event('change', { bubbles: true });
    
    this.input.addEventListener('change', this.onInputChange.bind(this));
    this.querySelectorAll('button').forEach((button) =>
      button.addEventListener('click', this.onButtonClick.bind(this))
    );
  }
  //問題の箇所 クラスフィールドが古いサファリでは対応していない
  quantityUpdateUnsubscriber = undefined;

 

LINE:422周辺

//問題の記述 .setAttributeの対象が省略されている 三項演算子の偽が省略されている
 if (event instanceof KeyboardEvent) elementToFocus? .setAttribute('aria-expanded', false); 

//修正後  あんまり自信ないです(汗)前後の流れからthis.mainDetailsToggleを対象にしました。偽いらないみたいなのでifにしました。
if (event instanceof KeyboardEvent){
  if(elementToFocus) this.mainDetailsToggle.setAttribute('aria-expanded', false);
} 


LINE:506 周辺

//問題の箇所 コレだとクラスフィールドとして扱われる?
onResize = () =>{
    this.header &&
      document.documentElement.style.setProperty(
        '--header-bottom-position',
        `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
      );
    document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
  };

//修正後 普通のメソッドにしました。
onResize(){
    this.header &&
      document.documentElement.style.setProperty(
        '--header-bottom-position',
        `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
      );
    document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
  };

//上記に加え イベントリスナーの追加部も修正しました。
//元
window.addEventListener('resize', this.onResize);
//修正後
window.addEventListener('resize', () =>{this.onResize;});

 

あまり自信はありませんので真似される方もしいらっしゃったら自己責任でお願いいたします。
また、それ間違ってるよ!ってご指摘ございましたら遠慮なく書き込みしていただけると幸いです。