如何在Shopify JavaScript中获取文档元字段的文件URL

方案1：纯前端调用Storefront API实现 #

首先从你通过AJAX拿到的GID中提取文件ID，GID格式为gid://shopify/GenericFile/{file_id}，可以用字符串分割快速提取：

const gid = "gid://shopify/GenericFile/31146481287411";
const fileId = gid.split('/').pop(); // 提取最后一段的数字ID

接下来使用Shopify Storefront API发起GraphQL请求获取文件URL，需要你提前在Shopify后台生成Storefront Access Token：

async function getFileUrl(fileId) {
  const storefrontToken = '你的Storefront Access Token';
  const shopDomain = '你的店铺域名.myshopify.com';
  const apiVersion = '2024-07'; // 建议使用最新稳定版API

  const response = await fetch(`https://${shopDomain}/api/${apiVersion}/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': storefrontToken
    },
    body: JSON.stringify({
      query: `
        query GetFileUrl($fileId: ID!) {
          file(id: $fileId) {
            url
          }
        }
      `,
      variables: {
        fileId: `gid://shopify/GenericFile/${fileId}`
      }
    })
  });

  const data = await response.json();
  return data.data?.file?.url;
}

// 调用示例
getFileUrl(fileId).then(url => {
  if (url) {
    console.log('文件URL:', url);
    // 后续处理逻辑
  }
});

方案2：Liquid预渲染URL（优先推荐） #

如果你的页面是Shopify模板渲染的，完全可以跳过API请求，直接在Liquid中把文件URL通过页面元素的data-*属性暴露给JavaScript：

<!-- 在Liquid模板中添加隐藏元素 -->
<div id="hidden-file-data" data-file-url="{{ metafields.custom.document | file_url }}" style="display: none;"></div>

然后在JavaScript中直接读取这个值：

const fileUrl = document.getElementById('hidden-file-data').dataset.fileUrl;
console.log('文件URL:', fileUrl);

这种方法无需处理API权限，性能最优，是最简单的替代方案。

方案3：后端调用Admin API（适合复杂场景） #

如果你的项目有后端服务，可以通过Shopify Admin API查询文件详情，但Admin Access Token不能在前端暴露，必须由后端发起请求。以下是Node.js环境的示例：

const axios = require('axios');

async function getFileUrlFromAdmin(fileId) {
  const adminToken = '你的Admin Access Token';
  const shopDomain = '你的店铺域名.myshopify.com';
  const apiVersion = '2024-07';

  const response = await axios.get(`https://${shopDomain}/admin/api/${apiVersion}/files/${fileId}.json`, {
    headers: {
      'X-Shopify-Access-Token': adminToken
    }
  });

  return response.data.file.public_url;
}

后端拿到URL后再返回给前端，适合需要在后端做权限校验或额外处理的场景。

内容的提问来源于stack exchange，提问作者s.kuznetsov