Styling tag selector

LiveWhale
1

We want to add tag selectors to some widgets in our more complicated groups – like this example in our grad continuing ed https://graduate.lclark.edu/programs/continuing_education/all/tester/

However we would like the tag selector to display between the widget header (in this example “Events”) and the widget results. Currently it is displaying above the header.

(The default tag selector floats on the right of the initial widget results, and we have so far styled it to be horizontal across the top.)

2

I think the easiest way to do this would be to not include the h3 in the widget. Just add it on the page.

<h3>Events</h3>
<widget id="1234_widget_with_tag_selector"></widget>

If you are using a saved widget with the header included already, use an empty arg to clear it.

<h3>Events</h3>
<widget id="1234_widget_with_tag_selector">
    <arg id="header"></arg>
</widget>

Or if you can’t change the page markup, you could use JS to move the tag selector where you want it.

$('.lw_widget_tag_selector.parent_widget_9904').insertAfter('.lw_widget_id_9904 h3')
2 Likes
3

Thanks. I didn’t include in the original post to keep things succinct… but the reasoning for trying to find a solution beyond, say, your first suggestion (aka, don’t include the header in the widget) was for the cases where someone has a widget with no results; so there’d be a sad header with nothing under it. Still I appreciate and will try your solutions.

4

That makes sense. I was assuming this was a one-off widget that could reasonably be expected to have content in it. The JS solution should still work. Just throw that script in your global theme JS.

5

Thanks Jon – I’ll raise here since it’s related, we’ve recently retired the widget “slideshow” JS behavior in LW3 given that most site builds are using some sort of existing slideshow plugin rather than needing out-of-the-box handling of this.

Similarly, we’ve seen folks using existing JS libraries like isotope for this kind of click-to-filter behavior, too, so I wouldn’t be surprised to see the tag selector widget option being retired in LW3 as well—if that’s the case, it’ll be spelled out clearly in the upgrade guide and we’re happy to help point towards other ways of handling (which would then be a bit more flexible than the single on/off switch the core version has supplied).

1 Like
6

I don’t quite follow how a JS tool like isotope can recognize the various individual tags on a story/event/etc. in order to run the sorting.

7

Sure, here’s an example from Purchase College.

In that filterable widget, the individual programs are tagged with data- attributes for each selector, e.g. <a class="program-card" data-select-level="Major" data-select-subjectarea="Performance and Theatre Arts" data-select-degree="BFA" data-select-tags=""> and then there’s JS that gathers up all the possible data- values on page load and creates the dropdowns. (Wouldn’t have to be done with dropdowns, of course, that’s just a design choice. Could be buttons or toggles or whatnot).

8

We have a similar tool in a few places, like this example https://college.lclark.edu/offices/admissions/community-profiles/ – but it has to have checkbox fields rather than tags. How can tags get data- attributes assigned to them?

9

To clarify: the beauty of the Tag Selector tool is it can be added to nearly any widget and automatically work; whereas, the sorting tool we have on places like the Community Profiles link mentioned previously is manually built (with hard-coded “data-select-” for each field) each time we need it.

Example:
data-select-majors="{profiles_682_separated}" data-select-minors="{profiles_685_separated}" data-select-extracurriculars="{profiles_684_separated}" data-select-athletics="{profiles_683_separated}" data-select-overseas="{profiles_681_separated}" data-select-year="{profiles_686_separated}"