Conditional Visibility for elements inside Components

Is there a way to set conditional visibility for elements inside a component witch is linked in a Collection List?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Indirectly, sort of.

If your condition is simple like “if the CMS item text field X has a value, display the element”, then you can;

  • wrap your conditional content in a DIV
  • assign a custom attribute like visible
  • bind that attribute to a component property
  • bind that component property to your CMS text field.

Then, drop an HTML Embed on the page with a small piece of custom CSS, which conditionally displays those elements based on the presence/absence of the CMS item’s field value.

<style>
[visible=""] {
  display: none;
}
</style>
1 Like

Thanks for the reply. I’ll use this workaround with a toggle switch.

The toggle switch can’t be bound to a custom attribute unfortunately, however it turns out that components now have the ability to bind element conditional visibility to a property- and that property can be bound to a switch field in the component’s containing CMS context.

Scroll down to the video here if you want to see the details-

Is there any workaround if I don’t want to create extra switch fields? In my case, I have an compare-at price and only want to show a element inside my component if that field is filled.

For now I haven’t found a solution, and adding and activating a switch for every product with a compare at price seems a bit unnecessary.

Hi Cristian if you look at my answer above that is marked as the solution, it does exactly what you’re describing.

It is not based on a switch, it’s actually based on a CMS text field. The text field is bound to an attribute, and the CSS selects those elements where that attribute is blank ("") and hides them.

Just reviewed your video. In that video, you are still binding the visibility to a switch. I think UltraOrange was trying to bind based on the value of a text field which still is not present. I think that is main feature that is missing as of now.

Hi Dakotah, missed your question. Look at my response marked as the solution, not the one with the video. They are solving slightly different problems. The solution one shows a CSS snippet to handle the visibility state, with no switch.

This is awesome – thanks Michael! Would you be able to explain the below steps in a little bit more detail, maybe even with an example/screenshot?

  • bind that attribute to a component property
  • bind that component property to your CMS text field.

How’s a video?

Silly me! Thanks for pointing that out!

It was high time to record a video on this, it’s a technique I use often, and seems to have a lot of use cases. Thanks for the nudge.