Create a menu allergen filter with CMS collection

Hi! :slight_smile:

Can someone provide me with the steps required to create a menu collection that customers can filter allergens on. (menu already created as a mock)

In other words, I need to build a restaurant menu and I would like it so that when you click check boxes related to the customers allergens it’ll filter out the dishes that contain those allergens. I’ve looked around on the forum and internet but I’m not understanding entirely how to set this up. Is there a way to filter with multi-reference fields?

Any help would be greatly appreciated!

There are multiple ways you can do it including custom code and using libraries like MixItUp but what I’d recommend as it’s the easiest (and most pleasant) is https://www.jetboost.io/. There’s step-by-step instructions and you can get it set up for free on your webflow.io site to test that it works.

Thanks for the speedy response. I’ve had a look at jetboost and was considering that but there are tutorials on MixItUp and was wondering how to implement that into my work with multi-referencing. Maybe I’m not pushing hard enough to wrap this whole thing round my head. But I discovered that filtering on the designer the ‘multi-reference’ fields that it removes the associated collection list linked to it. So I think that might work. I’ll give it a go and report back. :slight_smile:

1 Like

Sure thing :slight_smile: I implemented MixItUp on one of my sites (this was before Jetboost was out) and it does take some time but it works well.

Keep us posted!

Ok, so I’ve tried two ways and the Jetboost gave me the answer, but not the freedom to customise like MIXITUP. @sarwech on your example site you have so many filters, how did you achieve this?

When using Mixitup it limits to 5 references on an item as it is unable to use multi-reference fields (or so everyone has mentioned on forums). But with Jetboost you CAN use multi-reference fields. Is there something I’m missing here and is there a work around. There are 14 allergens in the list and some dishes contain 6 which is more than the 5 limit reference field.

I used this awesome tutorial by @sabanna to get MixItUp working with multiple filters.

In terms of multi-reference fields, when I set it up it did not work with multi-reference fields and I don’t think MixItUp have added that functionality yet, I’m afraid. You’d have to make do without it or use Jetboost!

Hey, @NJMM!

Is the list of allergens a static or dynamic?
I understand the frustration and really hope we will be able to remove some limitations on the Nested Collections.

If the full list of allergens is something that constant and will not change in time, you can use options fields as a workaround. A bit of a hassle to implement (you would need quite few options fields on one item), but that would work with MixitUp.