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;});
あまり自信はありませんので真似される方もしいらっしゃったら自己責任でお願いいたします。
また、それ間違ってるよ!ってご指摘ございましたら遠慮なく書き込みしていただけると幸いです。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025