咨询：如何在Shopify Theme-App-Extension与应用后端间传递数据

一、从后端拉取数据到Theme App Extension #

Theme App Extension运行在店铺前端，无法直接连接数据库，必须通过你的应用后端中转，常用两种实现方式：

1. Liquid注入初始数据 #

在Extension的Liquid文件中，借助Shopify的metafield或应用后端生成的代理路由传递数据，适合加载页面时需要展示的静态/半静态数据：

{% comment %} 读取存储在店铺级metafield的初始数据 {% endcomment %}
{% assign app_initial_data = shop.metafields.your_app_namespace.display_data %}
<script>
  // 转换为JS可直接使用的对象
  const initialData = {{ app_initial_data | json }};
  // 渲染到页面示例
  document.querySelector('.data-box').innerText = initialData.user_content;
</script>

注：metafield的数据需要由你的应用后端通过Shopify API写入，比如店铺安装应用后，自动把基础配置或预设数据存入对应metafield。

2. 前端JS调用后端API #

适合用户操作后动态拉取数据的场景，通过fetch或Axios调用应用后端接口，注意处理跨域和身份验证：

async function fetchDynamicData() {
  try {
    const response = await fetch('/apps/your-app-slice/api/fetch-user-data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        // 验证顾客身份（如果需要关联用户数据）
        'X-Customer-Token': Shopify.customer?.token || ''
      }
    });
    const data = await response.json();
    // 动态更新页面内容
    document.getElementById('dynamic-content').innerHTML = data.html_content;
  } catch (err) {
    console.error('数据拉取失败:', err);
  }
}
// 用户触发时调用
document.getElementById('refresh-btn').addEventListener('click', fetchDynamicData);

需要在shopify.app.toml中配置代理路由，让前端可以通过相对路径调用后端接口，避免跨域问题。

二、从Theme App Extension发送数据到后端数据库 #

前端收集用户输入后，必须通过应用后端中转，再写入数据库，步骤如下：

1. 前端提交数据到后端API #

async function submitUserInput() {
  const userInput = document.getElementById('user-input').value;
  try {
    const response = await fetch('/apps/your-app-slice/api/save-user-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 验证请求合法性，防止恶意提交
        'X-Shopify-Hmac-Sha256': generateRequestHmac(userInput)
      },
      body: JSON.stringify({
        input: userInput,
        shop_domain: Shopify.shop,
        customer_id: Shopify.customer?.id || null
      })
    });
    const result = await response.json();
    result.success ? alert('数据保存成功') : alert('保存失败，请重试');
  } catch (err) {
    console.error('数据提交失败:', err);
  }
}

2. 后端处理并写入数据库 #

后端收到请求后，先验证HMAC签名确保请求来自合法店铺，再将数据写入你的数据库（如PostgreSQL、MongoDB）。如果需要关联Shopify资源（如顾客、订单），可通过请求中的shop_domain和customer_id做关联标记。

三、核心注意事项 #

• 权限配置：确保你的应用拥有必要的Shopify API权限，比如读取顾客数据需要read_customers，写入metafield需要write_metafields。
• 数据安全：敏感数据绝对不能存放在前端，所有涉及用户隐私或业务核心的数据必须在后端处理；请求必须添加身份验证，避免恶意调用。
• 性能优化：高频访问的数据可存入metafield做缓存，减少后端API的调用次数，提升页面加载速度。

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