▼
Streaming live at 10am (PST)

Multifiltering with MixItUp

Design help Custom code
#1

Hi. I’m trying to get the Multifilter to work but no luck. I can get the filter to work with filer “Structure”, “Suede Leather”, “Velvet”, “Leather” and “Natural” but then I add filter “2-seater” or “3-seater” the filter stops working. The filters “2-seater” and “3-seaters” are meant to work separately. Materials are one category (Structure, Suede…) and Seats is one category. Can anyone find out what I’m doing wrong?

Link to page: https://lovi.webflow.io/collection/ginger-sofa-copy
Link to read-only: https://preview.webflow.com/preview/lovi?utm_medium=preview_link&utm_source=designer&utm_content=lovi&preview=83365b6a1f1d0db189bc0c1b23933555&pageId=5dd803dcc07b16cb8469c12c&mode=preview

The filer is on the page Ginger Sofa. All my script-code is under that specific page.

Edit: I updated the links. I change the site to have buttons instead of radio buttons. Still no luck tho.

#2

@sabanna can you help with this. I havent used this feature yet in any of my projects.

2 Likes
#3

Hi, @billyberg!

There are few things that need to be fixed in the project.

  1. The CSS class name can’t start with the number (it’s a standard syntax rule). I added a snippet in the code in the tutorial that takes care of it. When you have a category that starts with the number, the code will add an underscore before the number and then convert it to the class name. So, when you are creating the filtering controls (buttons or radio-buttons or whatever) the value should be in the correct CSS format. In this example, it should be “._2-sits” instead of “.2-sits”

16%20AM

24%20AM
24%20AM768×242 68.1 KB

  1. All categories inside the item preferably should be in the same level of nesting, because there is the only one snippet in the code that is “reading” the category text and then applies it as a class to the “parent-of-parent”. if one of the categories sits, let’s say, one more level deeper, then the class name will end up on the wrong “parent”. Which happened in your example. So, MixitUp does not recognize these categories, because they are NOT on the mix-item

37%20AM

  1. You also have a part of the code that should take care of sorting, but I don’t see sorting controls. Not sure if you are planning to add it earlier .

Cheers,
Anna

1 Like
#4

Thanks! That fixed it… almost :slight_smile:
The problem I have now is that I’m using the MultiFilter so that the user can select a material and if it is 2- or 3-seater. It now works as one filter.

#5

Sorry. I tried your solution on another site where I used radio buttons instead and it works. Thank you so much!

https://lovi.webflow.io/collection/ginger-sofa

1 Like