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
1. created a collection of projects in the content manager (with one column with tags for industry and one column with tags for function, respectively)
2. displayed the projects on my website with a repeater
3. 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
Hi Steffen,
I am trying to apply the sort to my repeater and having the same issues as yourself. I feel like we are on the same wavelength with coding. I have tried to get to grips with it but had not luck especially with all the trial and errors.
I was wondering whether you managed to find a solution for the items rearranging?
Many thanks,
Priyanka
Hi there! I tried it (i.e. I deleted the dataset's sorting and then copy pasted the above code). However, it would not show anything in the Preview and in the Dev Console it says there is an error in line 8:
This is all cryptic to me.. Any ideas?
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)?
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.
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 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; }) }
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,
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? :-)
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...
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!
Ohh ok, i think this example here...
https://russian-dima.wixsite.com/meinewebsite/filter-my-phones
could help you a lot.
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)
Hi Dima! Of course:
The columns Industry and Functions are the ones I'd like to use for the two separate selection tag filters.
Hello, any idea, anyone? :-( Thanks a lot for any help, or any comment, even!