use Selection tags with "or" condition

Hello,

I’m filtering my repeater based on selected items in a Selectiontags element.
I can’t figure how to use the clicked items as “or” condition.
Whereas by default it seems to be “and” condition.
Please give me a hint.

Hello bobargo,
can yu give us a bit more information and the code that u are using?
this makes it easyer for us to understand what you need and what you already have.

Kind regards,
Kristof

Sure,
I use the example code I found here on the website to connect the Selectiontags to the repeater (thou I think I have pieces in the code which I don’t need). So with this code, several selectionTags elements can be in “selected” mode at the same time, and it filters repeater with “and” condition; Meaning: I have “fashion” and “cooking” tags. When both selected repeater shows no items at all. I’m trying to get to a point when I repeater would show me items which have “fashion” or “cooking” tags in the corresponding column.

I do part of the work in the interface, other part in DevMode, and don’t clearly understand what overrides?

import wixData from ‘wix-data’ ;

const collectionName = ‘masters’ ;
const fieldToFilterByInCollection = ‘tags’ ;

$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.hasAll(fieldToFilterByInCollection, selectedCategories);
}

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

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

    }) 

}

<<For example, I don’t understand what does these lines mean inside of the function, Not sure if I need them at all.>>
function setRepeatedItemsInRepeater() {

$w( '#repeater2' ).onItemReady(($item, itemData) => { 
    $item( '#recipeImage' ).src = itemData.image; 
    $item( '#recipeImage' ).tooltip = itemData.recipeName; 
    $item( '#recipeName' ).text = itemData.recipeName 
    $item( '#chefName' ).text =  'By '  + itemData.chefName; 

}) 

}

Oke i took a look at your code and i think i might have found the solution.

first of all, you have this piece of code

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

Go to your seletionTags1 element and open the properties (right click → properties)

Go to the onChange event and name it, press oke and it will make a piece of code for it.
add your code inside it
it should look something like this:

export function selectionTags1_change(event) {
 const selectedTags = $w('#selectionTags1').value;        loadDataToRepeater(selectedTags); 
})

also, try to log your data so you know what is passed trough.
do:
console.log(selectedCatagories)
right before dataQuery to see if you have the right value passed.

then about this piece of code:

function setRepeatedItemsInRepeater() {
$w('#repeater2').onItemReady(($item, itemData) => {        $item('#recipeImage').src = itemData.image;
$item('#recipeImage').tooltip = itemData.recipeName;        $item('#recipeName').text = itemData.recipeName
$item('#chefName').text = 'By ' + itemData.chefName;    
})}

it means, when the repeater is loaded (on.itemReady)
it will use the
itemData.image and put it to the imageSource of recipeImage
itemData.recipeName and add it as a tooltip to the image
itemData.recipeName will change the text of recipeName
and itemData.chefName will change the text of chefName.

it has to be in the onItemReady so it can loop trough all the items and add it to the right element in the repeater.

Kind regards,
Kristof

Thanks, I did what you suggested. But my main goal is not reached.
Seems to me that onClick, some sort of array must record it,
and then on data query, select all items in the DB which contain at least one item of the array.

my log
that console.log($w( “#selectionTags1” ).value);

shows very promising

Array(2)
json Table Copy JSON

0:
“all”

1:
“cooking”

It means all I need to do is data Query part

Oke thats good,
If you want i can always go take a look myself?
you can make a copy of your website, and make me a contributor.
this way i can’t mess up your main website
[zanika.be](website.
zanika.be) @gmail.com to make contributor

kind regards
kristof.

mmm, for a fee?
sorry, I’m not following.

A contributor is someone that can access the website.
so if you make me a contributor of your website (a copy of it if you want)
then i can access your website and see what is going wrong.

i don’t need a fee for it :slight_smile:

kind regards,
Kristof.

That’s very nice of you. Come in

Sorry seems like i gave my gaming email insteaed of my email i use for wix [--"](--"
kristof.print3d@gmail.com)
[kristof.print3d@gmail.com](-_-"
kristof.print3d@gmail.com) should be the right one

let me know when you added this email as a contributor

just did

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

Look, here I tried to use “contains” instead of “hasAll”
didn’t help)

I don’t see any notification about you adding me as a contributor.


The fact that my email is red means that i already have access to it (since its my website it will always be red with my own email ;))
give prermission to edit the website (don’t need to be able to access anything else)
and then send invite.