访问 Javascript 中的 Shopify 液体变量

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 和 Z6A2BZFB998530DACB77 单独实现类似的方法吗？

Answer 1

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

所以你不能将 JS 变量实时传递给 Liquid。

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

{% 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文件可能看起来像这样（注意布局无标签 - 接收未更改的 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