App Bridge (React) - Disabled embed for a single page

david-massive
Visitor
3 0 1

Hi guys,

 

I have a question about embedded apps. Using App Bridge embeds my pages "/index" "/otherPage" into the Shopify iFrame. However, I'm trying to create a pop-up window (say at "/popup") within my app that isn't embedded within the Shopify interface. To do this I'm using standard Javascript:

 

window.open("/popup")

 

I'm using App-Bridge-React to wrap my Nextjs/React app with the <Provider> tag in "_app.js":

 

const config = {
    apiKey: API_KEY,
    shopOrigin: getCookie("shopOrigin"),
    forceRedirect: false
};

<Provider config={config}>
    <AppProvider i18n={translations}>
        <Component {...pageProps} />
    </AppProvider>
</Provider>

Every page in my app opens within the Shopify interface. Obviously, when I open a popup windows from the App pointing to "domain.com/popup" it still automatically re-renders the page within Shopify because page is also wrapped in the Provider. 

 

Can I selectively turn this feature off for this specific page? Is there a potential work-around people have used?

 

Thank you!

David

Reply 1 (1)

_JB
Shopify Staff
836 100 222

Hey @david-massive,

 

I can confirm it's not possible to selectively change the forceRedirect setting on a per page basis. I'm not aware of any workarounds but I'll let others comment if they've know of one.

JB | Solutions Engineer @ Shopify 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog