shopifyshopify-app-bridge

I have made my Shopify app embedded from Shopify Partners, but the app still opens in its own browser window

I have made a Shopify app, it is a sales channel... now I want to embed the app, but the app always shows in a new browser window.

This is what I have done: From Shopify Partners Account, I have gone to the App's Extension and made it embedded:

enter image description here

Now when user installs the app, I redirect the users to the oAuth page... if user accepts the app is installed. 

Next time user logs in to the app, I return the following code (C#, ASP.NET MVC):

public ActionResult Handshake(string shop)
{
    return View("Test"); // test view
}

I have tried returning both of the following content in the Test view:

  1. a complete HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
</head>
<body>
    <div class="Polaris-Page">
        <div class="Polaris-Page__Header">
            <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
        </div>
        <div class="Polaris-Page__Content">
            <p>Page Content</p>
        </div>
    </div>
</body>
</html>
  1. Just a div which contains my app:
<div class="Polaris-Page">
    <div class="Polaris-Page__Header">
        <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
    </div>
    <div class="Polaris-Page__Content">
        <p>Page Content</p>
    </div>
</div>

But the HTML that I return never gets embedded in Shopify Admin page... It always appear in a new browser tab.

enter image description here

How can I embed this app?

Solution

  • I had to change my response with the following and then the app was embedded:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/3.21.1/polaris.min.css" />
    <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
    <script type="text/javascript">
        ShopifyApp.init({
            forceRedirect: true,
            apiKey: 'my-api-key',
            shopOrigin: 'https://store-name.myshopify.com'
        });
        ShopifyApp.Bar.loadingOff();
    </script>
</head>
<body>
    <div class="Polaris-Page">
        <div class="Polaris-Page__Header">
            <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Settings</h1>
        </div>
        <div class="Polaris-Page__Content">
            <p>Page Content</p>
        </div>
    </div>
</body>
</html>

    This link is also a good resource.