Используйте переменную js с жидким тэгом Shopify

Question

В настоящее время в Shopify мы можем создать файл .js.liquid, который предоставляет доступ к жидким функциям.

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

Как я могу использовать переменную в месте размещения product.image? Например:

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

В настоящее время это не работает для меня, путь, который он выводит, - это myVar как строка, а не как переменная. Я также попытался конкатенации, и он также читает имя переменной в виде строки. Есть идеи?

Answer 1

Вы должны помнить, что жидкость выполняется перед DOM. Это относится и к файлам Javascript.

Код жидкости выполняется до обработки файла JS, поэтому при создании переменной JS и попытке передать ее в жидкость невозможно, поскольку жидкость завершила свое выполнение задолго до того, как начал выполняться Javascript.

Таким образом, чтобы подвести итог, вы не можете ничего передать из Javascript от Liquid, но возможен другой путь.

---

Итак, вернемся к вашему вопросу.

Это должновыглядеть так:

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