将 js 变量与 Shopify 液体标签一起使用

Question

目前在 Shopify 中，我们可以创建一个 file.js.liquid 来授予对液体功能的访问权限。

<script>
var liquidData = {
  myValue: {{ product.image | asset_url }}
}
</script>

如何在 product.image 的 placeme 中使用变量？ 例如：

var myVar = 'something.jpg'
    var liquidData = {
      myValue: {{ myVar | asset_url }}
    }

目前这对我不起作用，它输出的路径是 myVar 作为字符串而不是变量。我还尝试了连接，它还将变量名读取为字符串。有什么想法吗？

Answer 1

您必须记住，liquid 是在 DOM 之前执行的。这也适用于 Javascript 文件。

liquid 代码在处理 JS 文件之前执行，因此当您创建 JS 变量并尝试将其传递给 Liquid 时是不可能的，因为 Liquid 在 Javascript 开始执行之前很久就完成了它的执行。

所以总结一下，你不能从 Javascript ot Liquid 传递任何东西，但另一种方式是可能的。

---

回到你的问题。

应该是这样的：

{% assign myVar = 'something.jpg' %}
var liquidData = {
  myValue: "{{ myVar | asset_url }}"
}