Use Selection Tags element with one option at a time without having to unclick the option?

Ask the community
, ,
1

Hi,

I am trying to have selection tags so that if someone clicks a tag, it only shows results for that tag without having to deselect it when changing to another tag.

Example: for my music site, you can see when you switch between kids, tense, lively etc you have to deselect them to make them go away: https://payment37.wixsite.com/candytunes

What I want it to do is so that when you click “Kids” it just shows kids music, then if they click “Tense” it just shows tense and they don’t have to unclick kids etc . If anyone has any suggestions I’d be very grateful :slight_smile: I think it might be possible with using the onChange function for the selection tags element but not good with the code.

I’ve pretty much done everything else to make this design work which I’m pleased about but this is the only thing left I need to sort out lol!

code:

import wixData from ‘wix-data’ ;
const collectionName = ‘Tracks’ ;
const fieldToFilterByInCollection = ‘trackName’ ;

$w.onReady( function () {

setRepeatedItemsInRepeater(); 
loadDataToRepeater(); 

$w( '#tag' ).onChange((event) => {

const selectedTags = $w( ‘#tag’ ).value;
loadDataToRepeater(selectedTags);
})
});

function loadDataToRepeater(selectedCategories = ) {

let dataQuery = wixData.query(collectionName);

if (selectedCategories.length > 0 ) {
dataQuery = dataQuery.hasSome(fieldToFilterByInCollection, selectedCategories);
}

dataQuery 
    .find() 
    .then(results => {

const itemsReadyForRepeater = results.items;
$w( ‘#repeater2’ ).data = itemsReadyForRepeater;
const isRepeaterEmpty = itemsReadyForRepeater.length === 0

if (isRepeaterEmpty) {
$w( ‘#noResultsFound’ ).show();
} else {
$w( ‘#noResultsFound’ ).hide();
}
})
}

function setRepeatedItemsInRepeater() {

$w( '#repeater2' ).onItemReady(($item, itemData) => { 
    $item( '#trackname' ).text =itemData.title; 
    $item( '#audioplayer149' ).tooltip = itemData.audio; 


})

}

2 
$w.onReady(function () {
 
    $w('#tag').onChange(()=>{
 let VALUE = $w('#tag').value
 let LENGTH = VALUE.length

        console.log(LENGTH)

 for (var i = 0; i < LENGTH-1; i++) {
 if(LENGTH>1) {
                VALUE.shift()
 
            }
 else{   }
            }
            console.log(VALUE)

        setTimeout(()=>{
            $w('#tag').value = []
            $w('#tag').value = VALUE
        },1)
    })
});

EXAMPLE:
https://www.media-junkie.com/selection-tags

Broken-Link-Repair:
https://www.media-junkie.com/one-way-selection-tags

1 Like
3

Thanks so much, it seems to be working. Not tested it fully yet though as my repeater is part of the code (above) but so far so good. Thank you very much :slightly_smiling_face:

4

@payment :wink:

5

Sorry 4 the broken link…
I have updated the link…
https://www.media-junkie.com/one-way-selection-tags

6

@russian-dima It didn’t work as it was showing multiple selections so I change hasSome to hasAll and I change the length values of your code to 0 instead of 1 and now it almost works!! for some reason the first time you use the menu selection doesn’t work then after it does, any ideas?

import wixData from ‘wix-data’ ;
const collectionName = ‘Tracks’ ;
const fieldToFilterByInCollection = ‘trackName’ ;

$w.onReady( function () {

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

let VALUE = $w( ‘#tag’ ).value
let LENGTH = VALUE.length

    console.log(LENGTH)

for ( var i = 0 ; i < LENGTH- 0 ; i++) {
if (LENGTH> 0 ) {
VALUE.shift()

        }

else { }
}
console.log(VALUE)

    setTimeout(()=>{ 
        $w( '#tag' ).value = [] 
        $w( '#tag' ).value = VALUE 
    }, 1 ) 
})

});

$w.onReady( function () {

setRepeatedItemsInRepeater(); 
loadDataToRepeater(); 

$w( '#tag' ).onChange((event) => {

const selectedTags = $w( ‘#tag’ ).value;
loadDataToRepeater(selectedTags);
})
});

function loadDataToRepeater(selectedCategories = ) {

let dataQuery = wixData.query(collectionName);

if (selectedCategories.length > 0 ) {
dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories);
}

dataQuery 
    .find() 
    .then(results => {

const itemsReadyForRepeater = results.items;
$w( ‘#repeater2’ ).data = itemsReadyForRepeater;
const isRepeaterEmpty = itemsReadyForRepeater.length === 0

if (isRepeaterEmpty) {
$w( ‘#noResultsFound’ ).show();
} else {
$w( ‘#noResultsFound’ ).hide();
}
})
}

function setRepeatedItemsInRepeater() {

$w( '#repeater2' ).onItemReady(($item, itemData) => { 
    $item( '#trackname' ).text =itemData.title; 
    $item( '#audioplayer149' ).tooltip = itemData.audio; 


})

}

7

Thanks guys, exactly what I was looking for. The only thing is that the UI works, but when I switch selection tag it “remembers” the second last tag filtering.

EG I click on “kid music”, it filters correctly the repeater by kid musci, then I click on “heavy metal”, the UI element kid music deselects automatically, but the repeater shows both kids music and heavy meal. If then I clicn on “clssic music” the repeater shows heavy metal and classic music. Ideas on how to get it sorted? Thanks! :slight_smile:

8

You surely will use a connected —> DATASET and use the Wix-UI to do some filtering process. Not sure if UI+DATASET can handle modified → Selection-Tags

I would suggest you to do it by CODE.

As you can see…


…the (one-value) selection-tags works just fine!

Take a look into console!:wink:

9

@russian-dima Thank you so much! WIll definitely have a look!

10

@russian-dima Hi, I am also having the same issue where I’m still seeing content from the previous tag selection. I haven’t used Wix-UI for the dataset (as far as im aware) here is my current code:

import wixData from 'wix-data';

const collectionName = 'AllGames';
const fieldToFilterByInCollection = 'gameType';


$w.onReady(function () {

    setRepeatedItemsInRepeater();
    loadDataToRepeater();

    $w('#gametags').onChange((event) => {
 const selectedTags = $w('#gametags').value;
        loadDataToRepeater(selectedTags);
    })
});

function loadDataToRepeater(selectedCategories = []) {

 let dataQuery = wixData.query(collectionName);

 if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasSome(fieldToFilterByInCollection, selectedCategories);
    }

    dataQuery
        .find()
        .then(results => {
 const itemsReadyForRepeater = results.items;
            $w('#allgamerepeater').data = itemsReadyForRepeater;
 const isRepeaterEmpty = itemsReadyForRepeater.length === 0

 if (isRepeaterEmpty) {
                $w('#noResultsFound').show();
            } else {
                $w('#noResultsFound').hide();
            }
        })
}
 
function setRepeatedItemsInRepeater() {
 
    $w('#allgamerepeater').onItemReady(($item, itemData) => {
        $item('#text153').text =itemData.title;
        $item('#image14').src = itemData.image;
        $item('#image14').tooltip = itemData.title;
    })
}

$w.onReady(function () {
 
    $w('#gametags').onChange(()=>{
 let VALUE = $w('#gametags').value
 let LENGTH = VALUE.length

        console.log(LENGTH)

 for (var i = 0; i < LENGTH-1; i++) {
 if(LENGTH>1) {
                VALUE.shift()
 
            }
 else{   }
            }
            console.log(VALUE)

        setTimeout(()=>{
            $w('#gametags').value = []
            $w('#gametags').value = VALUE
        },1)
    })
});

Any thoughts on where I’ve gone wrong would be greatly appreciated.

11

Sorry for the very late ANSWER!

UPDATED!
https://www.wix.com/velo/forum/coding-with-velo/allow-only-1-selection-tag-on-dynamic-page

12

Hello, you mean by putting this code it will work for the selection tags to sort it out?