How can I use a Shopify app proxy within a product page? [closed]

Question

Essentially we want on our Shopify product pages to show a button to a logged-in customer. That button would use our app to then call an external API.

I'd like to use an app proxy, but it appears we cannot do an app proxy on a product page, but we could technically call an app proxy on a product page via an Ajax call. We could inject the button into the page, but we need that button to still make a call to the app.

Guess we could load the button in an iframe?

Would anyone know of a best practice on how to do this? Thanks!

Answer 1

Here is the recipe I use, which works perfect and seems to answer your use case.

On a product page, you know if a customer is logged in or not, using Liquid. Therefore you can render a button where you want, and ensure there is Javascript to handle button clicks. Since you are rendering a button and Javascript, it makes sense that you can also do callbacks to your App Proxy. Perhaps a button click sends the Proxy the customer ID, your API calls look up the customer, and you birth a Unicorn for them. Your App Proxy returns Liquid or just JSON, so the callback can render HTML for you or turn the JSON into something for the customer.

Works great for me. Try it. You might like it.