【埋め込みアプリ】カートページの特定の場所に要素を追加する方法

[Qpick]

お世話になっております。

【概要】

表題の件ですが、現在Theme app extensions のApp embed blocks（埋め込みアプリ）を開発中です。

実現したい内容としては、ユーザーがアプリを有効化すると自動で「購入手続きボタン」の上にもう一つボタンを増やすようなことをしたいです。(添付参照)

【ご回答いただきたい内容】

・特定のIDが付与されているHTMLタグを指定して要素を追加する方法はありますでしょうか？もしある場合の実現方法をご教示いただきたいです。

お手数ですが、ご確認のほどよろしくお願いいたします。

[ogasawarakyohei]

埋め込みブロックを利用する場合、埋め込みブロックだけでは任意の要素を追加するということはできませんので、JavaScriptを使う必要があります。

流れとしては、

1. JavaScriptでボタンを追加するコードを書く
2. 埋め込みブロックで1のJavaScriptを読み込む設定をする

となります。

JavaScriptでボタンを追加するには、

1. createElementでbutton要素を作成
2. appendChildやinsertBeforeを使って1で作成した要素を追加

が一般的な方法かと思います。

JavaScriptを埋め込みブロックで使うには、

1. 上で追加したJavaScriptをtheme extensionのassetsディレクトリ以下に置く
2. schemeのjavascriptに1のファイルを指定、もしくはscriptタグを使ってファイルを読み込む

です。

特定のIDが付与されているHTMLタグを指定して要素を追加する方法

追加する要素に特定のIDを付与したいということであっているのであれば、createElementで作成した要素にidを指定すればOKです。

以上、参考になりましたら幸いです。

[Qpick]

ご回答いただきありがとうございます！

非常に参考になりました。

一旦、JavaScriptを使用して任意の場所に差し込む方法で実装してみようかと思います！

引き続きどうぞよろしくお願いいたします。