按 SKU 获取产品变体适用于店面，但不适用于独立的 JavaScript 程序

Question

如果我在 theme.liquid（Shopify 店面）中放入以下脚本，我会得到预期的结果：

<script>
    const GRAPHQL_URL = 'https://<my-store>/admin/variants/search.json?query=sku:big-mug-black';
    
    const GRAPHQL_BODY = {
        'method': 'GET',
        'headers': {
            'Content-Type': 'application/json',
        },
    };
    
    fetch(GRAPHQL_URL, GRAPHQL_BODY)
        .then(res => res.json())
        .then(console.log)
        .catch(console.error);
    
  </script>

但是如果我尝试从 JavaScript 程序执行同一段代码，我会得到 404({errors: "Not Found"})

const GRAPHQL_URL = `https://<my-proxy>.herokuapp.com/https://<my-store>/admin/variants/search.json?query=sku:big-mug-black`;
            const STOREFRONT_ACCESS_TOKEN = '<my-token>';
            const GRAPHQL_BODY = {
                'method': 'GET',
                'headers': {
                    'Authorization': `Basic ${btoa('<my-api-key>' + ':' + '<my-password>')}`,
                    'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
                    'Content-Type': 'application/json',
                },
            };

            fetch(GRAPHQL_URL, GRAPHQL_BODY)
                .then(res => res.json())
                .then(console.log)
                .catch(console.error);

注意：我可以使用同一个程序获取所有产品，所以这不是权限问题。我是否需要 add/remove 才能在本地 JavaScript 程序中获得相同的结果？谢谢。

Answer 1

我可能有适合您需要的解决方案。您将需要以下访问权限：

read_products - for finding product
read_script_tags - for read existing script tags
write_script_tags - for writing new script tag

首先在您的应用程序上创建将每隔 X 小时自动运行的控制台操作。该操作应下载所有现有产品。您需要将它们保存到本地数据库。

下载所有产品时的注意事项。

Api 限制在 headers (X_SHOPIFY_SHOP_API_CALL_LIMIT)
分页，headers中有变量link(Api pagination)

当您将所有产品存储在本地后，您可以使用 SKU 为其创建搜索方法。

当你有工作方法时，你可以在你的控制器中创建查找方法。您将使用此方法创建从 shopify 页面到您的服务器的请求。

创建后，您可以自己添加 JS，或者更好地使用脚本标签将其自动化。 ScriptTag on Shopify 基本上是 javascript 您托管的代码，它们会自动加载到 shopify 中的每个页面（购物篮除外）。

POST /admin/api/2021-01/script_tags.json
{
  "script_tag": {
    "event": "onload",
    "src": "https://djavaskripped.org/fancy.js"
  }
}

有了它，您可以添加 javascript，可用于在您的网站上创建查找请求。你可以 return 结果返回。

我为此创建了简化图。 .

按 SKU 获取产品变体适用于店面，但不适用于独立的 JavaScript 程序

Fetch Product variant by SKU works in storefront but not in independent JavaScript program

shopify

shopify-api

shopify-api-node