在 Javascript 中访问 Shopify Liquid 变量

Question

我的问题是，是否可以使用 Javascript 访问 Shopify Liquid 中的变量？

{% assign my_array= "apples, oranges, peaches, tomatoes" | split: ", " %}


function my_function(number){
    return "{{my_array[number]}}";
  }

  $('#click_me').click(function(){
    alert(my_function(0));
  });

我知道 AJAX 和 PHP 可以做到这一点，但是有没有类似的方法可以单独使用 Shopify Liquid 和 JQuery 来实现？

Answer 1

Liquid 是一种后端诱人语言，这意味着它在 Javascript 之前呈现。这意味着一旦液体渲染完成，您将无法访问液体逻辑，并且由于 JS 是在液体渲染之后呈现的，这意味着您根本无法访问它。

所以不能实时给liquid传递JS变量

但是你可以用液体创建一个JS对象：

{% assign my_array= "apples, oranges, peaches, tomatoes" | split: ", " %}

var my_array = {{ my_array | json }};
function my_function(number){
  return "my_array[number]";
}

$('#click_me').click(function(){
  alert(my_function(0));
});

您可以使用 AJAX 获取特定页面，但从您的示例来看，这对您没有好处，因为您正试图在 Javascript 事件上访问液体变量，而这不是可能。

Answer 2

您可以设置备用布局，例如 product.json.liquid，然后您可以通过 AJAX 请求访问它，例如：

var request = jQuery.get("/products/" + productHandle + "?view=json", function(res) {
   productJSON = JSON.parse(res)
}

您的 product.json.liquid 文件可能看起来像这样（注意布局 none 标签 - 接收未更改的 json 很重要）：

{% layout none %}

{
  "productTitle": "{{ product.title}}",
  "customField": "{{ product.metafields.global.customField }}"
}

在此处查看更多信息：https://www.shopify.com/partners/blog/84342470-the-power-of-alternate-layout-files-in-shopify-theme-development

在 Javascript 中访问 Shopify Liquid 变量

Accessing Shopify Liquid variables in Javascript

javascript

jquery

shopify