How can I create a food allergen filter for a collection page?

[sancuscommerce]

I am looking to add a filter for food allergens to a collection page. The allergens are currently configured as metafields on the product (such as "contains peanuts" or "contains shellfish"). how can i create a filter on the collection to allow the customer to select the allergens they want to exclude (the boolean for that metafield being false). i have other metafields i want to exclude from the list too. do i need to loop over all the metafields and hardcode which ones to display? looking for the best approach.

[Uhrick]

Hi, Sancuscommerce. 

Shopify has launched this app a while back https://apps.shopify.com/search-and-discovery?locale=pt-BR

It allows to create filters from metafields and other types of fields. Does it cover your needs?

[sancuscommerce]

Thanks, I have this installed, but I do not see how I can use mulitple metafield values. I can do one metafield (ie, contains milk, but I want the user to be able to select multiple metafield values). I also tried using tags, but it doesnt allow me to limit the list of filter values by specific tags. It appears to be an all-or-none tag list.

[Uhrick]

Oh, right. I see the issue with what I said. There wouldn't be a metafield 'allergie' with the value, there would be several boolean metafields, with the types of alergies as the field titles. I assume this probably would need a somewhat complex development work. But I didn't understand very well what you tried with the tags. You were trying to somehow filter from the filtered results using tags? Is that it?

[sancuscommerce]

Thanks for all of your suggestions. I fear you might be right that this requires a deal of custom development. 

This is what I trying to duplicate from the current site - a customer can select which allergens to exclude from the displayed meals:

This is what I created as metafield product values. I want to change the above checkboxes to a filter that they can select the checkboxes of meals to exclude... so if they select eggs, it would NOT display products with "Contains Eggs" = true (or put another way.. it would display products with Contains Eggs = false). Same would hold true to all of the allergens checked in the filter. so if i checked eggs and fish, i would only show products with contains eggs = false AND contains fish = false.

When I setup a filter just based on the contains coconut metafield, this is what I get.. but that is not what I want.. I want one filter with many options and only that filters on false. so instead of "Contains Coconut" I want it to say "Allergens" and then have coconut as a checkbox under it.

I also applied tags to the product.. but there are also non-allergen tags in there as well. for example, this product contains eggs and fish.. so it would be excluded if the customer selected the fish or egg allergen filter.

When applying the tags filter from the app you suggested, this is what i get, i want the counts (but the opposite... where it not in the tags.. this is showing the count of products with it as a tag). also, it is exposing tags that are not allergens.

[Uhrick]

Ok, I found a solution, create a metafield such as 'allergenics' for the products, set it as being of the single line text, and mark it to be a list of values

then, you can just add the appropriate allergenics of the products to them.

[sancuscommerce]

Perhaps I am doing this wrong, but following your instructions, I can only assign 1 allergen to each product. But some meals contain multiple allergens (such as egg and shellfish). But the customer should be able to select either egg or shellfish or both and then have those products containing them removed from the product listing.

[Uhrick]

Did you create the metafield as a list of values? Are you clicking on add more items?

[Local1]

Hey, just wanted to say thank you! This solution worked for me for a similar use-case