主题应用扩展 Liquid 上的元字段更新数据无需刷新页面

Question

是否可以在不刷新数据的情况下获取更新的元字段数据？假设我有一个最初为 null 的元字段（window.config.mycustomdata = {{metafields}} 。我实现了一个 websocket。如果 websocket 返回“Page_Refresh”，我想获取该特定元字段更新数据而无需重新加载页面，并且设置为mycustomdata可以吗？有api吗？

有任何 fetch api 方法或店面 api 吗？

Answer 1

是的，Shopify Storefront API 允许您检索更新的元字段数据，而无需刷新整个页面。您可以使用提取请求来检索特定元字段，并根据 websocket 通知在页面上动态更新它。这是实现它的一种技术。

步骤：Storefront API 令牌：首先，确保您有权访问 Shopify Storefront API 和 Storefront 访问令牌。

GraphQL 查询：使用 Storefront API 查询指定的元字段。当您的 websocket 向您发送 Page_Refresh 信号时，您将使用 fetch API 发送 GraphQL 查询。 更新 JavaScript 对象：检索更新的元字段数据后，您只需使用新的元字段值更改 window.config.mycustomdata 即可。

//graphql

{
  product(id: "PRODUCT_ID") {
    metafield(namespace: "custom", key: "my_custom_field") {
      value
    }
  }
}


//Fetch API Approach

async function fetchMetafieldData() {
    const storefrontToken = 'your_storefront_access_token'; // Replace with your Storefront Access Token
    const productId = 'gid://shopify/Product/123456789'; // Replace with your product ID

    const query = `
        {
            product(id: "${productId}") {
                metafield(namespace: "custom", key: "my_custom_field") {
                    value
                }
            }
        }
    `;

    const response = await fetch('https://your-store.myshopify.com/api/2023-01/graphql.json', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Shopify-Storefront-Access-Token': storefrontToken,
        },
        body: JSON.stringify({ query }),
    });

    const responseData = await response.json();
    const metafieldValue = responseData.data.product.metafield?.value;

    // Update the window.config.mycustomdata dynamically
    if (metafieldValue !== undefined) {
        window.config.mycustomdata = metafieldValue;
        console.log('Updated metafield:', window.config.mycustomdata);
    } else {
        console.log('Metafield not found or still null.');
    }
}

//WebSocket Trigger
//If your websocket returns 'Page_Refresh', you can call the fetchMetafieldData function without reloading the page:

const websocket = new WebSocket('ws://your-websocket-url');

websocket.onmessage = function (event) {
    const data = JSON.parse(event.data);

    if (data.message === 'Page_Refresh') {
        fetchMetafieldData();
    }
};

您可以根据资源类型（产品、集合、订单等）和要修改的元字段来更改 API 端点和查询。 如果您使用多个命名空间或键，请务必更改 GraphQL 查询中的命名空间和键。