我已经从 Shopify 合作伙伴处嵌入了我的 Shopify 应用程序，但该应用程序仍会在其自己的浏览器中打开 window

Question

我制作了一个 Shopify 应用程序，它是一个销售渠道...现在我想嵌入该应用程序，但该应用程序始终显示在新浏览器中 window。

这是我所做的：从 Shopify 合作伙伴帐户，我转到应用程序的扩展程序并将其嵌入：

现在，当用户安装该应用程序时，我会将用户重定向到 oAuth 页面...如果用户接受该应用程序已安装。

下次用户登录应用程序时，我 return 以下代码（C#，ASP.NET MVC）：

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

我已尝试 return在测试视图中查看以下两个内容：

一个完整的 HTML 页：

<!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>

只是一个 div，其中包含我的应用程序：

<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>

但是我 return 的 HTML 从未嵌入到 Shopify 管理页面中...它总是出现在新的浏览器选项卡中。

如何嵌入此应用程序？

Answer 1

我不得不用以下内容更改我的回复，然后应用程序被嵌入：

<!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也是一个很好的资源。

我已经从 Shopify 合作伙伴处嵌入了我的 Shopify 应用程序，但该应用程序仍会在其自己的浏览器中打开 window

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

shopify

shopify-app-bridge