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
6373 1530 1900

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
6373 1530 1900

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.