Shopify Liquid：将变量输出到 .js 文件

Question

我的资产文件夹下有一个custom.js.liquid 文件，我已将此行添加到theme.liquid。

<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

我正在尝试将产品的标题输出到 javascript，在 custom.js.liquid，我放了

console.log({{ all_products['absolut-vodka'] | json }});

.js.liquid 文件无法识别此行。在前端，在custom.js 文件中它变成了

console.log(null);

另一方面，如果我把

<script>console.log({{ all_products['absolut-vodka'] | json}});</script>

在theme.liquid文件中，可以输出正确的对象。

我做错了什么？

Answer 1

资产文件是 Shopify 强烈缓存的资源。这意味着您无法访问任何可能在页面之间、客户之间更改等的 Liquid 变量。产品详细信息可以在任何时间由您自己或应用程序更新，因此这也属于在您的资产文件中不可用。

在您的.js.liquid 文件中，您可以访问的主要内容是：

• 翻译设置
• 主题设置

... 仅此而已。值得注意的是，主题和语言设置都位于您的主题文件中，这可能与 Shopify 围绕这些 Liquid 限制的决定有关

如果您想获取您的absolut-vodka 产品的产品详细信息，您可以使用 Shopify 的店面 API 来获取您需要的详细信息。 （例如：通过获取/products/some-product-handle.js）。例如：

function getProductThenDoStuff(productHandle, callbackFunction){
  fetch('/products/' + productHandle + '.js')
    .then(function(response){ return response.json() })
    .then(callbackFunction)
}