Grid and List View

Can you please add a Widgets for List and grid views. This guy did it, why can’t algolia.

The approach you’ve found by one of our team members is a great example on how to achieve this in user land. Since we haven’t really had any requests for building this out of the box, we haven’t yet done it

If you don’t want grid/list choice to be in the URL, it’s even simpler, since then there’s no need for a custom widget, and this can be done just with toggling of a css class around the hits

If you inspect the code, what he’s doing is loading the list twice and then hiding one for the other. That’s gotta be an accessibility nightmare and a page load hog.

I did go the route of toggling the classes with CSS and JS and it sort of works. On the initial page load, it works great. Its when you click the pagination or infinite buttons it loads the initial class and not the class you toggled too. So for example, if I click the list view then click to the second page it reverts back to the grid view for those results.

have you tried adding the grid/list class on a div wrapping the container? If you have a sandbox, I’d love to have a look at what you have now

1 Like

That’s a great idea! It never dawned on me to add a class to the wrapping container. I was always focused on the list items themselves. Thanks, I just needed an outside perspective!

1 Like