Displaying filter terms when using a horizontal Filter Bar

[globemedia]

I would like to show visitors which filters are currently in effect when they’re using the filter bar in the horizontal layout. While filtering multiple criteria, the select boxes retract, and it becomes difficult for people to keep track of what they’re looking at. Is there any documentation that would be helpful and/or can you please point me in the right direction or post some sample code?

[Brook]

Howdy globemedia,

I would be glad to help. Our Filterbar documentation is not quite ready yet, however basically all of the functionality you want to modify is contained within filter-scripts.js and filter-view.css inside of the resources folder. It should be fairly easy to understand if you are familiar with JS and CSS.

I can think of two ways to do what you want:

1) Using CSS, modify the vertical layout to be full width, and using either floats or a display type other than block arrange the filter box horizontally. The would keep the open boxes expanded just like in the vertical layout, but the filter bar would take up more room.

2) Using JS add a listener to determine if one of the children of div.tribe_events_filter_item is modified from the default. If it is add a CSS class like “filter_in_use” to the div. Now that you have a custom CSS class you could change the color of that item, or otherwise highlightfor the user when that this filter is in use.

Does that make sense? Does it fully answer your questions? If you have any suggestions on how we can make this sort of modificaiton easier in future versions please let me know. We are keen on feedback for new products. Cheers!

– Brook

[globemedia]

Hi Brook,
Thanks for your reply. Those approaches do make sense, but are not really what I was hoping for. I’m using filters for Event Category, Organizer, Tags and Venues (some with over 20 choices). To have them all visible on screen, especially for mobile and tablet users is not ideal. I was hoping that I would be able to keep the existing layout with the retracting dropdowns, but have access to the “term names” that are in effect for each filterable taxonomy. They would update after each selection or deselection. Thanks.

[Brook]

Howdy globemedia,

You could do that by following option #2. It will be a bit tricky, but you simply figure out which element is selected with JS, then get the text value of it and display that somewhere that is always visible to the user, maybe right next to the drop down selector. If you need to add a field or some HTML that you can then popular with JS, you can do that using theme overrides.

Unfortunately that might sound like Greek. If it does, it is possible that you will need to hire someone. If you do not know someone who you can hire, have no fear. We actually keep a list of freelancers who are quite capable of making changes on your behalf. You can obtain this list by emailing [email protected] and requesting it.

Please let me know if that fully answers your questions, or if there is anything I can clarify. Thanks!

– Brook

[globemedia]

Thanks Brook, I will attempt the approach you suggested when I get some time. Please consider implementing this feature in a future version of Filter Bar as I can imagine it being useful for many people.

[Brook]

Globemedia, I 100% agree. We actually just talked about this yesterday as a team, and it is definitely something we would like to approve. The horizontal feature was added a bit late in the Filterbar development, and thus not thought through as much. But, even we would like to see it improved in a fashion similar to what you are looking for.

I am not sure when that will happen as the next release is likely to be mostly bug fixes and not feature improvements. But, I would like to see it as soon as possible.

– Brook

[Author]

Posts