如何使用CLI Node App在Shopify店铺展示应用数据？

1. 元字段（Metafields）存储 + 主题Liquid渲染 #

这是最直接的方案，把用户上传的数据存储到Shopify的元字段中，再通过主题模板渲染出来。

实现步骤： #

• 存储数据：用Node.js调用Shopify API，将用户上传的JSON/结构化数据存入对应资源的元字段（店铺、产品、顾客等，根据数据关联对象选择）。
• 主题渲染：在主题的Liquid模板中读取元字段数据，解析后渲染成页面元素。

Node.js存储元字段代码示例：

const { Shopify } = require('@shopify/shopify-api');

async function saveUserDataToMetafield(session, userUploads) {
  const restClient = new Shopify.Clients.Rest(session.shop, session.accessToken);
  try {
    const response = await restClient.post({
      path: 'metafields',
      data: {
        metafield: {
          namespace: 'custom_user_data', // 自定义命名空间
          key: 'uploaded_content',
          value: JSON.stringify(userUploads), // 将数组/对象转为JSON字符串
          type: 'json' // 指定元字段类型为JSON
        }
      }
    });
    return response.body.metafield;
  } catch (err) {
    console.error('存储元字段失败:', err);
  }
}

Liquid模板渲染示例：

{% assign userUploads = shop.metafields.custom_user_data.uploaded_content.value | parse_json %}
{% if userUploads.size > 0 %}
  <section class="user-uploads-section">
    <h2>我的上传内容</h2>
    <div class="uploads-grid">
      {% for item in userUploads %}
        <div class="upload-item">
          <img src="{{ item.image_url }}" alt="{{ item.title }}" />
          <p>{{ item.description }}</p>
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}

2. 应用区块（App Blocks）嵌入展示 #

通过Shopify的App Blocks功能，让用户可以在主题编辑器中自主将你的数据展示区块添加到任意页面（首页、产品页等），无需修改主题代码。

实现步骤： #

• 注册App Block：在应用配置文件中定义区块类型。
• 开发区块组件：用React或Hydrogen开发展示数据的前端组件，调用应用API获取用户上传的数据。
• 用户添加区块：用户在Shopify后台主题编辑器中，将你的应用区块拖放到目标页面。

注册App Block（shopify.app.toml）：

[extensions]
[[extensions.blocks]]
type = "user_uploads_display"
name = "用户上传数据展示"
description = "展示您在应用中上传的自定义内容"
target = "section"

React区块组件示例：

import { useState, useEffect } from 'react';
import { useAppBridge } from '@shopify/app-bridge-react';
import { authenticatedFetch } from '@shopify/app-bridge/utilities';

export default function UserUploadsBlock() {
  const app = useAppBridge();
  const fetchAuthenticated = authenticatedFetch(app);
  const [uploads, setUploads] = useState([]);

  useEffect(() => {
    async function loadUploads() {
      const response = await fetchAuthenticated('/api/user/uploads');
      const data = await response.json();
      setUploads(data);
    }
    loadUploads();
  }, [fetchAuthenticated]);

  return (
    <div className="user-uploads-block">
      <h3>我的上传内容</h3>
      <div className="uploads-list">
        {uploads.map(item => (
          <div key={item.id} className="upload-item">
            <span>{item.name}</span>
            <p>{item.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

3. 自定义页面模板 + 应用代理（App Proxy） #

如果需要独立页面展示大量数据，可以创建自定义主题模板，通过App Proxy从你的应用拉取数据并渲染。

实现步骤： #

• 配置App Proxy：在应用中设置代理路径，让Shopify可以转发请求到你的应用。
• 创建自定义模板：在主题中添加自定义页面模板，通过JS请求代理接口获取数据。
• 应用路由处理：在Node.js应用中编写接口，返回数据的HTML片段或JSON。

配置App Proxy（shopify.app.toml）：

[app_proxy]
url = "/proxy"
subpath = "user-data"
prefix = "apps"

Node.js代理接口示例（Express）：

app.get('/proxy/user-data', async (req, res) => {
  // 从数据库或存储服务获取用户上传的数据
  const userData = await getUserUploads(req.session.shop, req.session.user.id);
  
  // 返回HTML片段
  res.send(`
    <div class="user-data-page">
      <h1>我的上传数据</h1>
      <ul>
        ${userData.map(item => `<li>${item.title}: ${item.description}</li>`).join('')}
      </ul>
    </div>
  `);
});

主题自定义模板（page.user-data.liquid）：

{% layout 'default' %}

<div id="user-data-container">
  <p>加载中...</p>
</div>

<script>
  // 请求App Proxy接口加载数据
  fetch('/apps/your-app-slug/user-data')
    .then(response => response.text())
    .then(html => {
      document.getElementById('user-data-container').innerHTML = html;
    })
    .catch(err => {
      document.getElementById('user-data-container').innerHTML = '<p>加载失败，请稍后重试</p>';
    });
</script>

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