How to Add Custom Filters on Wix Repeater Using Velo
- Wix Crafters
- Apr 28
- 4 min read
🎯 Introduction
Adding dynamic filters to your Wix site can greatly improve how visitors find what they need. Whether you run a flight search platform, a product catalog, job listings, or real estate site, filters help users narrow down options quickly and easily. Instead of scrolling through endless items, they can select criteria like airline, price range, city, or departure time and see results update instantly.
This post will guide you through building custom filters on a Wix Repeater using Velo. You will learn how to create multi-checkbox filters, a price range slider, dropdowns for cities, and time slot selectors. The filtering will happen in real time without reloading the page, making your site feel smooth and responsive.
🛠️ What You Will Build
By following this tutorial, you will create a dynamic filtering system with these features:
Multi-checkbox filters for airlines and departure cities
A price range slider to filter flights by cost
Radio buttons for selecting departure time slots
Real-time filtering that updates the repeater instantly
A reset button to clear all filters and show all results
A live count of filtered results
You can see a working demo of this filter system at wixcrafters.com/custom-filters-on-repeater.
✅ Prerequisites
Before starting, make sure you have:
Wix Dev Mode enabled on your site
A database collection with relevant data (e.g., flights)
Basic knowledge of JavaScript and Wix Velo APIs
📦 Step 1 — Database Setup
First, create a collection in the Wix Content Manager to store your data. For this example, the collection should include these fields:
airline (Text) — e.g., "Delta", "United"
price (Number) — flight cost
departureCity (Text) — e.g., "New York", "Los Angeles"
departureTime (Text) — e.g., "Morning", "Afternoon", "Evening"
Make sure your collection is set to allow read access for site visitors if you want everyone to see the data.
🎨 Step 2 — UI Elements
Next, add the user interface elements to your page and assign the following IDs:
`#airlineFilter` — CheckboxGroup for selecting airlines
`#priceSlider` — Slider for selecting price range
`#departureFilter` — CheckboxGroup for departure cities
`#timeFilter` — RadioGroup for departure time slots
`#resultsRepeater` — Repeater to display filtered results
`#resultCount` — Text element to show the number of results
Arrange these elements clearly so users can easily interact with the filters.
💻 Step 3 — Velo Filter Code
Now, add the filtering logic using Velo code.
Import the Wix Data API at the top of your page code:
```javascript
import wixData from 'wix-data';
```
Create variables to store filter values and a function to load data:
```javascript
let selectedAirlines = [];
let selectedCities = [];
let selectedTime = "";
let maxPrice = 1000; // default max price
function loadData() {
let query = wixData.query("Flights");
if (selectedAirlines.length > 0) {
query = query.hasSome("airline", selectedAirlines);
}
if (selectedCities.length > 0) {
query = query.hasSome("departureCity", selectedCities);
}
if (selectedTime) {
query = query.eq("departureTime", selectedTime);
}
query = query.le("price", maxPrice);
query.limit(50).find()
.then(results => {
$w("#resultsRepeater").data = results.items;
$w("#resultCount").text = `${results.totalCount} flights found`;
})
.catch(err => console.error(err));
}
```
Add event handlers to update filter variables and call `loadData` on changes:
```javascript
$w.onReady(() => {
$w("#airlineFilter").onChange(event => {
selectedAirlines = event.target.value;
loadData();
});
$w("#departureFilter").onChange(event => {
selectedCities = event.target.value;
loadData();
});
$w("#timeFilter").onChange(event => {
selectedTime = event.target.value;
loadData();
});
$w("#priceSlider").onChange(event => {
maxPrice = event.target.value;
loadData();
});
loadData(); // initial load
});
```
This setup ensures the repeater updates instantly as users adjust filters.
🔗 Step 4 — Reset Button
Add a reset button with ID `#resetFilters`. Its code should clear all filters and reload all data:
```javascript
$w("#resetFilters").onClick(() => {
selectedAirlines = [];
selectedCities = [];
selectedTime = "";
maxPrice = 1000;
$w("#airlineFilter").value = [];
$w("#departureFilter").value = [];
$w("#timeFilter").value = "";
$w("#priceSlider").value = maxPrice;
loadData();
});
```
This lets users quickly start a new search without manually clearing each filter.
🐛 Common Issues
| Issue | Possible Cause | Solution |
|------------------------|----------------------------------------------|-----------------------------------------------|
| Repeater not updating | Element ID mismatch | Verify IDs in code match UI elements exactly |
| Filter not working | Field names differ from collection | Check spelling and case of field names |
| No results showing | Query logic excludes all items | Use `console.log` to debug query parameters |
| Slow filtering | Query returns too many items | Use `.limit(50)` to improve performance |
💡 Pro Tips
Always use `.limit()` on queries to avoid performance issues.
Show a loading spinner while data loads to improve user experience.
Combine filters with query chaining for clean, readable code.
Display the count of filtered results to give users feedback.
Test filters with real data to ensure accuracy.
🚀 Conclusion
Custom filters on Wix Repeaters make your site more interactive and user-friendly. By combining multi-checkboxes, sliders, and radio buttons with Wix Velo’s powerful data queries, you can create a smooth, real-time filtering experience without page reloads.
Try building your own filters using the steps above. For expert help or custom development, visit wixcrafters.com or contact us at wixcrafters@gmail.com. We also offer 5-star rated services on Fiverr to bring your Wix site to the next level.
Start improving your Wix site’s usability today with dynamic filters that your visitors will appreciate.
Comments