Multiple Selection Tags Filter using Velo by WIX🎉

:star:LINK TO CODE | https://bit.ly/3CIcWRG
:star:PREVIEW WEBSITE | https://bit.ly/32ki6Xs

:triangular_flag_on_post:MORE TUTORIALS https://www.wixideas.com/tutorials

:tv:Please Subscribe, Like, & Share :point_right:t4::point_right:t4: YouTube

This tutorial shows you how to filter WIX repeater using multiple Selection Tags

import wixData from 'wix-data';
​
$w.onReady(function () {
 
    $w("#cuisineTags, #locationTags, #costTags").onChange(function () {
        search();
    });
 
    function search() {
 
        let filter = wixData.filter();
 
        let cuisIdx = $w("#cuisineTags").selectedIndices;
        let locIdx = $w("#locationTags").selectedIndices;
        let costIdx = $w("#costTags").selectedIndices;
 
        let cuisVal = $w("#cuisineTags").value;
        let locVal = $w("#locationTags").value;
        let costVal = $w("#costTags").value;
 
        if (cuisIdx.length > 0 || locIdx.length > 0 || costIdx.length > 0) {
 
            filter = filter.hasAll("cuisine", cuisVal)
                .and(filter = filter.hasAll("location", locVal))
                .and(filter = filter.hasAll("cost", costVal))
 
            $w("#dataset1").setFilter(filter)
                .then(count)
 
        } else {
            $w("#dataset1").setFilter(filter)
                .then(count)
        }
 
        $w("#button1").onClick(function () {
            $w("#cuisineTags, #locationTags, #costTags").value = undefined;
            $w("#dataset1").setFilter(wixData.filter()).then(count);
        });
 
    }
 
    //COUNT ITEM
    function count() {
        let count = $w("#dataset1").getTotalCount();
        if (count > 0) {
            $w("#countText").text = `${count} items found`;
        } else { $w("#countText").text = `No item found`; }
 
        return count;
    }
 
    $w("#dataset1").onReady(function () {
        count();
    });
});

:tv:Please Subscribe, Like, & Share :point_right:t4::point_right:t4: YouTube

Facebook Page: WIX Ideas
Facebook Community Group: Wix Ideas Community | Facebook
Instagram: Wix Ideas (@wixideas) • Instagram photos and videos
Website: https://www.wixideas.com/
YouTube Channel: https://www.youtube.com/@wixideas

2 Likes

Did you use Repeater instead of Galery?
I trying to make this work but with a gallery ( on dynamic pages ).
I want to have a lot of filters, let’s say at least 5 to start.
Let’s say gallery ( database ) got has a lot of pictures of rooms(places ), so I need multiply filters that can be all used at the same time it is needed to find the exact specific image the user is looking for.
Any advice?


import wixData from ‘wix-data’;

$w.onReady(function () {

$w("#roomcategory, #capacity, #roomrating, #colortag, #languagetag").onChange(function () { 
    search(); 
} 

function search() { 

    let filter = wixData.filter(); 

    let roomcategoryIdx = $w("#roomcategory").selectedIndices; 
    let capacityIdx = $w("#capacity").selectedIndices; 
    let roomratingIdx = $w("#roomrating").selectedIndices; 
	let colortagIdx = $w("#colortag").selectedIndices; 
    let languagetagIdx = $w("#languagetag").selectedIndices; 
    
	let roomcategoryVal = $w("#roomcategory").value; 
    let capacityVal = $w("#capacity").value; 
    let roomratingVal = $w("#roomrating").value; 
	let colortagVal = $w("#colortag").value; 
	let languagetagVal = $w("#languagetag").value; 
	
    if (roomcategoryIdx.length > 0 || capacityIdx.length > 0 || roomratingIdx.length > 0) || colortagIdx.length > 0) || languagetagIdx.length > 0) { 

        filter = filter.hasAll("roomcategory", roomcategorysVal) 
            .and(filter = filter.hasAll("capacity", capacityVal)) 
            .and(filter = filter.hasAll("roomrating", roomratingVal)) 
			.and(filter = filter.hasAll("colortag", colortagVal)) 
			.and(filter = filter.hasAll("languagetag", languagetagVal)) 
        $w("#portfolioDataset").setFilter(filter) 
            .then(count) 

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

    $w("#resetfilters").onClick(function () { 
        $w("#roomcategory, #capacity, #roomrating, #colortag, #languagetag").value = undefined; 
        $w("#portfolioDataset").setFilter(wixData.filter()).then(count); 
    }); 

} 

//COUNT ITEM 
function count() { 
    let count = $w("#portfolioDataset").getTotalCount(); 
    if (count > 0) { 
        $w("#countText").text = `${count} rooms found`; 
    } else { $w("#countText").text = `No rooms found`; } 

    return count; 
} 

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

});