improve filter functionality on multi-select gallery

[amzoss]

It's just not quite right yet. Would be better to distinguish between checkboxes actively selected and options that are still present in the filtered items.

Original single-facet filter buttons work kind of like the Isotope library, so that might be a model to look into. The normal Isotope model filters on one field and selects one object at a time. Can filter on multiple fields using combination filter, but still only one option in each field.

Some questions about this that may have solutions:

• Suggestion: use a filter function
• Stack Overflow question on similar topic
• Follow up on previous example, might also be helpful if go for breadcrumbs

Ideally keep an eye out for solutions that help by tracking numbers of items in each category. Not sure if I really want to add Isotope or just use the JQuery code. Possibly also look into group_by filter in Liquid?

[amzoss]

Maybe this? https://community.shopify.com/c/Shopify-Design/Multi-tags-filter-All-products/td-p/647349

[amzoss]

More on Isotope with Jekyll: https://github.com/cagrimmett/jekyll-tools#filtering-categories-with-isotope

[amzoss]

Thought: use breadcrumbs as way of distinguishing between active selections and passively allowed categories. Maybe something like this:

• Go back to style where each facet group has "Any" or "All" option
• Create row at top of page to collect filter selections
• Figure out style for filter selections - should be like a button but with an "X"? Maybe use Bootstrap close icon inside a general button?
• clicking an inactive checkbox other than "any" should add a selection to the filter selections div
• for items in the filter selections div, anything in the same group should use an OR logic, and then there should be AND logic between groups
• clicking X on a filter selection removes the box from the filter selections panel and updates items based on panel
• clicking "any" in a group removes all filter selections from that group
• clicking a selected checkbox other than "any" should remove that filter selection from the panel
• clicking the any checkbox when it is already selected does nothing? turns off any but adds checks to all of the items in that group? (works like a check all?)

Unrelated note: just realized that using class btn-group creates buttons with no space between, so generally don't want to do that.

[amzoss]

Hmm, I wonder if the group_by functionality could be repurposed. Maybe each checkbox could be created by group_by to actually contain an array of items that have that option. within the same group, those arrays could be concatenated to simulated the "OR" functionality. between groups, you'd have to find the intersect, and I don't think there is an intersect filter for arrays, but maybe could create a for loop or some other way of figuring out if an item is in each facet group that has a selection. If that could be figured out, though, then maybe the set of items that meets the checkbox logic could be passed to the gallery display. We really need that collection to get passed even to the individual items displayed in the gallery for downstream navigation, so that's another problem we're trying to solve that might require an array of the actual items.

[amzoss]

more examples to try:

• https://codepen.io/piotrek/pen/mXpRmQ
• https://stackoverflow.com/questions/48315428/how-to-make-a-filter-in-javascript-which-filters-div-by-checkboxes