search

ozzyonfire / shopify-next-app

Shopify app template on Next.js with app directory
https://shopify-next-app-six.vercel.app
MIT License
64 stars 7 forks source link

Why do we need the Exitiframe. #9

Closed SheryConcepts closed 6 months ago

SheryConcepts commented 6 months ago

I have been reading this codebase and don't understand the use of ExitIframe.

If embedded === 1 we are redirecting to the ExitIframe which in essence make the client call our backend without the embedded queryParam.

Why are we doing this? Is there something I don't understand about embedded = 1 query param? Can't we just ignore it?

Thanks for the code tho. It has helped me understand how shopify apps work.

ozzyonfire commented 6 months ago

If this is an embedded app you are using, it is necessary. Because the app runs in an iframe (within the shopify admin) you need to handle redirecting a couple different ways. Shopify adds the embedded=1 query param so that we know what context we are in.

We are able to redirect to the exitiframe page (within an iframe) in order to kick us out to the install url. If we tried to do this on the server, the browser would block it for being cross-origin.

Here is the official Shopify react app template which also includes a similar page; https://github.com/Shopify/shopify-frontend-template-react/blob/main/pages/ExitIframe.jsx