Filter With Multiple Options

Collection 

We added a collection to store the recipe content. The collection has descriptive fields, as well as a ‘tags’ field of type ‘Tags’ that stores the recipe’s associated categories (Breakfast, Snack, etc.) The tags are used to filter the repeater’s content.

​

Page Elements

In our site we added the following page elements:

• Repeater: To display the recipes stored in the database collection.

• Selection tags: For visitors to choose recipe categories. Each selection tag has a value and label that correspond to a tag used in the database collection.

​

Code

1. In $w.onReady(), run the setRepeatedItemsInRepeater() function to bind specific data to the repeater elements.

2. Call the loadDataToRepeater() function to initially load the unfiltered recipe data into the repeater. 

3. Add an onChange() event handler to the Selection Tags element. If the selection tags change, run the loadDataToRepeater() function with the selected tags as a parameter:

   1. Create a variable to hold a Wix Data query.

   2. Check whether any selection tags were chosen. If so, use a hasAll() filter to only get the data of collection items with all of the chosen tags.

   3. Resolve the query and set the result as the repeater’s data.

   4. If the query returns no results, show a ‘No Results Found’ text message.