Conditional classname for a section

Figumari
Tourist
3 0 0

Hello everybody!

 

Is it possible to set a conditional classname for a section? As far as I figured out, it is not possible to use variables inside the schema tag. Something like the following does not work:

 

{% if section.settings.aside == blank %}
    {% assign classname = "banner" %}
{% else %}
    {% assign classname = "banner banner--with-aside" %}
{% endif %}

{% schema %}
    {
    "name": "Banner",
    "class": "{{ classname }}",
    "tag": "section"
    }
{% endschema %}

Thanks for your help.

0 Likes
Yurіі
Shopify Partner
63 13 18

You're right schema cannot contain any liquid code. You can directly provide classname withing schema:

 

{% schema %}
  ...
  "class": "banner--with-aside",
 ...

 

or you can add some "inner" wrapper:

{% if section.settings.aside == blank %}
  {% assign wrapperClassName = "banner" %}
{% else %}
  {% assign wrapperClassName = "banner banner--with-aside" %}
{% endif %}

<div class={{wrapperClassName }}>
  {% comment %}sectioncontent{% endcomment %}
</div>

  

Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
Figumari
Tourist
3 0 0

Hey Yurii

 

Thanks for your help.

Your second advice does not work for me. I wanted to have the margin on the sections itself (not on a wrapper), because they have to combine (margin collapsing) with the upper or lower sections.

 

And your first advice is not really conditional?

0 Likes
Yurіі
Shopify Partner
63 13 18

And your first advice is not really conditional?

Yes, It's not conditional, but i'd say it shouldn't changed often and you're good to provide it within schema.

 

I wanted to have the margin on the sections itself (not on a wrapper), because they have to combine (margin collapsing) with the upper or lower sections.

Looks like you can achieve conditional class names for sections only through js. Just add required class from settings or so.

Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
thekwoka
New Member
4 0 0

The best way to do this would be to use the schema to add a static class, and then use some logic in the section itself to define the meaning of that class. You mention margins so I'll use that example.

 

The schema, would naturally have

 

"class": "section-margin-custom",

or whatever.

 

Then in the section you can do

 

{% stylesheet %}

.section-margin-custom {
{% if section.settings.aside == blank %}
margin: 0rem;
{% else %}
margin: 0rem 1rem
{% endif %}

{% endstylesheet %}
0 Likes