How to work with Liquid variables in Java file

[Cilian]

I need the value of the liquid variable {{ section.settings.product_count }} in my theme.js.liquid file.

Iam new to liquid so I tried many things I saw online. None of them worked.

Things I tried that didn’t work:

{%- assign limit = section.settings.product_count -%}
console.log({{ limit }});

var limit = "{{section.settings.product_count}}"
console.log(limit);

[Michal17]

Those global variables are not available in .js.liquid files. You can only use Liquid filters and the global settings object in liquid assets.

[Michal17]

Suggestion :

{%- assign limit = section.settings.product_count -%}

var my_limit = {{ limit | json }};
function get_my_limit(){
  return "my_limit[0]";
}

var real_limit = get_my_limit();

[Cilian]

Unfortunately this does not work. If I print the value of real_limit I get "my_limit[0]" instead of "4".

{%- assign limit = section.settings.product_count -%}

var my_limit = {{ limit | json }};
function get_my_limit(){      
    return "my_limit[0]";  
}

 var real_limit = get_my_limit();

console.log(real_limit)

[Michal17]

Hello @Cilian

{%- assign limit = section.settings.product_count -%}

var my_limit = {{ limit | json }};
function get_my_limit(my_limit){
  return my_limit[0];
}

var real_limit = get_my_limit(my_limit);

Please let me know if you have any further questions. 

[diego_ezfy · Accepted solution]

@Cilian 

I have been through a similar issue before.

If you're trying to access the value of {{ section.settings.product_count }} it means that this variable is not within theme.js.liquid, and yes within a section. (Unless you have declared it under settings_schema.json, then you should access it as settings.product_count directly from theme.js.liquid).

Supposing it's within a section, I'd suggest to add it to a data attribute.

So, in your case, it would look like this:

<div id="customAttributes" data-product-count="{{ section.settings.product_count }}" style="height:0;width:0;display:none;"></div>

Then, within theme.js.liquid:

function getAttributes(){
const $attribute = document.getElementById(`customAttributes`);

if (!$attribute){
return null;
}

const count = $attribute.getAttribute(`data-product-count`);
return count;

}

There may be a typo in the code since I'm on my phone, but hopefully you get the idea of how it should be achieved. You can return an object with all the data attributes if you prefer it that way, whatever makes your life easier, really.

This is what I usually do for production, I never had any issues with it. Just make sure you use try/catch to properly handle any errors.

Kind regards,
Diego

[Cilian]

Not all heroes wear capes! Thank you very much! Your suggested solution works perfectly. I just had to change the ` to ".

This is the working function for anyone who has the same problem.

function getAttributes() {
      const $attribute = document.getElementById("customAttributes");
      
if (!$attribute) {
      return null;
}
      
const count = $attribute.getAttribute("data-product-count");
      return count;
}

The only thing that only kind of works is the method with settings_schema.json. 

This prints the name of the product, but as soon as I try to get some data about the product like in the 2nd example, it stops working.

var test = "{{ settings.testproduct }}"
console.log(test)  //prints test-product

var test = "{{ settings.testproduct.variants.first.id }}"
console.log(test)  //prints nothing at all