如何在 Shopify 嵌入式应用程序中获取商店的 URL？

Question

我正在使用此模板构建一个 Shopify 应用程序：https://github.com/Shopify/shopify-app-template-node/tree/cli_three 我想知道如何获得使用我的应用程序的商店（指 iFrame 之外的文档的 URL）。我有一个使用

location.ancestorOrigins

（https://developer.mozilla.org/en-US/docs/Web/API/Location/ancestorOrigins）的工作方法，但由于这与 Firefox 不兼容，我想知道是否还有另一种方法。提前感谢您的帮助！

Answer 1

好的，所以我自己想出了一个解决方案，但感谢@TwistedOwl 和@David Lazar 的帮助。我在这里发布我的代码以防将来有人遇到同样的问题：

import {useAppBridge} from "@shopify/app-bridge-react";

function DemoPage() {
    const bridge = useAppBridge();
    const shopUrl = bridge.hostOrigin.replace('https://', '').replace('www.', '');
    console.log(shopUrl);
}

Answer 2

对您的应用程序的所有调用都提供一个商店参数（现在还有一个主机参数）确保您始终知道使用您的应用程序的 shopify 商店。在没有商店参数作为 Shopify 等式的一部分的情况下调用您的应用程序的情况为零。

Answer 3

我的解决方案是创建一个 API 端点来获取商店详细信息，在前端查询并使用它。 我的示例在前端使用

node.js

和

React

。

backend/index.js

app.get("/api/shop", async (_req, res) => {
// Refer to docs: https://shopify.dev/docs/api/admin-rest/2023-01/resources/shop#resource-object
  const shopData = await shopify.api.rest.Shop.all({
    session: res.locals.shopify.session,
  });
  res.status(200).send(shopData);
});

frontend/index.js

// Utilize app query hook provided by node.js/react template from shopify
import { useAppQuery } from "../hooks";

export default function HomePage() {
  const {
    data,
    isLoading,
  } = useAppQuery({
    url: "/api/shop"
  });
 // Do something while data is loading
...
 // Else return page
 console.log("DATA", data);
 return (
    <Page>
      <Text variant="headingLg" as="h3">
         Welcome to {data.data[0].name} App
       </Text>
    </Page>
  )
}