2

我制作了一个 Shopify 应用程序，它是一个销售渠道……现在我想嵌入该应用程序，但该应用程序总是显示在新的浏览器窗口中。

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

在此处输入图像描述

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

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

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

我尝试在测试视图中返回以下两个内容：

  1. 一个完整的 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>
  1. 只是一个包含我的应用程序的 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>

但是我返回的 HTML 永远不会嵌入到 Shopify 管理页面中......它总是出现在新的浏览器选项卡中。

在此处输入图像描述

我怎样才能嵌入这个应用程序？

4

1 回答 1

0

我必须使用以下内容更改我的回复，然后嵌入该应用程序：

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

这个链接也是一个很好的资源。

于 2020-08-04T06:06:47.470 回答