Filter With Multiple Options

Filter a repeater with multiple options using the Selection Tags element.

Code Level

Intermediate

Published

 

Example Description

In this example we used a repeater to display some recipes, and added selection tags to filter the repeater content based on multiple options selected by site visitors. For example, visitors can choose to view only recipes that are tagged as ‘Breakfast’ and ‘Dessert’.

Example Code

How We Built It

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.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER