shopify中的.js和.js.liquid有啥区别？

Posted 2023-02-15

【中文标题】shopify中的.js和.js.liquid有啥区别？

【英文标题】：what's the difference between .js and .js.liquid in shopify?shopify中的.js和.js.liquid有什么区别？

【发布时间】：2014-11-16 23:25:50

【问题描述】：

在资产部分，有.js 和.js.liquid 名称的文件。

这2个有什么区别，如果我想在主题中包含一个js文件我应该使用哪一个？

它现在位于 .js.liquid 文件中。我想构造一个由液体变量组成的字符串。当我将此字符串附加到 DOM 元素中时，它似乎没有出现。

var someString = '';
  %for line in order.line_items%
  someString += 'q='+line.quantity+'&p='+line.product.id+'&pp='+line.price+'&w='+line.grams+'&i='+line.product.featured_image|product_img_url|url_param_escape+'&n='+line.product.title|url_param_escape+'&';
  %endfor%

$('body').append(someString);

【参考方案1】：

您可以在 .js.liquid 文件中使用液体，但 .js 文件仅是 javascript。

如果您包含常规 js 文件，请使用 .js 扩展名。如果文件中也有液体，则需要使用.js.liquid。

编辑：

我认为order 不能在.js.liquid 文件中访问。 See here:

可以在订单电子邮件模板、结账的感谢页面以及订单打印机等应用程序中访问订单对象。

另见this discussion on the Shopify forums:

您只能在流动资产中使用 Liquid 过滤器和全局设置对象。

它的工作原理如下：每当您编辑 .js.liquid 文件的 .css.liquid 或编辑主题设置时，都会创建一个新的 .css 或 .js 文件，然后将其存储在我们的资产服务器上。以任何其他方式更新您的商店都不会更新这些文件...

鉴于上述情况，Shopify 无法在这些文件中公开商店信息（可能会更改）。

【讨论】：

谢谢。我在.js.liquid 中使用了液体变量，如上所示，但我没有正确读取liquid 变量。 liquid 对象根本没有出现。

我很确定，当您使用| asset_url 调用文件时，您不应该将.liquid 添加到扩展名中。它甚至可能导致 404 错误。 Steph 是对的，它会让你在 JS 中使用液体，只要确保在没有 .liquid 的情况下调用实际文件。

好点@graygilmore。你会打电话给file.js.liquid 和 "file.js" | asset_url | script_tag 。

@guest 请参阅我上面关于液体变量未显示的编辑。

简而言之：.js.liquid 和 .css.liquid 文件是静态的，而不是动态的。从 .js.liquid 和 .css.liquid 文件创建的编译后的 js 和 css 资产仅在 shop settings.json 更改时才会更改，因此无法访问任何动态的商店、客户或会话信息。动态 javascript 必须存在于 sn-p 或主题文件中的脚本标记中。