Multiple Selection Tags Filter

[dome03]

Hey guys,
i`m having trouble with my tags filter. My project is a new website for our animal shelter. The goal is that you can filter the gender, age and location so i created three different tag categories. The cat should show if at least one statement of all selected categories is true.

It all worked fine if you only select one tag of each category. It also works when only 1 or 2 categories are selected and one is empty, but as soon as you select multiple tags of one category no cat will be found.

I get that as no cat can be at two locations at the same time and i used filter.hasAll in my code. So i changed filter.hasAll to filter.hasSome and the problem was gone as i would get correct results even if i select every filter in one category.

However now there has to be a selection made on every category before a cat can be found.

How can i achieve that the filter starts working on the first selected tag and doesnt require a selection in every category before showing the result? My code is:

 import wixData from 'wix-data';

$w.onReady(function () {

    $w("#GeschlechtTags, #AlterTags, #AufenthaltTags").onChange(function () {
        search();
    });

    function search() {

        let filter = wixData.filter();

        let geschlechtIdx = $w("#GeschlechtTags").selectedIndices;
        let alterIdx = $w("#AlterTags").selectedIndices;
        let aufenthaltIdx = $w("#AufenthaltTags").selectedIndices;

        let geschlechtVal = $w("#GeschlechtTags").value;
        let alterVal = $w("#AlterTags").value;
        let aufenthaltVal = $w("#AufenthaltTags").value;

        if (geschlechtIdx.length > 0 || alterIdx.length > 0 || aufenthaltIdx.length > 0) {

            filter = filter.hasSome("tags", geschlechtVal)
                .and(filter = filter.hasSome("alter", alterVal))
                .and(filter = filter.hasSome("adresse", aufenthaltVal))

            $w("#KatzenDataset").setFilter(filter)
                .then(count)

        } else {
            $w("#KatzenDataset").setFilter(filter)
                .then(count)
        }

        $w("#clearFilter").onClick(function () {
            $w("#GeschlechtTags, #AlterTags, #AufenthaltTags").value = undefined;
            $w("#KatzenDataset").setFilter(wixData.filter()).then(count);
        });

    }

    //COUNT ITEM
    function count() {
        let count = $w("#KatzenDataset").getTotalCount();
        if (count > 0) {
            $w("#TrefferKatzen").text = `${count} Katze(n) gefunden`;

        } else { $w("#TrefferKatzen").text = `Keine Katze gefunden`; }

        return count;
    }

    $w("#KatzenDataset").onReady(function () {
        count();
    });
});

Thank you in advance

[J.D]

It should be something like:

$w('#tags1, #tags2, #tags3').onChange(() => {
    let filter = wixData.filter();
    const [val1, val2, val3] = [$w('#tags1').value, $w('#tags2').value, $w('#tags3').value];
    if(val1.length){filter = filter.hasSome('field1', val1);}
    if(val2.length){filter = filter.hasSome('field2', val2);}
    if(val3.length){filter = filter.hasSome('field3', val3);}
    $w('#dataset').setFilter(filter);
})

[dome03]

Thank you so much!! Now it works perfectly. For everyone interested this is my code now:

[dome03]

import wixData from 'wix-data';

$w.onReady(function () 


{    $w("#GeschlechtTags, #AlterTags, #AufenthaltTags").onChange(function () {
        search();
    });

    function search() {


$w('#GeschlechtTags, #AlterTags, #AufenthaltTags').onChange(() => {
    let filter = wixData.filter();

    const [val1, val2, val3] = [$w('#GeschlechtTags').value, $w('#AlterTags').value, $w('#AufenthaltTags').value];
    if(val1.length){filter = filter.hasSome('tags', val1);}
    if(val2.length){filter = filter.hasSome('alter', val2);}
    if(val3.length){filter = filter.hasSome('adresse', val3);}

    $w('#KatzenDataset').setFilter(filter)
                        .then(count)
})

           

        $w("#clearFilter").onClick(function () {
            $w("#GeschlechtTags, #AlterTags, #AufenthaltTags").value = undefined;
            $w("#KatzenDataset").setFilter(wixData.filter()).then(count);
        });

    }

    //COUNT ITEM
    function count() {
        let count = $w("#KatzenDataset").getTotalCount();
        if (count > 0) {
            $w("#TrefferKatzen").text = `${count} Katze(n) gefunden`;

        } else { $w("#TrefferKatzen").text = `Keine Katze gefunden`; }

        return count;
    }

    $w("#KatzenDataset").onReady(function () {
        count();
    });
});

[Sergio_Karelovic]

Hello!
I need to recreate the tags that are shown when some filters are selected on the default Store Page.

I’m building a custom store page with CSM but I would like that this page have those filter too.

Any idea of how to make it?