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>
1 Like
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.