Multiple Selection Tags Filter using Velo by WIX🎉

[walterodibi]

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

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

Please Subscribe, Like, & Share YouTube

Multiple Selection Tags Filter in WIX😲 | EASY STEP-BY-STEP | Wix Ideas

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();
    });
});

Please Subscribe, Like, & Share 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

[toci777]

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(); 
}); 

});

---

[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???