如何在Shopify Theme App Extension嵌入块中获取店铺信息？

下面是几种直接可行的方案，帮你快速拿到店铺相关数据：

1. 利用Shopify全局前端变量 #

Shopify店铺的前端页面默认会加载Shopify全局对象，里面包含基础的店铺公开信息，无需额外配置就能直接在JS中调用：

// 获取店铺的myshopify域名，比如your-store.myshopify.com
const shopDomain = Shopify.shop;
// 获取店铺当前使用的货币信息
const currencyCode = Shopify.currency.active;
// 获取店铺的本地化设置
const locale = Shopify.locale;

2. 通过Liquid模板直接注入店铺完整数据 #

在你的Theme App Extension嵌入块的.liquid文件中，直接使用Shopify的shop对象，通过json过滤器把数据转为JS可读取的格式：

<!-- 在嵌入块的Liquid文件中添加这段代码 -->
<script>
  // 将完整的店铺对象转为JS变量
  const shopInfo = {{ shop | json }};
  
  // 调用示例：获取店铺名称、ID、域名
  console.log('店铺名称:', shopInfo.name);
  console.log('店铺ID:', shopInfo.id);
  console.log('店铺域名:', shopInfo.domain);
</script>

这种方式能拿到shop对象的所有公开属性，包括店铺名称、邮箱、时区、货币设置等，完全满足前端业务需求。

3. 如需私密/后端数据：通过应用后端接口获取 #

如果需要一些前端无法直接访问的私密数据（比如店铺的特定配置、应用关联的店铺数据），可以：

• 在嵌入块的Liquid中输出店铺的myshopify域名作为请求标识：

  <script>
    const shopOrigin = "{{ shop.myshopify_domain }}";
    // 调用你的应用后端接口
    fetch(`/api/shop-info?shop=${shopOrigin}`)
      .then(res => res.json())
      .then(data => {
        // 处理后端返回的店铺相关数据
        console.log('后端返回的店铺数据:', data);
      });
  </script>
  

• 后端通过Shopify的API验证请求合法性后，返回所需数据。

内容的提问来源于stack exchange，提问作者Saif Chaudhry