How to work with Liquid variables in Java file

Solved
Cilian
New Member
4 0 0

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);

 

0 Likes
Michal_Morek
Shopify Partner
427 33 67

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

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
Michal_Morek
Shopify Partner
427 33 67

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();

  

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
Cilian
New Member
4 0 0

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)

 

0 Likes
Michal_Morek
Shopify Partner
427 33 67

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. 

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes

This is an 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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
Cilian
New Member
4 0 0

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

 

0 Likes