Question

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

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

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中，并且应用程序桥已初始化。

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

有什么建议吗？

Answer 1

因此，在进行大量调试之后，我从Shopify中了解到App Bridge内部，在采取任何措施之前，他们检查localOrigin是否匹配appURL（在合作伙伴信息中心中输入的appURL）。在我的情况下，我有一个后端（heroku上的node.js用于身份验证）和一个前端（firebase上的反应包），我的应用程序通过点击后端来启动，然后如果身份验证签出，它将重定向到前端。因此，localOrigin不匹配...嗯，我很高兴能弄清楚这一点，因为我对此失去了很多睡眠。现在的问题是该怎么做...也许这可以用AppBridge更新吗？还是我应该考虑一个更好的设计？

Answer 2

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

据说Shopify还没有文档。。。但是，有人提出来时，我可以更新我的答案。：）

注意： 确保拥有static contextType = Context;来访问this.context以便在组件中调度动作/等。
（希望这可以节省您数天的苦恼，哈哈，我不是React开发人员，所以，是的。。。在示例中未标记为“关键”或任何内容。）

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

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

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

Shopify的文档和示例是有限的，我自己在Shopify应用程序上工作时遇到了很多问题，所以我只想尽可能多地传播帮助！

Answer 3

可以use App Bridge with Polaris：

App Bridge React与Polaris完全兼容。要同时使用两者，请将您的应用包装在Polaris的<AppProvider>组件和App Bridge React的<Provider>组件中。

以下示例来自使用Shopify App CLI创建的新节点项目：

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App, { Container } from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";

const client = new ApolloClient({
  fetchOptions: {
    credentials: "include",
  },
});
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const shopOrigin = Cookies.get("shopOrigin");
    return (
      <Container>
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: true,
            }}
          >
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

export default MyApp;

请注意，App Bridge的<Provider>由Polaris的<AppProvider>包装。

如何通过@ Shopify / polaris-react使用新的@ Shopify / app-bridge

3 个答案: