5

Shopify 最近发布了他们的新@shopify/app-bridge，但我不清楚它应该如何与@shopify/polaris一起使用。

例如，我尝试制作一个 React 组件，该组件将使用 app-bridge 和 Polaris 来显示 toast。

import React, { Component } from "react";
import * as PropTypes from "prop-types";
import { Toast } from "@shopify/app-bridge/actions";
import { Page } from "@shopify/polaris";

class Start extends Component {
  static contextTypes = {
    polaris: PropTypes.object
  };

  showToast() {
    console.log("SHOW TOAST");
    console.log(this.context.polaris.appBridge);
    const toastNotice = Toast.create(this.context.polaris.appBridge, {
      message: "Test Toast",
      duration: 5000
    });
    toastNotice.dispatch(Toast.Action.SHOW);
  }

  render() {
    this.showToast();
    return (
      <Page title="Do you see toast?">
        <p>I do not see toast.</p>
      </Page>
    );
  }
}

export default Start;

但它似乎没有调度动作。关于为什么不的任何想法？请注意，我的应用程序包含在 AppProvider 中，并且 app-bridge 已初始化。

ReactDOM.render(
  <AppProvider
    apiKey={process.env.REACT_APP_SHOPIFY_API_KEY}
    shopOrigin={queryString.parse(window.location.search).shop}
  >
    <Start />
  </AppProvider>,
  document.getElementById("root")
);

有什么建议么？

4

2 回答 2

1

所以经过大量调试后，我从 Shopify 发现，在 App Bridge 内部，在采取任何行动之前，他们会检查 localOrigin 是否与 appURL 匹配（在合作伙伴仪表板中输入的那个）。在我的情况下，我有一个后端（heroku 上的 node.js 用于身份验证）和一个前端（firebase 上的反应包），我的应用程序从访问后端开始，然后如果身份验证签出，它会重定向到前端。因此 localOrigin 不匹配......嗯，我很高兴能弄清楚这一点，因为我为此失去了很多睡眠。现在的问题是如何处理它......也许这是可以用 AppBridge 更新的东西？还是我应该考虑更好的设计？

于 2019-04-13T20:20:07.647 回答
0

现在有@shopify/app-bridge-react，
https://www.npmjs.com/package/@shopify/app-bridge-react

Shopify 据说还没有文档……但是，当他们提出来时，有人可以更新我的答案。:)

注意： 一定要static contextType = Context;访问，this.context以便在您的组件中调度操作/等。
（希望这可以为您节省几天的痛苦，哈哈，我不是 React 开发人员，所以，是的……这在示例中没有被标记为“关键”或任何内容）。

我也想解决@SomethingOn 的评论，但我没有足够的声誉发表评论......

您实际上可以调试 iframe。在 chrome 开发工具中，在顶部显示“顶部”的位置，您实际上可以选择要调试的框架。
https://stackoverflow.com/a/8581276/10076085

选择 Shopify 应用 iframe 后，输入“window.location”或您想要的任何内容！

Shopify 的文档和示例是有限的，我自己在使用 Shopify 应用程序时遇到了一堆问题，所以我只想尽可能多地提供帮助！

于 2020-04-08T01:54:00.833 回答