Remember the users filter selection

Ask the community
,
1

Hello, I searched the forums for this but can’t seem to find anyone who’s posted about this before so I’ll give it a try.

I have a repeater connected to a database and have filters set up using dropdowns. Everything is working great but the issue we’re facing is that the filter options gets reseted every time the user comes back to the page.
To explain it better the process is like this: The user filters the database, finds an item they want to read up on, clicks on the item, goes to the dynamic page and when they finished reading they then click “go back” to get back to the repeater. When they get back to the repeater page the filter options resets so the user has to set all the filters again to see the results they are looking for. My questions is if it’s possible to make it so the website remembers what filter selections the user selected and keep filtering the repeater like that until the user resets the filter manually or a “sessions time” ends (maybe we should set it to a certain time, like reset after 15 minutes or so?).

I’d very much appreciate any help.
Best regards,
Joe

2

You can store the selection in the memory or the browser cache and once the user reenters the page, retrieve the value and use it to filter.
See:
https://www.wix.com/corvid/reference/wix-storage.html

3

Thank You for your reply J.D.,

I’m afraid I’m not sure how to implement this in my code, could you possibly help me out with some example codes so I know how to implement them on our site?

Looking forward to your reply. Many thanks!

4

Hi Joe, here’s code you could use. In this example, Dataset1 is used as a filter for another dataset. The session storage saves the settings. ‘session’ could also be saved to ‘memory’ for a shorter term storage.

import {session} from 'wix-storage';

export function dataset1_currentIndexChanged() {
    let currentindex = $w('#dataset1').getCurrentItemIndex()
    $w('#text1').text = $w('#text1').text + "s" + currentindex
    session.setItem("selectedentry", currentindex);
}

export function dataset1_ready() {
    let selectedindex = Number(session.getItem("selectedentry"));
    $w('#text1').text = $w('#text1').text + "l" + selectedindex
    $w('#dataset1').setCurrentItemIndex(selectedindex)
}

Note that the lines starting with $w(‘#text1’) can be omitted. I have used the text1 item to check when the selecteditem is loaded and saved. It turns out that sometimes it’s loaded, saved and then loaded again on one single page load. I’m not sure what’s the best way to prevent multiple loads/saves but the code works, anyway.

5

Hello verbaldancing,
Thank you for your help. I tried your code but I’m afraid it still dosen’t seem to remember the filter options set by the user via dropdowns.

I changed the code to match the ID of the dataset and I also made sure that the dataset has event handlers for onReady and CurrentIndexChanged but still no luck.

What I need it to do is basically this: When a dropdown is changed (user selects an option) it should store the current Dataset filter in the memory. Once the user comes back to the page I want the dataset to set it’s filter to be what’s in the storage when the page and dataset are ready. Maybe there is a different solution to this? I checked the documentation but couldn’t find anything that makes the memory store the current dataset filter. Any further ideas?

Many thanks!

6

Here’s an example that remembers the user’s search .

7

Hi Joe, can I ask you something about your page? Do you have two datasets where one filters the other? Or is it one dataset which is directly filtered by the dropdown? Thanks, Michiel

8

@verbaldancing Hey Michiel, it’s one dataset filtered by the drop down. I have several drop downs that each filter via onChange event handler. Meaning each drop down has it’s own event listener.
Thanks! =)

9

Thank you Yisreal, I’ve looked everywhere. Many thanks!

10

@josef my code was for a setup with two datasets, where one is filtered by the other. Hence it gets and sets the dataset that acts as a filter, based on the saved selection. You probably need a different code, which gets and sets the dropdown not the dataset.

11

@verbaldancing I undertand, well in that case I’ll take a look and see if I can understand anything from Yisraels example. =)

Many thanks for your help!

12

OK if you can’t figure it out just post another message

13

Hey @josef , the main idea behind the example is that the filter information is saved using wix-storage . Just follow the example’s use of wix-storage to save the details of the user’s search.

14

Hello again Yisrael,
So I looked at the example but I’m afraid I didn’t understand how to implement it 100%. In the example there is a different method used to filter.

Your example filter method is coded like this:

export function iContinent_change(event, $w) {
filter(lastFilterTitle, $w('#iContinent').value);
}
function filter(title, continent) {
if (lastFilterTitle !== title || lastFilterContinent !== continent) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('articleTitle', title);
if (continent)
newFilter = newFilter.contains('continent', continent);
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterContinent = continent;
}

I’m afraid I’m not familiar with this way of setting the filter. I instead use this method:

export function filterFordonstyp_change(event) {
$w('#bilarDataset').setFilter(wixData.filter().eq('aktiv', true)
    .contains('fordonstyp', $w('#filterFordonstyp').value)
    .contains('marke', $w('#filterBrand').value)
    .contains ('drivmedel', $w('#filterPower').value)
    .contains('vaxellada', $w('#filterGearSystem').value)
    .between('saljpris2', parseFloat($w('#filterPrisfran').value),         
    parseFloat($w('#filterPrisTill').value))
    .between('fordonsar', parseFloat($w('#filterYearFrom').value), 
    parseFloat($w('#filterYearTo').value))
    .between('mital', parseFloat($w('#filterMilesFrom').value), 
    parseFloat($w('#filterMilesTo').value))
)
.then((results) => {
console.log('Dataset has been filtered');

if ($w("#bilarDataset").getTotalCount() === 0) {
$w("#txtNoResult").show();
$w("#carProductList").data = results.items;

} else {

$w("#txtNoResult").hide();
}
})
.catch((err) => {
console.log(err);
});
$w('#carProductList').expand();
}

The code looks exactly the same for all other onChange events for every drop down on the page. How can I implement the “remember function” to my code? Or do I need to rebuild the code so it uses the same method as in your example?

Your code looks much cleaner and simpler than mine, however, I’d prefer if I didn’t have to redo the entire code if possible.

Many thanks in advance!

15

@josef It’s not so important how you set the filter - as long as it works.

What you need to take care of is saving the filter details, and then loading the filter details when needed later.

For example, this filter line:

.contains('fordonstyp', $w('#filterFordonstyp').value)

You can save the value like this:

local.setItem("Fordonstyp", $w('#filterFordonstyp').value);

And you can then restore it later like this:

let prevFordonstyp = local.getItem("Fordonstyp");

You will need to save all of the filter details at the end of the filter() as I demonstrate in the example. And then, as in the example, you will need a loadPrevSearch() function to load the previous search details and apply the filter to the dataset.

16

Hello Yisrael and verbaldancing,

Thank you both for your guidance and help. I’ve managed to get it working now.

In my case it was a little complicated (at least for me) because I had a lot of filters on my page. So I added one function that saves to storage and one that gets from the storage for each and every filter individually.

The process is to long to describe here but if anyone needs assistans with this I’d be happy to help out. Just let me know. =)

Best regards!

17

I have the same problem with Dynamic page when the user uses the filter and selects from the data list in the table, he moves to the selected data page and after returning to the main page, the filter disappears and all the data appears
If you have a solution, I will be grateful for you. You explain it to us

18

Perhaps this could help you a little bit…
https://www.media-junkie.com/pflegeservice

Take also a look onto the forum-post belonging to this example (you will find the link inside example).

19

@russian-dima Please post informative and relevant posts and comments. Include an explanation and sample code.

20

You can use the wix-storage API for persistent data. See the Example: Saved Search which demonstrates saving a database search/filter.