Shopify Question posted in
The Shopify help center can be found here.

Shopify – using if statements within js.liquid and scss.liquid files

I am trying to merge JS files together in 1 file, however I need to set conditions using the if statements within the js file.

I have created file.js.liquid but it does not seem to working; I added a test for example:

{% if template contains 'index' %}
  console.log('homepage loaded');
{% endif %}

Example of what i am trying to do, of course have plenty i need to do.

{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %}
  // video popup
  $(".video-popup").videoPopup();
{% endif %}

The conditional statements are also not working within scss.liquid files either:

{% if template contains 'index' or template contains 'collection' or template contains 'product' %}
  @import url("{{ 'owl.carousel.scss' | asset_url }}");
{% endif %}

Any ideas why if would not be working or if its even possible? I assume it is being a liquid file.

Tags:

2

Answers


  1. 0

    The Liquid extension on such files like CSS or JS allows use of Liquid variables but not statements.

    So {{ write_my_liquid_var_here }} will work. {% if liquid_statement %}do something{% endif %} won’t.

    Login or Signup to reply.
  2. 0

    Regarding Shopify and SASS

    The following won’t work as you can’t use @import in Shopify’s SASS files.

    @import url("{{ 'owl.carousel.scss' | asset_url }}"); //This will not work

    Regarding using conditional liquid statements in .js.liquid files

    I don’t know everything about this subject, but I do know the following two things.

    1) Check out this thread and you’ll see that this type of statement won’t work because js files are parsed independent of normal liquid templates, so it would have no idea which template you’re viewing.

    {% if template contains 'index' %} //This will not work

    A better place to put the above logic would be at the bottom of your theme.liquid file above the </body> tag. However this won’t help you with what seems to be your goal of reducing HTTP requests by using one JavaScript fie.

    2) However, you can access values in your settings_data.json file 

    {% if settings.the_simpsons_enabled and settings.simpsons_video_enable %} //This will work

    I hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search