How to create a filtering system
PROJECTS USED
TAGS
SUITABLE FOR
Editor X, Classic editor
ABOUT
Trying to create a specific filtering system? Learn how to filter by different types of content on your Wix site.
Layout
01. Add a layouter with one list item
02. Add a button and adjust the style
03. Add a hover effect
04. Stretch the button to full width
05. Set a minimum item width in pixels
06. Stretch the layouter to full width
07. Duplicate, rename and reset widths of items and buttons
08. Duplicate the item and create an “All” button
09. Change the “All” button's regular state to "clicked"
10. Add a repeater
11. Stretch the repeater to full width
12. Add an image to the repeater items
13. Duplicate repeater items
Database
01. Add a collection to the site
02. Add "Image" and "Tag" fields
03. Add content in the fields
04. Add a dataset to the page
05. Connect repeater elements to the dataset
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Velo
01. Adjust image and tag field names used in code
02. Turn on Dev Mode
03. Add element IDs : “allbutton” and “tagsContainer”
04. Paste Velo header
05. Paste and customize your button color settings
06. Design tags for "select" and "deselect"
07. Filter function
// Velo Header & Color specs
import wixData from 'wix-data';
const g_Black = "#000000";
const g_grey = "#EAEAEA";
const g_white = "#FFFFFF";
// Button color settings
function setButtonStyleSelected(btn) {
btn.style.backgroundColor = g_Black;
btn.style.color = g_white;
}
function setButtonStyleUnselected(btn) {
btn.style.backgroundColor = g_grey;
btn.style.color = g_Black;
}
//Design for Tag Boxes on Select and deselect
$w.onReady(function () {
let tagsBoxes = $w('#tagsContainer').children;
let lastSelection = $w("#allbutton");
tagsBoxes.forEach(tagBox => {
let tagBtn = tagBox.children.find(child => child.id.includes('button'));
tagBox.onClick(() => {
//reset all buttons to default style
tagsBoxes.forEach((tagBoxIn) => {
let tagBtnIn = tagBoxIn.children.find(child => child.id.includes('button'));
setButtonStyleUnselected(tagBtnIn);
})
//set the selected button & fillter
if (tagBtn !== lastSelection) {
setButtonStyleSelected(tagBtn);
lastSelection = tagBtn;
filter(tagBtn.label);
}
})
})
});
// Filter Function
function filter(tag) {
let newFilter = wixData.filter();
if (tag == "All") {
newFilter = wixData.filter().isNotEmpty('tags');
} else {
newFilter = newFilter.contains('tags', tag)
}
$w('#dataset1').setFilter(newFilter);
}
