[Shopify] [Infinite Options] オプションの要素が読み込まれた後に何か処理をしたい

公開日:2023/03/12

Shopifyのプラグイン「Infinite Options」でオプションの表示を行う際、スタイルに手を入れたり、補足説明用のリンクを挿入したりといった処理を行いたいケースがあります。

ですが「Infinite Options」のオプションは、通常のDOM要素より読み込み、表示のタイミングが遅いため、通常のonloadやreadyではまだ要素が存在せずJavaScriptの処理が機能しません。

以下のような記述をすることで、オプション表示が完了したタイミングで「Infinite Options」の要素を取得することができます。

window.Shoppad = window.Shoppad || {},
window.Shoppad.apps = window.Shoppad.apps || {},
window.Shoppad.apps.infiniteoptions = window.Shoppad.apps.infiniteoptions || {},
window.Shoppad.apps.infiniteoptions.ready = function() {
    $('.spb-label-tooltip').append('<span>補足テキスト</span>');
};

上記は、オプションの項目名を表示する部分にspan要素を追加するサンプルコードになります。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。