Keep Search Filtering when switching between dynamic pages

Ask the community
,
1

I have a large dataset that I am working with. I implemented a search and filter feature to sort the data that is being rendered to the repeater but every time I switch between the (All) dynamic page and the (item) dynamic page all filtering is removed. This is doing two things that I do not want.

First on the item page when I click next it is pulling from the entire data set and rendering items that should not be included in the filtered collection.

Second when navigating from the item page back to the all page all filtering is removed and the repeater just renders the entire data set.

Is there a way to keep the filtered results on both pages and navigate between them seamlessly?

2

You can do one of the followings:

  1. use wix-storage to store the filter parameters in the memory or browser cache. See: https://www.wix.com/velo/reference/wix-storage

  2. use a public file (with export-import) to store the parameters.

  3. use url query parameters to pass the values between pages. See: https://www.wix.com/velo/reference/wix-location/query

3

Thanks for the recommendation. I was able to use local memory to fix this.
EDIT:
After further investigation I am not able to switch between different items from the item page. The page has a button at the bottom that connects to the next dynamic page. This page is pulled from the dataset so I attempted to filter it using this function:

import wixData from “wix-data” ;
import { memory } from “wix-storage” ;

$w . onReady ( function () {
//reads from memory on page load to see if there are filtered values
let filteredState = memory . getItem ( “filteredState” )
let filteredCategory = memory . getItem ( “filteredCategory” )
console . log ( filteredState , filteredCategory )

**if** ( filteredState  &&  filteredCategory ) { 
    $w ( "#dynamicDataset" ). setFilter ( wixData . filter () 
    . contains ( "state" ,  filteredState ) 
    . contains ( "category" ,  filteredCategory ) 
    ) 
}  
**else if** ( filteredState ) { 
    $w ( "#dynamicDataset" ). setFilter ( wixData . filter () 
    . contains ( "state" ,  filteredState )) 
} 
**else if** ( filteredCategory ) { 
    $w ( "#dynamicDataset" ). setFilter ( wixData . filter () 
    . contains ( "category" ,  filteredCategory )) 
}

})

When the page loads the function SHOULD filter the information to only include items from the dataset that matches the returned value from local storage. This works perfectly for the page that loads all experiences, however when I click either the next or back button the page refreshes and just shows the same exact item.

4

Update Number 2:

It now appears that the above code did not work because the Experiences Item dataset on the item page only filters one result. So the code did end up filtering it but because the dataset contained only one specified value that matched the requirements for the search it was just returned like normal. I got to this conclusion by parsing the dataset with the following built in function

$w ( “#dynamicDataset” ). getItems ( 0 , 2 )
. then ( data => console . log ( data ))

It now appears that the issue lies with the next button it’s self. I have it connected to the Experiences item dataset and on click it connects to the next dynamic page. When I change this to display the next item it is greyed out and disabled. This makes sense when you consider that the current dataset for the Experiences Item only contains one value that is passed to this page. I would of thought that since the referring page had a filtered dataset that only shows items that match specific locations that it would generate a new dynamic page from that dataset.

It appears however to actually generate a new dynamic page based off of the original unfiltered dataset. I can see that the onClick trigger calls a built in function called nextBtn_click. I believe that I can modify this function to pull from the filtered dataset but I am not sure how to accomplish this.

5

Update #3

This question has been solved with the help of this Velo tutorial.

Anybody who needs to add both “next” and “previous” button functionality to a dataset that is filtered should be able to do so with this tutorial.