Narrowing a filter for Database of Dealers

Ask the community
,
1

Hi Folks,

wondering if anyone can lend a hand here.

I have a Database of Shops/Dealers for a website that displays all the dealers in a Repeater. I have implemented a Filter function for the Database/repeater to filter the Dealers by the country selected from a Dropdown menu. This works really smoothly, and I’m happy with it considering how new I am to javascript.

What I’d like to be able to do is to narrow the Filter down by adding a condition of whether the Dealer has a certain type of product (either A, B or both). This is included in the Database as a Boolean. I would like to use a pair of checkboxes (both checked by default, though they are HIDDEN and COLLAPSED to make the GUI a little nicer), and extract the TRUE/FALSE value from those to add to the Filter function.

I can get the checkboxes to return the value to the console (along with some visual cues and functionality), but on checking the Wix Corvid API regarding Filters, I would have thought I could append things with a AND function. But I keep getting error messages saying that “.AND is not a Function of .FILTER()” or this bit just doesn’t do anything, or things just disappear…

I know what I’d like it to do, but I just can’t get it to work, and I’m sure it’s something relatively simple.

Anyone able to offer a solution would be a saviour in my books!
Thanks so much!

Page is here:

Code attached below:

import wixData from 'wix-data';

let checkboxD = true
let checkboxM = true
let countryFilter = ""

export function spriteMarching_click(event) {//TO ADD A GREYED OUT EFFECT TO THE IMAGE AND UNCHECK THE BOX
    $w('#maskMarching').show()
    $w('#checkboxM').checked = false
    $w('#checkboxM').value = false
    checkboxM = $w('#checkboxM').checked
    console.log("Marching " + checkboxM)
}

export function maskMarching_click(event) {//TO REMOVE THE GREYED OUT EFFECT TO THE IMAGE AND CHECK THE BOX
    $w('#maskMarching').hide()
    $w('#checkboxM').checked = true
    $w('#checkboxM').value = true
    checkboxM = $w('#checkboxM').checked
    console.log("Marching " + checkboxM)
}

export function spriteDrumKit_click(event) {//TO ADD A GREYED OUT EFFECT TO THE IMAGE AND UNCHECK THE BOX
    $w('#maskDrumKit').show()
    $w('#checkboxD').checked = false
    $w('#checkboxD').value = false
    checkboxD = $w('#checkboxD').checked
    console.log("DrumKit " + checkboxD)
}

export function maskDrumKit_click(event) {//TO REMOVE THE GREYED OUT EFFECT TO THE IMAGE AND CHECK THE BOX
    $w('#maskDrumKit').hide()
    $w('#checkboxD').checked = true
    $w('#checkboxD').value = true
    checkboxD = $w('#checkboxD').checked
    console.log("DrumKit " + checkboxD)
}

//TRYING TO FILTER OUT THE RESULTS BY MARCHING DEALERS <<<<HELP HERE PLEASE
export function checkboxM_change(event) {            
 
    checkboxM = $w('#checkboxD').checked
    $w('#dealerDataset').setFilter(wixData.filter()
    .eq("marching", checkboxM))

    console.log("DrumKit" + " " + checkboxM);
}

//TRYING TO FILTER OUT THE RESULTS BY DRUM KIT DEALERS <<<<HELP HERE PLEASE
export function checkboxD_change(event){          

    checkboxD = $w('#checkboxD').checked
    $w('#dealerDataset').setFilter(wixData.filter()
    .eq("marching", checkboxD))

    console.log("DrumKit" + " " + checkboxD);

}

export function regionDropdown1_change(event) {//FILTERING THE RESULTS BY COUNTRY TAG
    $w('#loadingSpinner1').show();
    countryFilter = $w("#regionDropdown1").value
        $w("#dealerDataset").setFilter(wixData.filter()
            .contains("regionFilter", countryFilter))
 

            .then(() => {
            $w('#loadingSpinner1').hide();
            console.log("Filtering" + " " + countryFilter);
        });
}

export function resetButton_click(event) {//RESET THE DROPDOWN MENU AND THE FILTER
    $w('#loadingSpinner1').show();

    $w("#regionDropdown1").value = "";
    $w("#dealerDataset").setFilter(wixData.filter().contains("regionFilter", ''))
                .then(() => {
            $w('#loadingSpinner1').hide();
            console.log("Resetting Filter and Dropdown");
        });
}

export function loadmore_viewportEnter(event) {//LOAD MORE ON SCROLL TO BOTTOM OF PAGE
    $w('#loadingSpinner2').show();

    $w("#dealerDataset").loadMore()
        .then(() => {
            console.log("Done loading more data");
        })

        .then(() => {
            $w('#loadingSpinner2').hide();
        });
}

export function loadmore_click(event) { //LOAD MORE ON CLICK OF BUTTON
    $w('#loadingSpinner2').show('FadeIn');

    $w("#dealerDataset").loadMore()
        .then(() => {
            console.log("Done loading more data");
        })

        .then(() => {
            $w('#loadingSpinner2').hide();
        });
}
2

Does anyone have any idea on this one? Still stuck on getting Filters to stack together.

Thanks

Jack