Calling an external api from shopify liquid

[manm121]

I know this must have been asked a million times, but unfortunately, I am looking for a straight forward steps to my basic question:

I want to call an external api with shopify objects (e.g. product) as request payload and based on response of this external API, I need to render specific HTML in my shopify store (cart). Here comes the tricky part - my external api requires authentication and doesn't allow anonymous access hence the request must go through some backend system of the Shopify ecosystem (private app?).

Can anyone please outline the steps to do so?

[Jason]

Liquid is a templating language - it can't make server side API calls.

Is there something blocking you from having middleware between the external API and Shopify? The middleware handles the async request from the page, packages it up into an authenticated request to the API, and sends back a response.

If not, give us a real world example of what you're trying to do. Context helps.

[manm121]

Hey Json, first of all thank you very much for your response and apologies for not following up on this; after not receiving any reply for few days, I kind of lost hope.

About the liquid - external api call not through liquid, but through javascript ajax call

Anyway, yes you are right, let me give you the business context in series of steps:

1. We have few special products in the shopify store, which when selected, needs few additional selection from the customer - no problems here.

2. After customer is done selecting the additional steps, the product can be added to the cart.

3. But before customer checks out, as soon as customer visits the cart page, we want to check if this special product is in the cart or not - no problems here

4. If this special product is in cart, we need to make an api request to a third party api and send the selections made by the customer for this special product, and this third party api tells us whether it is okay or not. - now this is a hard bound requirement, it has to be this 3rd party api which can validate the product is okay or not.

So this is what we want to do:

As soon as customer visits the cart page, we want to check if the special item is okay or not. If not, we want to show an edit button next to the special item in the cart and disable the checkout button.

There are a lott of documentations and very scattered - its not very clear what exactly should one do. The most I understood was:

1. I create a custom app (private apps are deprecated) 

2. My store front talks(sends api request) to the custom app - how?

3. Custom App talks to my 3rd Party (server) api and essentially acts like a proxy - how?

Currently I am trying to understand how to achieve these 3 steps? Could you please help and guide me here?

[JRcode]

Hi @manm121 

Have you managed to make the server side call? I've been looking for days how to do it to recover data from Klaviyo and there's nothing useful in the documentation regarding this.

Thanks

[manm121 · Accepted solution]

Hi @JRcode ,

Yes I was able to make server side calls. You need to do following:

1. Create a Custom App in your shopify store and install it.

2. Create a server side REST api in your choice of language. I used nodejs (expressJs) to create my REST api. This rest api code can receive request from your shopify store and can make calls to Klaviyo and send the response back to shopify store which you can leverage in liquid.

3. Then goto Custom App (which you created in step 1) settings in shopify and setup the app i.e. its callback urls, its proxy url - the youtube video below has the exact details

4. The above steps are easy to do, the most important part is only serving those requests from the rest api which are originated by Shopify i.e. HMAC check

I followed this video from Shopify to understand how to link my REST api with shopify and how to secure it:

Building Your First Shopify App with Node.js and Express // Andrew McCauley | Shopify Partners - You... 

After that it was piece of cake.

Hope this helps.

[JRcode]

Thank you much @manm121 

[Mikevv]

Hi, @manm121 , I am facing the same issue and wish you can give me some help, as you said, I had searched a lot and was unable to find any solution. 

In your solution, step 2, what "server side REST api" are you referring to, is it https://shopify.dev/docs/api/admin-rest? I don't see how it relates to the task here. Also, you mentioned "This rest api code can receive request from your shopify store ", can you give more details that how can you let the shopify store to send request? I think letting the shopify store to send a request is exactly what you wanted to implement at the first place, correct?

Thank you very much!

[APIEase]

Hi @Mikevv 

APIEase is an app that was created to solve the exact problem that @manm121 has described. I believe it may solve your issue as well.

It allows you to call any API from Shopify Custom Liquid in your storefront. It securely stores your external api credentials so that you may use any API that requires authentication without exposing credentials in your Liquid content.

You can use APIEase to securely call any external API without having to create your own app.

Here's how it works, in the APIEase app you will:

1. Add the external URL and endpoint you need to call.
2. Attach credentials and any other required query parameters or header parameters for the API call. Non sensitive parameters may also be provided from your Liquid content.
3. You can test that the call functions properly from our app before attempting to embed the call in your Liquid content.
4. Copy the provided sample javascript snippet from our app and paste into your Custom Liquid content. Some customization of the sample javascript snippet will probably be required to suit your particular needs.

If you have any further questions I will be happy to help.

The app is completely functional and under active development so if there is a special need that you may have we will take that opportunity to improve the app to suit any reasonable requirement.

Thanks,

Kevin

APIEase

[VictorCQ]

Hi @manm121 , thank for your answer.

I saw the video in your answer. However, I still have some confuses. My question is  how can I make a request to Rest api from shopify store in liquid.

(I want to get data from external API and render it in server side)