Velo by Wix Tutorial: How To Filter WIX Gallery Using Selection Tags User Input

Learn how to filter Wix gallery items with selection tags user input by the use of Velo by Wix development environment.

PREVIEW LIVE SITE | https://bit.ly/3sNt3Jy

Do you want to know how to filter your WIX Gallery element using WIX Selection Tags? Then this tutorial is for you. Follow me through this step-by-step process on how to;

1. Connect WIX Gallery(Pro Gallery) element to Database collection

2. Filter contents in your Gallery using WIX Selection Tags.

If you don't want to go further with the step-by-step, here's the code which you can copy and use on your website.

import wixData from'wix-data';       

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{

const selectedTag = $w('#selectionTagsID').value;
let filter = wixData.filter();

if(selectedTag.length >0){  
             
filter = filter.hasSome("FIELDKEY",selectedTag);

}

$w('#datasetID').setFilter(filter);

})

    });
    

In the remaining part of this tutorial, I will go step-by-step on how to incorporate this feature in your website.

To incorporate this code you only need to change few things, which are;

1. Selection Tags ID - #selectionTagsID

2. FIELDKEY - FIELDKEY

3. Dataset ID - #datasetID

Once you've done these, you can pretty much use the code for filtering your Table, Repeater and Gallery.

---

STEP-BY-STEP TUTORIAL

Step 1:

Create a database collection and add items to it. For my database called 'Restaurant', I added the following fields;

1. Title

2. Image

3. Cuisine

4. Location

Step 2:

Add and Connect WIX Gallery to Data. I connected only the following fields to my Gallery:

1. Title - Connected to gallery title

2. Image - Connected to gallery Image

3. Cuisine - Connected to gallery description

Step 3:

Add selection tags and add values from your database where you want to filter.

Note: I am filtering from 'Cuisine', a field in my database. And the two values from it are 'French' and 'Italian'

Then I added the values from this field to my selection tags options.

My values are;

1. French

2. Italian

THEY ARE BOTH CASE SENSITIVE WHEN ADDING THEM TO YOUR SELECTION TAGS' VALUES

Step 4:

Understanding The Code.

1. The first and foremost step in writing WIX code (Velo by WIX) when dealing with data from your database is importing the wixData.

import wixData from'wix-data';  //Step 1

2. Next, I called an onReady function. Sets the function that runs when all the page elements have finished loading.

import wixData from'wix-data';

$w.onReady(function(){ //Step 2

});

3. Since we are making use of Selection Tags, I added an onChange event that runs the piece of code within its curly brackets when the selections are changed.

import wixData from'wix-data';

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID //Step 3

});
    });

This event is added inside the curly brackets of the onReady function.

4. Then, I assigned a the value of the selected tag to a constant called "selectedTag" .

import wixData from'wix-data';

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID

const selectedTag = $w('#selectionTagsID').value;//Step 4

});
    });

I did this because I will utilize this constant inside my code later and will save me the time of writing "$w('#selectionTagsID').value" each time I need to use it.

5. Another assignment we did is the assignment for WIX filter function. Since we will be filtering our gallery, we will need to let the code know that's what we are doing.

import wixData from'wix-data';

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID

const selectedTag = $w('#selectionTagsID').value;

let filter = wixData.filter();//Step 5

});
    });
    

6. Now to the main part of the code. We want to let out selection tags run with the logic that when it is selected then step 5 should run with data from a specific field in out database.

import wixData from'wix-data';

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID

const selectedTag = $w('#selectionTagsID').value;

let filter = wixData.filter();

if(selectedTag.length >0){              //Step 6
filter = filter.hasSome("FIELDKEY", selectedTag);
}//

});
    });

Remember we assigned the value of the selection tags to a constant called 'selectedTag'. We may be needing that now.

As you may already know, the 'if' is a conditional block that let's our code choose what to do when certain conditions are met. Now, these conditions are within its brackets as shown below;

if(selectedTag.length > 0)

The condition can be explained simply as, if there is a selected tag then.. 0 stands for 'It is selected' while less than 0 stands for 'it is not selected'

Then what happens if the condition is met? Then we open two curly brackets and add what should happen.

{              
filter = filter.hasSome("FIELDKEY", selectedTag);
}

What should happen is the filter will occur but will find the data inside a field in our database. To find that field, we use the fieldkey of the specific field in our database. Learn more about fieldkey here.

7. Finally, we remind our 'filter' to go through our dataset in finding the data from our database.

import wixData from'wix-data';

$w.onReady(function(){

$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID

const selectedTag = $w('#selectionTagsID').value;

let filter = wixData.filter();

if(selectedTag.length >0){              
filter = filter.hasSome("FIELDKEY", selectedTag);
}//

$w('#datasetID').setFilter(filter);//Step 7

});
    });
    

So, that's it. We pretty much covered the basics of what we have to do. To incorporate this code you only need to change few things, which are;

1. Selection Tags ID - #selectionTagsID

2. FIELDKEY - FIELDKEY

3. Dataset ID - #datasetID

Once you've done these, you can use the code to filter your Table, Repeater and Gallery.

Thank you for reading up to this point. If you have further questions, you can post on forum or get in contact with us.