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

Solved

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

poplightDev
Visitor
2 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
10132 2403 3037

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
10132 2403 3037

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.