如何在Tapcart自定义区块中调用Shopify API获取商品列表？

• 直接用Tapcart内置的Liquid变量
  Tapcart本身已经和Shopify完成数据同步，在自定义区块的代码编辑器里，直接用它支持的Liquid语法就能调用商品数据。比如要获取当前商品的标签，写{{ product.tags }}；要拉取某个集合下的商品列表，用{{ collection.products }}就行——完全不用额外调用API，这些都是Tapcart已经帮你同步好的数据源。

• 用Shopify Storefront API（前端可调用）
  Shopify的Ajax API不能在自定义前端使用，但Storefront API是允许前端调用的。你需要先在Shopify后台生成一个Storefront API访问令牌，勾选商品、集合相关的权限，然后在Tapcart自定义区块的JS代码里用fetch请求调用GraphQL接口。示例代码：

const storefrontToken = '你的Storefront令牌';
const shopUrl = '你的店铺域名.myshopify.com';

fetch(`https://${shopUrl}/api/2024-07/graphql.json`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': storefrontToken
  },
  body: JSON.stringify({
    query: `
      query GetProducts($first: Int!) {
        products(first: $first) {
          edges {
            node {
              id
              title
              tags
            }
          }
        }
      }
    `,
    variables: { first: 10 }
  })
})
.then(res => res.json())
.then(data => {
  // 处理返回的商品数据
  console.log(data.data.products.edges);
});

注意别把令牌硬编码在代码里，用Tapcart的环境变量存储更安全。

• 后端中转（可选，适合敏感场景）
  如果担心前端直接调用API的安全问题，可以自己搭建一个简单的后端服务，用Shopify Admin API（仅支持服务器端调用）拉取商品数据，然后让Tapcart的自定义区块请求你的后端接口获取数据。或者用Tapcart的Webhooks功能，在Shopify商品更新时自动同步数据到Tapcart的存储，前端直接读取即可。

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