Facet mobile solution

[shaneonabike]

First thanks for the awesome plugin it's really great!

Is your enhancement related to a problem? Please describe. Basically, for Facets to be more mobile friendly checkboxes normally digress into dropdowns to take up less room. In my case, I probably need a dropdown all the time because we have a tonne of terms.

Describe the solution you'd like Basically, in the widget it would be really cool to add the option to either generate a dropdown or alternatively generate a checkbox solution. As mentioned, this would also put the plugin into providing a solution for mobile themes.

[shaneonabike]

Looks like we just need to add a small switch to the code here that checks the appropriate switch https://github.com/10up/ElasticPress/blob/d19fc41496b793a1224be73f26de9eeeb3823757/includes/classes/Feature/Facets/Widget.php#L173 (and beyond)

[shaneonabike]

Oh and probably we need to also modify the JS code to detect the selection although you can easily inline that like a jump menu.

[brandwaffle]

@amesplant can you take a look at this and share the effort to add this feature in our next weekly EP meeting?

[amesplant]

I have started working on this feature, and here is my plan. Instead of doing a 'dropdown', it may be more feasible to make it an 'accordion'

Plugin Admin Panel

• [ ] Add toggle to display / not display the facets as a dropdown in the Facets settings

Page Display

• [ ] Add test to see if the toggle has been checked
• [ ] Update the CSS/JS to display the list as a dropdown/accordion
  • [ ] First level terms would initially be the only terms do be displayed
  • [ ] When any 'level' is selected, the sub-level terms would then be displayed

[shaneonabike]

It's super cool that you folks are going to build a solution for mobile this is going to make this module even more responsive which is great!

At first I was thinking dropdowns were a good choice, but in further research I see that they aren't good with more than 5 items (which could be the case), and generally not a great idea (ref:https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design/)

I wonder in addition to creating an accordion we could change the theming to be like buttons as indicated above. I think that this might be more apparent to users and easier to click??

[shaneonabike]

I wanted to checkin to see how your progress is going. I would love to test this out for you?