访问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是在液体之后渲染的，这意味着您根本无法访问它。

因此，您无法将JS变量实时传递给liquid。

但是你可以用液体创建一个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