Wix: (Javascript) Click button on one page to jump to another page and filter info

Ask the community
,
1

Issue: Unable to jump and filter information on webpage based off the information from another webpage

BACKGROUND/INTENDED BEHAVIOR:
I have 3 web pages:

  1. Home Page
  2. Law Page
  3. Medical Page.

Pages: 2- Law & 3- Medical, have checkboxes that can filter a repeater of linked images on that page.
From the Home Page the user selects from two dropdown lists:

Task and Location.

1014×217 225 KB

Both task and location are required prior to clicking on a search button. When button is clicked, if the task == a Law task, then user will jump to the law page and the repeater will filter by the task selected and location. (Example: Task = fire fighter / Location = Dallas) Expected Result:

  1. User jumps to Law page

  2. Repeater is filtered by fire fighters in Dallas
    The same behavior would apply if a Medial task was selected instead of a Law task. (Example: Task = dentist / Location = Dallas) Expected Result:

  3. User jumps to Medical page

  4. Repeater is filtered by dentist in Dallas

Problem 1: I have searched a lot on Wix.com on how to code for a page to jump to another page based off the information entered. I desire to do an if statement checking the value of the task dropdown list, but I cannot find out how to jump to another page using javascript code in wix.

Problem 2: I also desire to carryover values from one page to be applied in another. Should I just have a global variables that by default is blank but can be altered between all three pages? Then upon load of pages 2 & 3 use that values for the variables to display the filters?

2

Hi @rexkid2000 ,

  1. You can use wix-location module to redirect user to another page.

  2. You can use wix-storage to store value across pages, or use query parameters (?key=value) at the end of the url when you redirect the user. Hence, the page knows what to filter.

Does it solve your questions?

Certified Code

3

Dear @certified-code ,

Your response was very helpful. I reviewed both wix-location and wix-storage, and they seem exactly what I was looking for.

I can share the code after writing it just as an example for others viewing this query. Thanks again.

4

Solution 1: Relocation worked as desired.
Solution 2: Information was stored as desired, and recalled using the session.getItem().

[HOME PAGE]

import wixLocation from ‘wix-location’;
import {session} from ‘wix-storage’;

export function exploreSearchButton_click(event) {

if(($w('#categoryDropdown').value.length>0)&&($w('#stateLocationDropdown').value.length>0)) 
{ 
    session.setItem("location",$w('#stateLocationDropdown').value); 

    switch($w('#categoryDropdown').value) 
    { 
        case "Doctor" : 
            session.setItem("category",0); 
            wixLocation.to("/medical-field"); 
            break; 
        case "Dentist" : 
            session.setItem("category",1); 
            wixLocation.to("/medical-field"); 
            break; 
			... 
        case "Police Officer":  
             session.setItem("category",0); 
            wixLocation.to("/civil-service-law"); 
            break; 
        case "Fire Fighter":  
             session.setItem("category",1); 
            wixLocation.to("/civil-service-law"); 
            break; 
      ... 
        default:  
            console.log("Did not jump to another page."); 
    } 
}

}

[MEDICAL PAGE]

import { session } from ‘wix-storage’ ;

$w . onReady ( function () {

**let**  newCategory  =  parseInt ( session . getItem ( "category" )); 

**if** ( newCategory >= 0 ) 
{ 
    $w ( '#categoriesCheckboxGroup' ). selectedIndices  = [ newCategory ]; 
    $w ( '#stateLocationDropdown' ). value  =  session . getItem ( "location" ); 
} 
        displayServicesInRepeater ( "medical-field" );

I have an unrelated problem of the stateLocationDropdown.value.length is not acknowledged to be greater than 0. Therefore a the medical page is not automatically filtered. I presume that I just need to change the timing in which " displayServicesInRepeater () is called.
*If I am wrong and you don’t mind dropping a brief comment, let me know. Otherwise I do not want to detour from the original question and answer of this post.
Thank you all for your assistance.

5

Hi,

I want a page to automatically go to another page after a few second. Would the code be similar to this?

6

You will need → 

$w.onReady(()=>{
    let timeout = 5000; // milliseconds = 5sec.
    setTimeOut(()=>{myFunction},timeout);

function myFunction() {
    console.log("This codepart will start after 5 sec. since page    
has been ready!);
    
    //write your code here, what should happen in this function???
    }

});