Adding React.js app/widget to front end through ScriptTag API

seandz
Excursionist
52 3 8

This question is for app develpoment and seeks to avoid theme modifications. Is this how one would add a React.js app after a Cart button on Shopify product pages on the front end:

 

1. Find a common id for Cart buttons and/or divs in popular Shopify themes.

2. Use the Script Tag API to load a javascript file.

3. The javascript file selects the common ID. Then it uses insertAdjacentHTML() to insert a new div with an id like "injectionDiv"

4. A 2nd call to the Script Tag API loads a bundle.js file. This is the React.js application

5. This app/widget targets "injectionDiv", thus rendering the app.

 

Please let me know if I am understanding the flow correctly, thank you.

tristanherm
Tourist
9 0 0

Curious about this answer as well?

0 Likes

I'm also wondering how to do this. Any updates? The lack of response in this forum is frustrating.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes