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文件中，可以输出正确的object。

我做错了什么？

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)
}

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

Shopify Liquid: output variable to a .js file

javascript

liquid

shopify