How to Add Dynamic Filters to a Wix Repeater Using Velo

🎯 Introduction

Dynamic filters transform a Wix website by making content easier to explore. When users can quickly narrow down options, they find what they want faster and stay engaged longer. Imagine a flight search where travelers filter by airline, price, or departure city. Or a product catalog where shoppers select categories, price ranges, and brands. Job listings also benefit from filters like location, salary, and job type. These examples show how dynamic filters improve user experience by making data accessible and relevant.

This post guides Wix website owners and beginner Velo developers through adding dynamic filters to a Wix Repeater using Velo code. You will learn how to build checkbox filters, price sliders, city selectors, and time slot filters. A live demo is available at wixcrafters.com/custom-filters-on-repeater to see the final result in action.

🛠️ What You Will Build

You will create a filtering system for a Wix Repeater that includes:

• Checkbox filters for selecting airlines

• Price slider to filter flights by cost

• City filters to choose departure cities

• Time slot selectors for departure times

  
  

This setup allows users to combine filters dynamically and see matching results instantly. The live demo on WixCrafters shows how these filters work together smoothly.

✅ Prerequisites

Before starting, ensure you have:

• Dev Mode enabled in your Wix Editor to access Velo tools

• A Wix Collection with relevant data to filter

• Basic knowledge of JavaScript and Wix Velo APIs

  
  

These basics will help you follow the steps and customize the filters for your own site.

📦 Step 1 — Database Setup

Create or update your Wix Collection with these fields:

| Field Name | Type | Description |

|-----------------|------------|--------------------------------|

| `airline` | Text | Name of the airline |

| `price` | Number | Flight price |

| `departureCity` | Text | City where the flight departs |

| `departureTime` | Date/Time | Scheduled departure time |

Make sure your data is consistent and clean. This structure supports filtering by multiple criteria.

🎨 Step 2 — UI Elements

Add the following UI elements to your page and assign these IDs:

• Checkbox group for airlines: `#airlineFilter`

• Price slider: `#priceSlider`

• Dropdown or checkbox group for departure cities: `#departureFilter`

• Dropdown or time picker for departure times: `#timeFilter`

• Repeater to display results: `#resultsRepeater`

  
  

These elements let users select filter options and view filtered results in real time.

Wix editor with dynamic filters and repeater setup

💻 Step 3 — Velo Code

Here is a clean example of how to query your Wix Collection using Velo code with dynamic filters:

```javascript

import wixData from 'wix-data';

$w.onReady(() => {

// Attach event handlers to filter inputs

$w('#airlineFilter').onChange(applyFilters);

$w('#priceSlider').onChange(applyFilters);

$w('#departureFilter').onChange(applyFilters);

$w('#timeFilter').onChange(applyFilters);

// Initial load

applyFilters();

});

function applyFilters() {

let airlineValues = $w('#airlineFilter').value; // array of selected airlines

let maxPrice = $w('#priceSlider').value;

let departureCities = $w('#departureFilter').value; // array of selected cities

let selectedTime = $w('#timeFilter').value; // time string or Date object

let query = wixData.query('Flights');

if (airlineValues && airlineValues.length > 0) {

query = query.hasSome('airline', airlineValues);

}

if (maxPrice) {

query = query.le('price', maxPrice);

}

if (departureCities && departureCities.length > 0) {

query = query.hasSome('departureCity', departureCities);

}

if (selectedTime) {

// Assuming selectedTime is a Date object or time string to filter flights departing after this time

query = query.ge('departureTime', selectedTime);

}

query.limit(50).find()

.then(results => {

$w('#resultsRepeater').data = results.items;

})

.catch(err => {

console.error('Query failed', err);

});

}

```

This code listens for changes on filter inputs and updates the repeater data accordingly. It uses `.hasSome()` to match multiple values and `.le()` or `.ge()` for numeric and date comparisons.

🐛 Step 4 — Common Issues

| Problem | Solution |

|------------------------------------|-----------------------------------------------------------|

| Filters do not update on selection | Ensure event handlers are attached to filter elements |

| Repeater shows no results | Check database fields and filter logic for typos |

| Price slider value not recognized | Confirm slider returns a number and matches database type |

| Query returns too many results | Use `.limit()` to restrict results and improve performance |

These tips help troubleshoot common problems when building dynamic filters.

💡 Pro Tips

• Use `.limit()` in your queries to avoid loading too many items at once.

• Add a loading spinner to indicate data is being fetched.

• Use `console.log()` to debug filter values and query results.

• Test filters individually before combining them to isolate issues.

  
  

These practices make your filter system smoother and easier to maintain.

🚀 Conclusion

Adding dynamic filters to a Wix Repeater with Velo enhances your website’s usability and keeps visitors engaged. By following these steps, you can build a powerful filtering system tailored to your content. For expert help or custom development, contact WixCrafters at wixcrafters.com or email wixcrafters@gmail.com. Start improving your Wix site today with dynamic filters that your users will appreciate.