Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Unable to disable force redirect in new app bridge #239

Closed Rafi993 closed 9 months ago

Rafi993 commented 9 months ago

Describe the bug

  1. I'm unable to disable force redirect in new app bridge
  2. I tried few variations of the meta tag
    <meta name='shopify-disabled-features' content='auto-redirect' />

    but nothing seems to work.

Expected behaviour

Force redirect should be disabled

Rafi993 commented 9 months ago

The value of meta tag is directly assigned to config in https://cdn.shopify.com/shopifycloud/app-bridge.js add a simple check to see if it is a stringified array and then JSON.parsing it would fix this

   (function () {
            const t = Array.from(
                document.querySelectorAll('meta[name^="shopify-"i]')
              ),
              n = {};
            for (const o of t)
              o.hasAttribute("name") &&
                (n[
                  ((e = o.getAttribute("name").replace(/shopify-/i, "")),
                  e.toLowerCase().replace(/-+(.)/g, (t, n) => n.toUpperCase()))
                ] = o.getAttribute("content"));
            var e;
            return n;
henrytao-me commented 9 months ago

@Rafi993 can you describe what behavior you expect when force redirect is disabled? I tested the meta tag above, it works as expected which means it won't auto redirect your app back to Shopify Admin when your app is loaded on the top frame (browser url).

I agree that the typescript definition of config.disabledFeatures is an array and the getAttribute always return a string. However, we are using .includes to check for auto-redirect. So, it should work for both array and string.

  function isOptedOutOfRedirect() {
    const excludes: string[] = api.config.disabledFeatures ?? [];
    return excludes.includes('auto-redirect');
  }

You can also do this instead of meta tag before loading Shopify App Bridge CDN

  <script type="text/javascript">
    window.shopify = {
      config: {
        disabledFeatures: ['auto-redirect'],
      },
    };
  </script>
Rafi993 commented 9 months ago

This worked for me

  window.shopify = {
      config: {
        disabledFeatures: ['auto-redirect'],
      },
}

Thank you @henrytao-me . Example to use this can be updated in the doc for anyone else looking for it