3

I am facing an error while trying to complete the official shopify tutorial about developing shopify app.

I have been following the tutorial step by step but even then ran in to problem where the error is thrown that my config file is invalid as it does not contain the host.

My _app.js file code is as follow:

import React from "react";
import App from "next/app";
import Head from "next/head";
import { AppProvider, Frame } from "@shopify/polaris";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import { Provider } from "@shopify/app-bridge-react";
import ClientRouter from "../components/ClientRouter";

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const config = {
      apiKey: API_KEY,
      shopOrigin,
      forceRedirect: true,
    };
    console.log(config);
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <ClientRouter />
          <AppProvider i18n={translations}>
            <Frame>
              <Component {...pageProps} />
            </Frame>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
MyApp.getInitialProps = async ({ ctx }) => {
  return {
    shopOrigin: ctx.query.shop,
  };
};
export default MyApp;

the console for the config file gives the right shopOrigin. Ill be thankful if anyone helps

4

2 回答 2

2

目前需要使用App Bridge 版本 2，就像 App 审查团队指出的那样：

确保您的应用位于 Shopify App Bridge 版本 2.0 上，以便将您的应用嵌入商家的管理中...

所以，我所做的是将商店名称（例如：toys.myshopify.com）保存在我的数据库中，编码为 base64 并在需要时发送类似“主机”查询参数。

const host = Buffer.from(`${shop}/admin`).toString('base64');
ctx.redirect(`${process.env.HOST}?shop=${shop}&host=${host}`);

请注意我是如何在商店值之后添加“ /admin ”的，这是一个重要的步骤，否则您会收到 404 错误（找不到页面）。

于 2021-07-22T04:37:16.207 回答
-1

因此，我能够通过更改应用程序桥的版本来解决问题，我使用的是我认为有错误或无法配置的最新版本，

"@shopify/app-bridge-react": "^2.0.2" [NOT WORKING]
   "@shopify/app-bridge-react": "^1.30.0"   [CURRENT WORKING]
于 2021-05-19T11:02:01.940 回答