My question is, is it possible to do access the variables in Shopify Liquid using Javascript?

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


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

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

I know this is possible with AJAX and PHP, but is there a similar way I can implement using Shopify Liquid and JQuery alone?

My question is, is it possible to do access the variables in Shopify Liquid using Javascript?

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


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

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

I know this is possible with AJAX and PHP, but is there a similar way I can implement using Shopify Liquid and JQuery alone?

• javascript
• jquery
• shopify

Share Improve this question Follow asked May 4, 2020 at 7:29 Phil GreenePhil Greene 30633 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Liquid is a back-end tempalting language, this means that it's rendered before the Javascript. It means that once the liquid rendering is done you won't have access to the liquid logic and since the JS is rendered AFTER the liquid it means that you can't access it at all.

So you can't pass JS variables to liquid in real time.

But you can create a JS object with liquid:

{% 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));
});

You can use AJAX to get specific page, but from your example this will do you no good, since you are trying to access a liquid variable on a Javascript event, which is not possible.

You can set up an alternate layout, such as product.json.liquid which you can then access via an AJAX request, something like:

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

Your product.json.liquid file might look something like this (note the layout none tag - important to receive unaltered json):

{% layout none %}

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

See more info here: https://www.shopify./partners/blog/84342470-the-power-of-alternate-layout-files-in-shopify-theme-development