PROBLEM: using selection tabs as a filter for a portfolio

Ask the community
, ,
1

Question:
I am trying to use selection tabs as a filter on my portfolio which is pulling from a dataset with categories, however I only want to be able to click 1 at a time and have the page refresh, and the relevant project thumbnails regroup to the top.

Product:
Wix Studio

What are you trying to achieve:
How do I get the selection tab to only allow one selection at a time while refreshing the thumbnails to the top.

What have you already tried:
I have already tried this youtube tutorial and it does not properly refresh and push the thumbnails to the top (https://www.youtube.com/watch?v=3xnk8RZTF8Q&t=927s)

2

This will update the value of the selection tags to only include this last selected value.

    let selectedValues = $w('#selectionTags1').value;

    if (selectedValues.length > 0) {
        const lastSelectedValue = selectedValues[selectedValues.length - 1];
        console.log("Last selected value:", lastSelectedValue);
        $w('#selectionTags1').value = [lastSelectedValue];
    }});
3

Thank you for this however I am not very experienced with code. This is what I’m currently using. Which part would your code replace?

import wixData from ‘wix-data’;
$w.onReady(function () {
let index;
$w(‘#selectionTags1’).onChange(() => {
let selectedIndices = ;
let selectedTag = ;
selectedIndices = $w(‘#selectionTags1’).selectedIndices;
if (selectedIndices.length > 1) {
let a = selectedIndices.pop();
$w(‘#selectionTags1’).selectedIndices = [a];
selectedTag = [a];
} else {
selectedTag = selectedIndices;
}
let filter = wixData.filter();
$w(“#dataset1”).setFilter(filter);
if (selectedTag.length > 0) {
const val = $w(‘#selectionTags1’).value;
filter = filter.hasSome(“arraystring”, val);
$w(‘#dataset1’).setFilter(filter);
} else {
console.log(selectedTag);
}
})
});