Content Manager: Filtering Content Based on Site Visitor Selection

Important:

There is a new way to allow visitors to filter and capture content. The new method replaces the steps in this article. Learn more about setting up filters for site visitors.

You can add a dropdown element that visitors select from to specify the content they want to view.

Let's say you have a website showing a list of recipes. Site visitors can use the dropdown to select a specific course, such as breakfast, lunch, or dinner. The list then only displays recipes from that course.

Notes:

Applying a filter to a dataset only changes what content is displayed on the page. It does not affect the content in the collection.
Filtering can only be applied to datasets set to Read-only or Read-Write.
Filtering based on site visitor selection is not supported for dynamic page datasets. Dynamic page datasets are already filtered by the page URL, therefore adding additional filters could lead to errors.

Before you begin:

You must have created a collection in order to carry out these steps.

Your site visitors can filter the content based on the choice they select from this dropdown.

Make sure your dropdown choices match the value of the field used to create the filter. The content you enter as your choices is case-sensitive. If your collection's field value contains the word "breakfast" and you enter "Breakfast" as one of your dropdown list choices, the connection will not work.

To add a dropdown element:

Open the Add panel in your Editor:
- Wix Editor: Click Add on the left side of the Editor.
- Editor X: Click Add at the top of Editor X.
Click Input.
Click Dropdown.

Click and drag the dropdown of your choice onto the page.
Click Manage Choices.
Hover over the relevant choice and click the More Actions icon .
Click Edit label and enter the text you want to appear in the dropdown.
Click Done.

Step 2 | Add a multi-item element

Decide how you want to display the content. Add a multi-item element, such as a repeater, table, or gallery, to your page to display the content.

Wix Editor | Show me how

Editor X | Show me how

Step 3 | Add and connect a dataset

Add the dataset to your page. Connect the collection, and its fields, to the multi-item element you created.

To add and connect a dataset:

Go to the Content Manager in your Editor:
- Wix Editor: Click Content Manager on the left side of the Editor.
- Editor X: Click Content Manager at the top of Editor X.
Click Add Content Elements.
Click Dataset.
Click Settings.
Click the Connect a collection drop-down and select the collection you want to connect.
Click the multi-item element on your page.
Click the Connect to Data icon .
Click the Connect a dataset drop-down and select the dataset that you want to connect your element to.
Click the relevant options under Components or Connection Options to connect each option to the relevant field in your collection.
Note: Options vary depending on the type of element selected. For instance, a repeater has a Components section, and a gallery has Connection Options.

Tips:

It can be helpful to create additional datasets that connect to the same collection. For example:

Filtering based on site visitor selection is not supported for dynamic page datasets.
- If you have a dynamic page that you want site visitors to be able to filter, add a second, non-dynamic dataset to the same page for filtering purposes only.
Use the content of a field in a collection as the values for your dropdown choices.
To generate the drop-down choices directly from the collection, create a new dataset for this purpose. You cannot use the same dataset for both filtering by site visitor selection and also for connecting dropdown choices.

Step 4 | Set up the filter

Set up the dataset so that filtering is based on what the site visitor chooses from the dropdown.

To set up the filter:

Click the dataset on your page.
Click Settings.
Click + Add Filter.

Click the Field drop-down and select the field in your collection you want to filter the content by.
Click the Condition drop-down and select how your content is filtered.
Under the Value source list, select User Input element.
Click the User Input drop-down and select Dropdown.
Click Add Filter.

Important:

To use the contents of a field in a collection as the choices for your dropdown, create a new dataset for this purpose. You cannot use the same dataset for both filtering by site visitor selection, and also for connecting dropdown choices.

(Optional) Step 5 | Filter by more than one value

You can add more than one filter to a dataset. For example, if you have a recipe website, you can let users filter the recipes based on a preferred course like appetizer, main, or dessert. After the site visitor filters by course, they can then filter by a meal, like breakfast, lunch, or dinner.

To filter by more than one value:

Follow the steps described in Step 1, above, to add another drop-down.
Choose the dataset that you set up filtering for.
Click Settings.
Click + Add Filter and create another filter on a user input element.
Click the User Input drop-down and select the drop-down you just created.
Click Add Filter.

(Optional) Step 6 | Add a reset button

It's helpful to add a button that enables site visitors to reset their filters. This allows them to see all the content again.

To add a reset button:

Add a button to your site:
- Wix Editor: Click Add on the left side of the Editor.
- Editor X: Click Add at the top of Editor X.
Click Button.
Select a button and drag it onto your site.
Click the Connect to Data icon (or in Editor X).
Click the Connect a dataset drop-down, and select the dataset that you set up filtering for.
Click the Click action connects to drop-down, and select Reset input values.