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

[poplightDev]

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.

[Made4uo-Ribe · 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.