Create a custom component / section on existing website that pulls data from external API

Solved
poplightDev
Visitor
1 0 1

Hello,

 

I am curious how to start this project. I am not a experienced shopify developer, but I have basic foundation of coding with JavaScript/Node.js and python. I am wanting to create a small custom section on my existing website where a user enters their name, email and zip code and in return it pulls data from an external API that will display back to the user the average cost of installing lighting in their area (without refreshing the page). I have tried to test and implement some basic code with the liquid docs and I can figure out how to customize the UI for the form features, but cannot figure out how to implement AJAX features or getting event listeners to activate any additional features such as even a console.log message with an event listener. I am even curious if I have the ability to implement what I am trying to do without creating a whole app? Or if I'm just not implementing JavaScript in the correct area? The website/theme was built through the Shopify CMS and not custom made. Thank you for any advice.

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Hi @poplightDev 

 

You might not be placing the javascript code in the right place. Look for theme.js or global.js under your Asset folder. Or you can also write the <script> tag in your theme.liquid, under the layout folder, just place it before the </body> so the code renders first before your script, or place defer in your script tag. 

 

If your API has certain auth, you might not want to exposed it to the front end. Therefore, app is the better option.

 

If your API does not have any auth or password needed, you can try the above suggestion. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Reply 1 (1)
Made4uo-Ribe
Shopify Partner
4122 946 1152

This is an accepted solution.

Hi @poplightDev 

 

You might not be placing the javascript code in the right place. Look for theme.js or global.js under your Asset folder. Or you can also write the <script> tag in your theme.liquid, under the layout folder, just place it before the </body> so the code renders first before your script, or place defer in your script tag. 

 

If your API has certain auth, you might not want to exposed it to the front end. Therefore, app is the better option.

 

If your API does not have any auth or password needed, you can try the above suggestion. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com