Facet mobile solution - Githubissues

10up / ElasticPress

A fast and flexible search and query engine for WordPress.

https://elasticpress.io

GNU General Public License v2.0

1.25k stars 311 forks source link

Facet mobile solution #1862

Open shaneonabike opened 4 years ago

shaneonabike commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

amesplant commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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