如何将Shopify后台商品详情页链接至自有应用？求替代方案

以下几种方式可以不用调用Shopify API就能获取store_name，实现应用链接到商品详情页的关联：

• 从当前应用页面URL直接提取
  你的应用链接本身就包含{store_name}，用户访问应用时，当前页面的URL路径里已经存在这个值。可以通过前端代码解析URL路径来提取：

  // 解析当前URL路径
  const pathSegments = window.location.pathname.split('/');
  // 路径格式为 /store/{store_name}/apps/...，索引2的位置就是store_name
  const storeName = pathSegments[2];
  // 拼接商品详情页链接
  const productDetailUrl = `https://admin.shopify.com/store/${storeName}/products/${productId}`;
  

• 利用Shopify App Bridge获取店铺上下文（内嵌应用场景）
  如果你的应用是Shopify内嵌应用（Embedded App），可以通过Shopify App Bridge直接获取店铺信息，无需额外API请求：

  // 以React环境为例，使用@shopify/app-bridge-react
  import { useShop } from '@shopify/app-bridge-react';
  
  const MyComponent = () => {
    const shop = useShop();
    // shop对象包含店铺的myshopify域名，比如xxx.myshopify.com，提取前缀作为store_name
    const storeName = shop.split('.')[0];
    const productDetailUrl = `https://admin.shopify.com/store/${storeName}/products/${productId}`;
    // 后续逻辑...
  };
  

  非React环境下，也可以通过App Bridge基础API获取店铺信息，或者直接读取window.Shopify.shop（部分内嵌场景下可用）。

• 通过Liquid模板变量传递（模板渲染场景）
  如果你的应用页面是通过Shopify Liquid模板渲染的，可以直接在模板中注入store_name变量，再传递给前端代码：

  <!-- 在Liquid模板中 -->
  <script>
    const storeName = "{{ shop.permanent_domain | split: '.' | first }}";
    // 后续在JS中使用该变量拼接链接
  </script>
  

内容的提问来源于stack exchange，提问作者Seok Loi