Liquid、JavaScriptなどに関する質問
いつもお世話になっております。
現在 テーマDAWNをベースにテーマを再構築しています。
ほぼほぼ形になり、テストを行っていたところ、iPhone実機のみコレクションの絞り込み機能(facet filter)が機能しないことが判明しました。
PCやandroid端末では問題なく機能しますが、iPhone実機のみ正しく動作しません。
当方windows環境のため、iOS リモートデバッガーを使用してChromeで検証してみたところ
画像のエラーが表示されています。
各Facetのパーツにイベントハンドラを渡すコンストラクターでエラーになっているため、絞り込みがされない状態です。
調べてみたらそもそもテーマのデモサイトの時点でエラーになっていました。
どなたか解決方法をご存知でしたらご教示いただければ幸いです。
最初に確認するべきでしたが、公式のテーマなので油断しておりました。。。
iPhoneがかなり古いのでそれが原因とかあるのかもしれないので一応バージョン情報も・・・
iPhone 5s
iOS : 12.5.7
ブラウザ:safari
自己解決いたしました。
エラーが出ていた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;});
あまり自信はありませんので真似される方もしいらっしゃったら自己責任でお願いいたします。
また、それ間違ってるよ!ってご指摘ございましたら遠慮なく書き込みしていただけると幸いです。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024