Not Working - Multiple Checkbox Filter on Repeater

rsenoren · February 3, 2019, 9:32am

Hi WiX Community! I’m creating a website for my master’s project / thesis. I want to use multiple checkboxes to filter a repeater similar to this webpage https://www.routetoresilience.co.uk/services.

Based on the info that I have found in the forums, vids, and articles, I think using Boolean values to filter will be “easier” for me since I am new to coding and I will also be using multiple checkboxes. I’ve seen this forum post and tried using the code https://www.wix.com/code/home/forum/community-discussion/multiple-checkbox-filter-problem and used the example from this page https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-MULTIPLE-CHECKBOX-FILTERS to set up my test page with info. They seem to have similar code but for some reason when I try to filter and deselect checkboxes the repeater that shouldn’t appear is showing up, the opposite of what I want it to do. I’ve tried playing around with the onClick() and checkbox_changed() functions but have reached a dead end.

What I currently have:

A test page https://rsenoren.wixsite.com/mysite/test-store-page with test info.
A dataset called “Products”
A page with a repeater that is NOT connected to the dataset, but the elements are connected to the dataset.
3 checkboxes (for now until I manage to get multiple checkboxes to filter)

Thank you in advance for your help!

Here is the code that I am using:

import wixData from ‘wix-data’;

