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,
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
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.