Use card instead of chips to mult-select filter a collection?

Hello again, you guys have been so incredibly helpful in here and I’m really grateful!! Trying my best to figure things out on my own before asking for help so that I can learn.

I created a filter bar out of multiple choice chips and that is working wonderfully, however I am a bit frustrated that the icons are so cropped and that the UI looks a bit cluttered given how many options there are.

I did consider a dropdown, but I’m a fan of visual menus/buttons. If keeping the top filter bar I could try to make the images have empty space around them and force it to fit within the button.

The app-filter bar will be used for things like brand, colour, tags etc, whereas the Type is more of a primary category sort of thing.

Looking for:

  • Suggestions on if there is a better way to do this
  • Information on whether any of the following ideas are do-able

Aiming to have cards that when clicked toggle the same functionality of a filter with a :check_box_with_check: in the name to show that it is selected.

Another option is to have the cards take you to a new screen for that clothing type, with the sub-category as cards above that which again take you to a new screen. I’m trying to avoid how many different pages you have to go through to view the data, but if its easier / visually cleaner then maybe I do that?

And lastly, if I’m sticking with the chips, is there a way to have a dropdown button to collapse the chips into a dropdown?

Thank you in advance

You can reuse what I gave you last night. Use the same action to add/remove items from the array, and then use the array as a filter on your collection.

Ahhh so I can use that for filters as well, thank you so much Darren!! I’ll give this a go now!

I did it!! It updates the filter on the same page when clicked.

2 Likes

Thought I’d put this here as a preview of what I ended up doing!!

Uses the base of the template you showed me and builds upon it. I also have it in the collections screen.

2 Likes

That’s awesome, well done! :+1:

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.