collection.all_products_count not working

[Alocard]

Hello,

I am trying to make collections in my navigation bar only visible if there are products in the collection.

So i tried following code in my CSS file:

.section-header .navigation .navigation__tier-2 > .navigation__item {
    {% if {{ collection.all_products_count }} == 0 %}
    display: none;
    {% else %}
    display: inline-block;
    {% endif %}
  }

Unfortunally {{ collection.all_products_count }} is not returning any value. I tested this by adding ::after to the code, like this:

.section-header .navigation .navigation__tier-2 > .navigation__item::after {
    content: "bla bla {{ collection.all_products_count }} bla bla";
    {% if {{ collection.all_products_count }} == 0 %}
    display: none;
    {% else %}
    display: inline-block;
    {% endif %}
  }

It looks like this in the front-end:

I don’t really know how to fix it. I would appreciate some help.

Thanks in advance

[iDoThemes]

You don’t need to use the {{ }} brackets inside an if statement.

Try doing something like

and see if it logs anything to the console.

[Alocard]

@iDoThemes

It does the following:

[iDoThemes]

Oh sorry I just realised you are trying this in the CSS file. Asset files like css/js files don’t have access to objects like the collection and product object.

Can you try doing this in theme.liquid instead, or the actual collection template and see what the result is?

[Alocard]

@iDoThemes

I added the code in my theme.liquid and the result is exactly the same:

It does work in the actual collection tho.

[iDoThemes]

I guess you’ll have to do your CSS in the collection template then.

[needleonid1]

Try this

{{ collections.all.all_products_count }}