Using Conditional Visible on text for filtering

Attributes
1

Hi, I am struggling with Attributes and filtering.

I am using radio buttons to filter.

I have access hire equipment that can be either on Rough Ground, Flat Ground or both.

I created 2 switches in the CMS Rough Ground and Flat Ground.

I have then added 2 text boxes called the same with condition viability if they are TRUE.

Now I thought that if they are not visible then the filter will not read them.

I have done a loom to explain.

Thanks for any help.

https://preview.webflow.com/preview/atp-hire?utm_medium=preview_link&utm_source=design[…]963903d31f&pageId=63aec8a9d94154e433935629&workflow=preview

2

Hey, @craigthomasonline!

You can achieve this by doing these changes:

  1. Add an embed to your item and this embed should have the field of your switches, one embed per switch. Add the attributes fs-cmsfilter-field = rough-ground and fs-cmsfilter-field = falt-ground to these embeds

    Screen Shot 2023-05-11 at 15.45.28
    Screen Shot 2023-05-11 at 15.45.282878Ă—1596 376 KB

    Screen Shot 2023-05-11 at 15.45.53
    Screen Shot 2023-05-11 at 15.45.532880Ă—1592 369 KB

  2. These embeds will now show true or false on your cards, you can hide these fields and leave the text you were using before. Remove the attributes from the text you were using if you wish to keep it.

    Screen Shot 2023-05-11 at 15.27.35
    Screen Shot 2023-05-11 at 15.27.351512Ă—1070 56 KB

  3. Replace the radio buttons with checkboxes and move the fs-cmsfilter-field = rough-ground and fs-cmsfilter-field = falt-ground attributes from the label to your checkbox input

    Screen Shot 2023-05-11 at 15.27.47
    Screen Shot 2023-05-11 at 15.27.472878Ă—1592 438 KB

3

Thank you very much for that it works perfectly.

4

You are welcome! :muscle:

5

i have one question: how to achieve Rough Ground or Flat Ground conditions with cmsfilter, using the checkbox

6

Hey @rahul.mstest! Toggles are just stylish checkboxes, you’ll just need to change the attribute from the input to the label and instead of using the embed that show “true” or “false” you’ll just have to add a text element with the same identifier as your checkboxes

So, for example, the checkbox labels should both have fs-cmsfilter-field = ground-type and your text element on your CMS item should also have fs-cmsfilter-field = ground-type.

Let me know if you have any issues!

1 Like