How To Filter WIX Gallery Using Selection Tags.

walterodibi · April 1, 2021, 2:27pm

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

Hi guys, in this short tutorial, I will show you how to display database content on a Gallery element and then filter the gallery using Selection Tags

Step 1:

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

Title
Image
Cuisine
Location

Step 2:

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

Title - Connected to gallery title
Image - Connected to gallery Image
Cuisine - Connected to gallery description

Step 4:

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 into my selection tags options.

My values are;

French
Italian

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

Step 3:

I then added my code.

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

    }) 
});

Final Code

In my code, you only need to change 3 items and you are ready to go.

The following are the list of items you should replace with yours;

#selectionTagsID
FIELDKEY - This is the fieldkey of the field where we are filtering from(#cuisine)
DatasetID - #datasetID

Please Subscribe, Like, & Share YouTube

REFERENCES: value - Velo API Reference - Wix.com
STEP BY STEP: https://www.bizimuhit.com/post/how-to-filter-wix-gallery-using-selection-tags

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

russian-dima · April 1, 2021, 4:27pm

Well done! Some new idea for my project, thanks!

walterodibi · April 1, 2021, 7:45pm

@russian-dima Thank you

suneelkaith · October 13, 2021, 7:06pm

Thanks Buddy

walterodibi · October 14, 2021, 1:27am

@suneelkaith You are welcome

william71901 · November 5, 2021, 8:24am

Hi, this is exactly the solution i needed. But, i am getting some issues – several of my tags are always active. when i press others i dont get a proper selection. In the dev console i am getting the message: cannot update field values: index not found

I have already set the dataset to “read and write” - any other suggestions?

walterodibi · November 5, 2021, 8:57am

Hi William, thanks for your comment. This example is “Read-only” since we are simply displaying items and not saving to our database. Does your code work regardless of this error?

william71901 · November 5, 2021, 9:00am

thanks for your swift reply! When i use “read-only” the tags become unselectable (grey in my case). you can see the preview here at

walterodibi · November 5, 2021, 9:14am

Hi William, I see what went wrong. You don’t have to connect your selection tags to data because it is a write-only element. You only need to connect your Gallery element, which I think you did well, then you need to add the values from your database to your selection tags. The rest is taken care of in the code.

Cheers!

william71901 · November 5, 2021, 9:19am

@walterodibi great stuff, worked like a charm! you’re the boss

walterodibi · November 5, 2021, 11:09am

@william71901 Glad that worked!

patrizia · November 12, 2021, 7:50am

@ Walter Odibi
Hi Walter. Thank you for this code, it works great on my page.
When I enter the site, there a no items shown until I select a tag. But I would like to see every item and have the selection only when selecting a tag. May you help me with this issue?

walterodibi · November 15, 2021, 6:20am

Hi Patrizia, this could be because your repeater is hidden on load.

patrizia · November 15, 2021, 7:25am

Thank you, Walter. The repeater is not hidden on load. Have a look: https://tripunkt.wixsite.com/sfholzbau/referenzen I don’t know why the elements are not showed…

walterodibi · November 15, 2021, 1:57pm

@patrizia I checked it out and did notice that the gallery is hidden when the page loads. This could be a server problem. You might want to reach out to WIX for this issue https://www.wix.com/contact

patrizia · November 15, 2021, 2:45pm

@walterodibi Thanks a lot!

jeffrey-horne · December 30, 2021, 4:50am

@walterodibi Thank you for this! I followed the steps in the video exactly, and it’s working for me. I used Tags as the basis for my filtering, so I could assign more than one tag per image.

I’m looking to make this so that when a user clicks one of my “filters”, it shows only images for that “filter”/tag. Currently, if a user selects more than one “filter”/tag, it shows images for multiple “filters”/tags. I just want the user to be able to select one “filter” at a time, so it only displays one filter/tag at a time for the user.

Is this possible? I tried the code on the following link, but I couldn’t figure it out because it uses a lot of “repeater” code (take out the spaces after the domain and before the .com, my account is too new to post links) … https://www.wix . com/velo/forum/coding-with-velo/use-selection-tags-element-with-one-option-at-a-time-without-having-to-unclick-the-option

Here is my URL: https://www.alisonbryantevents . com/inventory

The code I used is:

import wixData from 'wix-data';   

$w.onReady(function () {       

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

const selectedTag = $w('#selectionTags1').value;           
let filter = wixData.filter();  
         
if (selectedTag.length > 0) {             
filter = filter.hasSome("newField", selectedTag);         
}           

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

    }) 
});

Thank you so much for this…it’s been a huge help already!

walterodibi · December 30, 2021, 4:59am

Hi Jeff, thank you for watching my video

Here is a code I used for a similar process. You only need to change the fieldkey, collection ID, and elements’ IDs

import wixData from 'wix-data';

const databaseName = 'fieldKey';
const databaseField = 'collectionID';

$w.onReady(function () {

    //SELECT ONE TAG AT A TIME AND FILTER WITH THAT TAG 🎉✨
    $w('#selectionTags1').onChange((event) => {
        const selectedTag = $w('#selectionTags1').value;

        for (var i = 0; i < selectedTag.length - 1; i++) {
            if (selectedTag.length > 1) {
                selectedTag.shift();

            }
        }

        setTimeout(() => {
            $w('#selectionTags1').value = [];
            $w('#selectionTags1').value = selectedTag;

            addItemstoRepeater(selectedTag);
        }, 1)

    });

    function addItemstoRepeater(selectedOption = []) {

        let dataQuery = wixData.query(databaseName);

        if (selectedOption.length > 0) {
            dataQuery = dataQuery.hasSome(databaseField, selectedOption);
        }

        dataQuery
            .find()
            .then(results => {
                const filtereditemsReady = results.items;
                $w('#repeater8').data = filtereditemsReady;

            });
    }

    //SHOW ALL RESULTS/RESET SELECTION 🤩
    $w("#resetButton").onClick(function () {
        $w("#dataset1").setFilter(wixData.filter());
        $w('#selectionTags1').value = [];
    });

});

Cheers!

cameron-vokey · May 18, 2022, 2:56am

Worked for me. Nice job.

carolannblais · August 24, 2022, 6:15pm

Thank you so so much! You made my day