Hi everyone,
as a freelancer, I am currently creating a list of projects for my website (please note: I have no coding experience / skills whatsoever).
Now, for these projects, I want my website visitors to be able to filter by a) industry (e…g retail, life sciences, …) and b) function (e.g. operational excellence, due diligences, …).
I already have
- created a collection of projects in the content manager (with one column with tags for industry and one column with tags for function, respectively)
- displayed the projects on my website with a repeater
- even already added one selection tags filter with this tutorial (I just copy pasted the code they link to here) - to be honest, I was a bit disappointed that I had to use code at all for what I was considering a basic feature
Anways, now I somehow still need to
4. add the second filter at the same time (for example, I want visitors to be able to not only filter by e.g. “operational excellence”, but for e.g. “operational excellence” projects in “retail” industry at the same time). I hope I could express myself in a way that you understand what I mean?
Problem: I have no idea how to do that, and I have no coding skills to write any piece of code myself 
Therefore, a big request for help out there, if anyone could maybe provide me with the bit of code to implement this, together with some newbie-friendly instructions (step 1, 2, 3, … in easy words)? This would be greatly appreciated … If I should be mistaken and in contrast to my belief such a filter - or two filters - can be implemented in Wix without code, also please let me know of course, that’d be great.
Thanks in advance!
Best,
Steffen
Hello, any idea, anyone? 
Thanks a lot for any help, or any comment, even!
Can you show the structure of your DB ?
Title + first data row of your DB.
Hi Dima! Of course:
The columns Industry and Functions are the ones I’d like to use for the two separate selection tag filters.
Please delete the —> double-post.
In the meanwhile i will prepare something 
Really appreciate Dima, looking forward 
By the way, this is just a screenshot from the preview to show you how it looks so far and what is still missing (the grey tile is a hover effect)
And here, some kind of another way of doing, by using checkboxes…(es ist im Grunde genommen das selbe).
Take a look here onto this example… (follow the original post to get more info)
https://www.media-junkie.com/pflegeservice
I have already setted-up your DB for you.
Choose DB-Preset-1:
More information about this Filter-Tool, you will get when you take a look into all given posts and examples to this interactive-filter-example (press → DATABASES).
And also see references like:
-
https://www.wix.com/velo/reference/$w/selectiontags
https://www.wix.com/velo/reference/$w/selectiontags/selectedindices
-
https://www.wix.com/velo/reference/$w/checkboxgroup
https://www.wix.com/velo/reference/$w/checkboxgroup/selectedindices
Hi Dima,
I took a first look at what you posted, but I realized this will take me several hours to go through properly and understand.
Thanks a million though, your help is very appreciated 
And I have hope now I’ll be able to solve my challenge here with your inputs!
@steffenschink
Yes, there are a lot of informations to find, in the given examples.
If you should need more help, write your question here.
Good luck.
Hi again,
before I go through that in detail, I have two other questions:
1) For some reason, the order of repeater elements changes once I select a selection tag. How do I prevent this?
See, in the beginning (without selecting a filter), OC&C projects are at the bottom (I sorted the dataset from new to old)
But for some reason, after selecting a filter, OC&C projects are at the top…
2) How do I change the selection tag filter logic from “OR” to “AND”?
If you compare with the previous picture: if I select an additional filter, the repeater elements become more (“OR” logic), not less (“AND” logic) as I would like it to be.
The code is still the one linked to in the abovementioned YouTube Tutorial (the forum does not allow me to post the link directly, for some reason…)
Thanks so much for any answers or feedback…
Will come back later (my Wix-Editor is offline, seems to be like wix do some updates). Will reply tomorrow.
1) For some reason, the order of repeater elements changes once I select a selection tag. How do I prevent this?
2) How do I change the selection tag filter logic from “OR” to “AND”?
Are you using a connected dataset in both use-cases, or do you use CODE?
Or do you even do mix them ?
I am not sure, but if you want to get your goal onto your project, i think you will be forced to do everything with/by CODE.
If i am wrong please correct me (@Yisrael, @J.D. @Giri Zano)
Hi Dima,
I used the code from the YouTube tutorial above (just copy pasted the code and adapted names of collection, fields etc. a s described in the video)
The repeater is connected to the data set, the selection tag filter is not (as you can see in the screenshot below)
Was this your question? And what’s the conclusion, or solution even?
Bitte stelle mir den CODE zur Verfügung, sodass ich diesen nicht gezwungener Maßen selbst abtippen muss.
Please use a CODE-Block and make the shown code available to be able to work with it. I do not really want to retype all that code by my own.
Hi Dima,
didn’t think about that, sorry. Thanks in advance! This is how it looks so far:
import wixData from ‘wix-data’ ;
const databaseName = ‘Projects’ ;
const databaseField = ‘tags’ ;
$w.onReady( function () {
$w( '#selectionTags1' ).onChange((event) => {
const selectedTag = $w( ‘#selectionTags1’ ).value;
addItemstoRepeater(selectedTag);
})
});
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0 ) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w( ‘#repeater1’ ).data = filtereditemsReady;
})
}
Hello again,
i see often people have issues when using DATASETs which are connected to DB and also connected trough code. —> This is not the best combination and often causes unexpected errors/issues.
I would suggest you either using code or completely without code.
But as i can assume, your aim perhaps can’t be reached without using code, that means, you should take the code-version.
Doing everything by code.
And also after i have took a look onto the given CODE, i recognize that you also use wix-data and datasets, which is also not the best idea (to mix them).
Either you continue using just dataset + code, or you switch to wix-data and use queries, without any dataset (this way would be the more flexible one, but would also require more coding-skills).
Try to implement the sort by CODE and deactivate the sort-function in the Wix-UI
https://www.wix.com/velo/reference/wix-dataset/dataset/setsort
When you have read all the related posts (especialy the original post) of my given “interactive-example”, then you also would recognize, that i also started to develop my “Filter-Tool” by using datasets, but recognized quickly, that a usage of queries (wix-data) would be the better way to go → [much more flexible].
If i am wrong → someone should correct my statements. THX.
By the way, forgot to mention: Please use CODE-BLOCKs when you are showing CODE-SNIPETS. 
I just fixed the first issue by the way, without coding knowledge, just by experimenting: somewhere in the code it says “hasSome” → change that to “hasAll” and you are good!
Now I am just left with the first issue, why it changes my sort logic when using the filter…
Hi Steffen Schink. I think this solution might work.
I did two things;
Firstly, I added a function that sorts my dataset by date from New to Old
function restoreData() {
$w("#dataset1").setSort(wixData.sort().descending('_createdDate'));
}//End
Secondly, I added an ‘else if’ block that calls my function when the selectedIndices is nothing (0)
else if (selectedCategories === 0) {
restoreData();
}
Final Code
import wixData from'wix-data';
const databaseName = 'Projects';
const databaseField = 'tags';
$w.onReady(function () {
$w('#selectionTags1').onChange((event) => {
const selectedTag = $w('#selectionTags1').value;
addItemstoRepeater(selectedTag);
})
//I added this function to sort date from New to Old
//Start
function restoreData() {
$w("#dataset1").setSort(wixData.sort().descending('_createdDate'));
}//End
});
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
} else if (selectedCategories === 0) { //Else If Block
restoreData();
}
dataQuery.find().then(results => {
const filtereditemsReady = results.items;
$w('#repeater1').data = filtereditemsReady;
})
}
});
Try this and see if it works.
Note: I cleared the sort in my dataset so it doesn’t interfere with my code.
let me know if this works.
Hi! I will try this in a few hours when I am at my private computer. Thanks so much in advance
PS with “cleared the sort in my dataset so it doesn’t interfere with my code” you mean that I should not only copy paste the code but also take out the sorting from the dataset in the Editor (if that’s possible)?
