Filtering a repeater with multiple tag fields with selection tags

Ask the community
,
1

Hi there Velo Coders,

I’m seeking your wisdom to achieve a filter using multiple selection tags for a song catalogue. I’ve read through many posts but have not yet found a solution.

Here is the index of tags at the page header. Each row has its own ID.

2070×676 94.5 KB

And here is how they are organised in the data collection, as individual tag categories

1742×324 30.6 KB

I would like to code my page to filter the songs in the repeater using the range of fields - by:

  1. season, 2. liturgy, 3. sacrament, 4. saints 5. artist

With the values listed in the rows as displayed in the index above - currently set-up as 5 separate selection tag groups.

I’ve managed to get just one field working. How can I get the other fields interacting? Of course I could put all the values into one field and use one selection tag group - and might have to do this - but a work around will allow me to keep the page layout set-up in neat categorised rows and the dataset collection with multiple fields helps with some practicalities

I’d also like for the repeater to be hidden and appear when tags are selected.

Any thoughts? Here is the code:

import wixData from ‘wix-data’ ;

const collectionName = ‘Songs’ ;
const fieldToFilterByInCollection = ‘season’ ;

$w . onReady ( function () {

setRepeatedItemsInRepeater () 
loadDataToRepeater () 

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

const selectedTags = $w ( ‘#selectionTags1’ ). 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 ( ‘#repeater1’ ). data = itemsReadyForRepeater ;
const isRepeaterEmpty = itemsReadyForRepeater . length === 0

    })

}

function setRepeatedItemsInRepeater ( ) {
$w ( ‘#repeater1’ ). onItemReady (( $item , itemData ) => {

    $item ( '#image' ). src  =  itemData . image ; 
    $item ( '#image' ). tooltip  =  itemData . image ; 
    $item ( '#title' ). text  =  itemData . title 

})

}

2

I’m not sure if I completely understand what you are asking, but perhaps something like this:

If each row has it’s own id then onClick save the selection from that row in a variable AND complete your filter.
Then, if the user clicks on row 2, check your row1 variable - if it’s empty, filter by row 2 only. If there is a value in it, then filter by both and so on…

I’m not sure if this is what you mean or not, but basically it sounds like you need to save each selection the user makes to build your filter.

As for the repeater, if you set it to an empty array in the onReady function, it will be blank (hidden) until you populate it with data.

3

Hi Amanda (the Amazing),

Thanks so much for your reply.
While I was waiting for a reply I managed to get the tags working.

Here is the code:
import wixData from ‘wix-data’ ;

$w . onReady ( function () {

$w ( "#seasonTags, #liturgyTags, #sacramentsTags, #saintsSolemnitiesFeastDaysTags, #artist1Tags" ). onChange ( **function**  () { 
    search (); 
}); 

**function**  search () { 

    **let**  filter  =  wixData . filter (); 

    **let**  seasIdx  =  $w ( "#seasonTags" ). selectedIndices ; 
    **let**  litIdx  =  $w ( "#liturgyTags" ). selectedIndices ; 
    **let**  sacIdx  =  $w ( "#sacramentsTags" ). selectedIndices ; 
    **let**  saiIdx  =  $w ( "#saintsSolemnitiesFeastDaysTags" ). selectedIndices ; 
    **let**  artIdx  =  $w ( "#artist1Tags" ). selectedIndices ; 

    **let**  seasVal  =  $w ( "#seasonTags" ). value ; 
    **let**  litVal  =  $w ( "#liturgyTags" ). value ; 
    **let**  sacVal  =  $w ( "#sacramentsTags" ). value ; 
    **let**  saiVal  =  $w ( "#saintsSolemnitiesFeastDaysTags" ). value ; 
    **let**  artVal  =  $w ( "#artist1Tags" ). value ; 

    **if**  ( seasIdx . length  >  0  ||  litIdx . length  >  0  ||  sacIdx . length  >  0  ||  saiIdx . length  >  0  ||  artIdx . length  >  0 ) { 

        filter  =  filter . hasAll ( "season" ,  seasVal ) 
            . and ( filter  =  filter . hasAll ( "liturgy" ,  litVal )) 
            . and ( filter  =  filter . hasAll ( "sacraments" ,  sacVal )) 
            . and ( filter  =  filter . hasAll ( "saintsSolemnitiesFeastDays" ,  saiVal )) 
            . and ( filter  =  filter . hasSome ( "artist1" ,  artVal )) 

        $w ( "#dataset1" ). setFilter ( filter ) 
            . then ( count ) 

    }  **else**  { 
        $w ( "#dataset1" ). setFilter ( filter ) 
            . then ( count ) 
    } 

    $w ( "#resetfilter" ). onClick ( **function**  () { 
        $w ( "#seasonTags, #liturgyTags, #sacramentTags, saintsSolemnitiesFeastDaysTags, #artist1Tags" ). 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 (); 
});

});
Setting the repeater to blank is where I’m at. Please forgive my ignorance - I’m not sure what and where the code needs to go to set the repeater to empty. Please could you explain this to me. And I’ll keep looking into it in the meantime - maybe I’ll find it.

I’ve also added a search bar. Again, please, how do I code it to search the dataset and display results in the repeater.

Thank you for all you do and sharing your gift.
Peace,
Tim.

4

Hi Tim! Sorry for the delay, I was on vacation for a few days.

To set the repeater data to empty, in the onReady function you can do this:

$w ( “#myRepeaterID” ). data = ;

There are some tutorials on populating a repeater from data that may point you in the right direction for your own dataset. Please take a look at these:

Forum tutorial example
youTube tutorial for filtering by dropdown (not a search bar, but conceptually similar)

And finally, this is likely the API reference you are looking for. WixData Query. You can query your collection and it will return results to you

WixData Query API