function ProductFilter() {
wixData.query(“Products”)
.eq(“duration”, $w(“#checkbox1”).checked)
.or(
wixData.query(“Products”)
.eq(“boots”, $w(“#checkbox2”).checked)
)
.or(
wixData.query(“Products”)
.eq(“sneakers”, $w(“#checkbox3”).checked)
)

// add or statements for the other checkboxes
.find()
.then((results) => {
//console.log(results.items);
let Products = results.items;
$w(‘#repeater1’).data = Products;
})

}

// Query to get the information from the database
$w.onReady( function () {

    ProductFilter(); 

    $w('#repeater1').onItemReady(($w, itemData) => {

// Add here all the relevant elements of the repeater
$w(‘#text22’).text = itemData.title;
$w(‘#text24’).text = itemData.description;
$w(‘#image12’).src = itemData.image;

});

});

// What does this statement mean to connect the onClick() for the checkbox_changed() below?–>“And then connect the onClick() function of all of the Checkbox components to this function:”

// And then connect the onClick() function of all of the Checkbox components to this function:
export function checkbox_changed(event, $w) {
ProductFilter();
}

export function checkbox1_click(event, $w) {
checkbox_changed();

}
export function checkbox2_click(event, $w) {
checkbox_changed();

}

export function checkbox3_click(event, $w) {
checkbox_changed();

yoav-wix · February 3, 2019, 6:19pm

I think your should use the checkbox on Change event, not the on click event.

I think on click happens still with the old checkbox value, while on change will be with the right value.

rsenoren · February 3, 2019, 8:00pm

Aloha Yoav! Thank you so much for the quick reply. I tried the onChange event (and it could be the way I’ve laid out the statements) but for some reason nothing happens on the page (incorrectly disappearing when selecting and de-selecting the checkbox) unless I put the onClick function in. Here’s what I now have with the onChange() for all checkboxes 1, 2, 3 and only keeping onClick() for checkbox 1.

Still wondering what I’m doing wrong and what’s wrong with the code?

rsenoren · February 4, 2019, 12:58am

Hi Yoav,
I was able to fix the onChange() so that it worked. Now my problem is how to do multiple filter using more than one category. I tried to add more OR statements in the wixData.query() to account for the other Boolean values for another category but

The code below works for multiple checkboxes to filter for one category, BUT, how do I approach it so that I can do filters on more than one category with multiple checkboxes, like this website from another forum post https://www.routetoresilience.co.uk/services?

alessuae · March 23, 2019, 8:01pm

@rsenoren hi, did you find a solution to this? I’m having the same problem

rsenoren · March 27, 2019, 10:58pm

@alessuae Aloha there! Take a look at this forum post which also includes my exchange with Adam. Hope this helps you.
https://www.wix.com/code/home/forum/community-discussion/multiple-checkbox-filter-problem%3Fpage%3D1%26dl%3D5c5aa87a8796fa001b808204%252F5c578cb3d29997028f575fb5%252F1

alessuae · March 28, 2019, 5:54am

@rsenoren hi!
Thank you very much. I’ll have a closer look

stcroppe · March 28, 2019, 8:17am

[@Routhie Ann Senoren] @alessuae

I think you need to think of categories as groups of options so you would AND each category together.

If I am understanding your question correctly you want to add another category, say colour, to the query. So you would have a set or checkboxes for colour (red, blue, green…).

The approach I would take is to build up a series of functions that build the query and are called by a single filter function. Something like this:

import wixData from 'wix-data';

// Define a constant for the data collection
const PRODUCT_COLLECTION = "Products";

$w.onReady(() => {
    initialiseFilterHandlers();
});

function initialiseFilterHandlers() {
    // Shoe Type Category Checkboxes
    $w('#sneakersCheckbox').onChange(updateRepeater);
    $w('#bootsCheckbox').onChange(updateRepeater);
    $w('#heelsCheckbox').onChange(updateRepeater);
    
    // Shoe Colour Category Checkboxes
    $w('#redCheckbox').onChange(updateRepeater);
    $w('#blueCheckbox').onChange(updateRepeater);
    $w('#greenCheckbox').onChange(updateRepeater);
}

// Everytime a checkbox is changed we update the repeater.
// NOTE: For a large data collection we may need to add a debounce delay to the checkbox change
// So that multiple selections are applied together and don't cause long refresh delays
function updateRepeater() {
    // Get the new filtered data set based on new checkbox settings
    return filter()
    .then((filterResult) => {
        // Update the repeater using the newly filtered Product list
        $w('#repeater1').data = filterResult.items;
        $w('#repeater1').forEachItem(($item, itemData) => {
            // Load each repeater item
            $item('#text22').text = itemData.title;
            $item('#text24').text = itemData.description;
            $item('#image12').src = itemData.image;
        });
    });
}

// filter: The main filter function which builds the filter and 
// applies it returning a wixData query result.
function filter() {
    // Start by creating the main query we need to apply the filter.
    let mainQuery = wixData.query(PRODUCT_COLLECTION);
    
    // Now lets add the category filters
    let typeFilter = typeFilter();
    let colourFilter = colourFilter();
    
    // Execute the filter
    return mainQuery
    .and(typeFilter)    // Use AND to apply the type category filter
    .and(colourFilter)  // Use AND to apply the colour category filter
    .find();
}

// typeFilter: This function creates a filter for the type of shoe the user wants to 
// search for based on the type category checkboxes
function typeFilter() {
    // Create the main type category filter
    let typeFilter = wixData.query(PRODUCT_COLLECTION);
    
    // Build the filter based on shoe type checkbox settings
    if ($w('#sneakersCheckbox').checked) {
        typeFilter = typeFilter.or(wixData(PRODUCT_COLLECTION).eq('sneakers', true));
    }
    if ($w('#heelsCheckbox').checked) {
        typeFilter = typeFilter.or(wixData(PRODUCT_COLLECTION).eq('heels', true));
    }
    if ($w('#bootsCheckbox').checked) {
        typeFilter = typeFilter.or(wixData(PRODUCT_COLLECTION).eq('boots', true));
    }
    // Return the filter we need for type
    return typeFilter; 
}

// colourFilter: This function creates a filter for the type of shoe the user wants to
// search for based on the type category checkboxes
function colourFilter() {

    // Create the main type category filter
    let colourFilter = wixData.query(PRODUCT_COLLECTION);
    
    // Build the filter based on colour checkbox settings
    if ($w('#redCheckbox').checked) {
        colourFilter = colourFilter.or(wixData(PRODUCT_COLLECTION).eq('red', true));
    }
    if ($w('#blueCheckbox').checked) {
        colourFilter = colourFilter.or(wixData(PRODUCT_COLLECTION).eq('blue', true));
    }
    if ($w('#greenCheckbox').checked) {
        colourFilter = colourFilter.or(wixData(PRODUCT_COLLECTION).eq('green', true));
    }
    // Return the filter we need for colour choices
    return colourFilter;
}

Hopefully this answers your question.

Cheers
Steve

alessuae · March 28, 2019, 10:47am

Awesome! thanks a lot. I’ll try that soon

chris-derrell · August 1, 2019, 4:43pm

@alessuae @rsenoren , Wix also released a pretty awesome update recently allowing you to connect your datasets to filter via user input fields. https://support.wix.com/en/article/filtering-content-based-on-the-user-selection

It’s many years in the making, and should be able to help you guys out + 10% of the questions on the forum!

Chris

stcroppe · August 1, 2019, 4:52pm

Sadly it is not a great addition. Its still easier to do this in code than use the drop down integration

Topic		Replies	Views
How to filter a repeater using multiple single checkboxes (Boolean data) Ask the community wix-studio , code , question	3	26	December 2, 2024
Multiple checkbox filter problem Ask the community code , question	17	2301	April 9, 2019
Filtering using multiple checkboxes Ask the community code , question	12	4008	August 26, 2019
Multiple checkbox and search filter for repeater Ask the community partners , code , wix-members-area , technical-talk	0	107	September 15, 2022
4 Checkbox group to filter a repeater Ask the community code , question	8	288	June 8, 2021

Not Working - Multiple Checkbox Filter on Repeater

Related topics