Conditional Visibility for elements inside Components

Design help General
1

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)

2

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>
2 Likes
3

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

4

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-

5

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.

6

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.

7

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.

9

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.

10

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.
11

How’s a video?

12

Silly me! Thanks for pointing that out!

13

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.

14

This one is painful. I REALLY hope they open up all the collection fields for us to be able to set conditional visibility SOON!

2 Likes