How to use referrer on a button in Velo

[user2226]

Question:
Hi, I want a simple button which takes the user to the back page. Is that possible?

I am so new at this. Can anyone kindly help me?

Product:
Velo, Developer Mode

What are you trying to achieve:
I just want the users to land to their previous page.

What have you already tried:
I tried adding this to my masterPage.js as in the Docs:

import wixWindowFrontend from 'wix-window-frontend';

// ...

let referrer = wixWindowFrontend.referrer;  // "http://somesite.com"
$w.onReady(function () {
  // Write your code here
});

// In Site tab

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let previousPageURL;

$w.onReady(function () {
  previousPageURL = session.getItem("page");
  session.setItem("page", wixLocationFrontend.url);
});

And this to the button:

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';
import wixWindowFrontend from 'wix-window-frontend';


export function button12_click(event) {
    // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    // Add your code for this event here: 
    

// ...

let referrer = wixWindowFrontend.referrer;  // "http://somesite.com"
}

Additional information:
I will be grateful for any help or advice given. Thanks so much.

[CODE-NINJA]

What does mean a → BACK-BUTON ?
And which functionality should it have?

For sure it is a BUTTON , which should be able to memorize the last url-state of website.

That means → when navigating from PAGE-A to PAGE-B, the button should memorize at least the last state → “URL of PAGE-A”.

To be able to get this information on all pages you can use → wix-Storage (this is what you are already doing).

Now there are two questions.
a) When to memorize the last state of the page?
b) At which moment to load last state of the page to get the BACK-function working?

a) Everytime when you switch the page → storing the last-state of the page (URL)
b) Everytime when you click the BACK-BUTTON → loading the last state to navigate back to the last visited state.

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let previousPageURL;

$w.onReady(function () {
  previousPageURL = session.getItem("page");
  session.setItem("page", wixLocationFrontend.url);
})

You found this example here…

referrer - Velo API Reference - Wix.com

But i would suggest even a much better version of it.

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let navData = {};

$w.onReady(function () {
   navData.previousPageURL = JSON.parse(session.getItem(navData)).previousPageURL;
   navData.currentPageURL =  wixLocationFrontend.url;
   console.log('Navigation-Data: ', navData);
   session.setItem("navData", JSON.stringify(navData));
})

Something like this. Because now you always have the current page-URL and the previous one always ready to be used inside your object. All you have to do now is only to choose which one you need and when exactly you need it → in your case on a BUTTON-CLICK ???

The way i showed → you even could generate a HISTORY. DEEP-MEMORY OF VISITED-PAGES.

For example the last 3 or 5 page-URLS.

An even more advanced MEMORIZER-FUNCTION could look like…

// A function to update the navigation data in the session storage
function updateNavigationData(newPageURL) {
    const maxPagesToTrack = 5; // Number of previous pages to track

    // Get existing navigation data from session storage
    let navData = JSON.parse(sessionStorage.getItem("navData")) || {
        previousPageURLs: []
    };

    // Append the current page URL to the list of previous URLs
    navData.previousPageURLs.push(newPageURL);

    // Keep only the last 5 URLs
    if (navData.previousPageURLs.length > maxPagesToTrack) {
        navData.previousPageURLs.shift(); // Remove the oldest URL
    }

    // Update the session storage with the modified data
    sessionStorage.setItem("navData", JSON.stringify(navData));

    // Return the updated data for debugging
    return navData;
}

// When the page is ready
$w.onReady(function() {
    const currentPageURL = wixLocationFrontend.url; // Get the current page URL
    const updatedNavData = updateNavigationData(currentPageURL); // Update the navigation data

    // Log the updated navigation data
    console.log("Navigation Data: ", updatedNavData);
});

[Seraphel_Kay]

Wow. Thanks so much for your in depth answer. So to understand it all better, (pardon the questions of a newbie here ), I should use this code in masterPage.js?

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let navData = {};

$w.onReady(function () {
   navData.previousPageURL = JSON.parse(session.getItem(navData)).previousPageURL;
   navData.currentPageURL =  wixLocationFrontend.url;
   console.log('Navigation-Data: ', navData);
   session.setItem("navData", JSON.stringify(navData));
})

And I should use the second code in my

export function button12_click(event) {

// Second code goes here?

}

[CODE-NINJA]

@Seraphel_Kay

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let navData = {};

$w.onReady(function () {
   navData.previousPageURL = JSON.parse(session.getItem(navData)).previousPageURL;
   navData.currentPageURL =  wixLocationFrontend.url;
   console.log('Navigation-Data: ', navData);
   session.setItem("navData", JSON.stringify(navData));
})

To understand better where to place what, you should do some testing first.

Let’s say this is your page (including to sections → HEADER+BODY-SECTION <—

—> green-section = HEADER
—> blue-section = body

Where you have placed some buttons.
2-Buttons were added to the HEADER.
1-Button was added to the BODY.

Now you want to reply to your own question by yourself, how to do that?

Well you just test it out and see the results…placing the following code for example to the MASTER-PAGE → which will control which elements? You do not know?

So let’s find out…by adding a simple code including some logs for the buttons we putted onto our sections (HEADER+BODY).

What exactly are we going to find out now? You have some assumtion ?

Yes, of course → we want to find out if we can CONTROLL the buttons on both of sections on our → MASTER-PAGE. Let’s do it…

MASTER-PAGE-CODE:

$w.onReady(function () {
	console.log($w('#btnA').id);
	console.log($w('#btnB').id);
	console.log($w('#btn1').id);
})

So immediatelly we can see a red-underlined code-part, like…

Let’s check what the error wants to tell us…

It tells us the elements does not exist!!! Wow, really? So that means i can not controll it from the master-page, because i know exactly that “btn1” is an existing BUTTON…

…, but yes it is placed on the → BODY <— not inside the → HEADER <—, this is true, but is it really not controllable from the HEADER ?

Let’s make a check…are we able to hide the ‘btn1’ - BUTTON throughout out MASTER-PAGE, although the button is on the body? Is the MASTER-PAGE capable to control elements on BODY and HEADER-SECTION?

With a simple expanding of our CODE, we will see the result immediately …

$w.onReady(function () {
	console.log($w('#btnA').id);
	console.log($w('#btnB').id);
	console.log($w('#btn1').id);
    //-----------------------
	$w('#btn1').hide();
})

So now the button on the BODY should be hidden, if the MASTER-PAGE is capable to control all elements…

The result…

The button is gone!

Wait wait wait!
Am i able to do the same on page-B, which includes Button-C on HEADER and BUTTON-3 on BODY of PAGE-B ?

Ok… this will be your job for now —> first making sure, how exactly the MASTER-PAGE works and what it is capable to do or not.

You can play on my generated TEST-PAGE here…
https://russian-dima.wixstudio.io/test-site-repeater

By the way → DOES IT MEAN THAT THE → RED indicated UNDERLINE is throwing us a wrong message? That means the AUTO-COMPLETION of the Wix-Studio-Editor has a BUG ? → Questions over questions

This is the way you have to go, if you really want to generate something what will work at the end like you expect it.

-CHECK everything
-CONSOLE-LOG everything.
-INSPECT everything.

[CODE-NINJA]

So! —> CONCLUSION → Where you would add the code?

Would the MASTER-PAGE be capable to do the job?

[user2226]

Okay, so my #button12 was underlined, but when I hid it and RUN the code, it disappeared.

So, what is the next step, please?

[Seraphel_Kay]

Where should I place each code, please? And hey, it’s the same person, please

[user2226]

Please can you help me further?

[CODE-NINJA]

@Seraphel_Kay

import {session} from 'wix-storage-frontend';
import wixLocationFrontend from 'wix-location-frontend';

let navData = {};

$w.onReady(function () {
   navData.previousPageURL = JSON.parse(session.getItem(navData)).previousPageURL;
   navData.currentPageURL =  wixLocationFrontend.url;
   console.log('Navigation-Data: ', navData);
   session.setItem("navData", JSON.stringify(navData));
})

I expanded the example for you, take a look onto it and check the LOGS in CONSOLE…

This is the running code on MASTER-PAGE…

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); 
	if(memoryData) {
		memoryData.prevPageURL = memoryData.curPageURL
		memoryData.curPageURL = wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
		console.log('Mem-Data: ', memoryData);
	}
	else {let memoryData = {};
		memoryData.curPageURL =  wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
	}
	//--------------------------
	$w('#btnA').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagea')});  
	$w('#btnB').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pageb')});  
	$w('#btnC').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagec')}); 
	//-------------------------	
});

→ navData —> is now —> memoryData → including current and previous URL of a navigated page.

This code is running on master-page.
This way → YOU ALWAYS KNOW WHICH IS THE CURRENT LOCATION AND WHICH ONE WAS THE PREVIOUS ONE.

To create a → BACK-BUTTON ← all you will have to do is to get the previous-URL out of the MEMORY-OBJECT and navigate to this URL.

I implemented a → BACK-BUTTON-FUNCTION only on → PAGE-B…

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#btn2Back').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});  
});

Check it out…
https://russian-dima.wixstudio.io/test-site-repeater/pagea

[user2226]

Okay, sorry for being a bit lost… This will go to the MASTER-PAGE (at least the gist of it.)

	import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); 
	if(memoryData) {
		memoryData.prevPageURL = memoryData.curPageURL
		memoryData.curPageURL = wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
		console.log('Mem-Data: ', memoryData);
	}
	else {let memoryData = {};
		memoryData.curPageURL =  wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
	}
	//--------------------------
	$w('#btnA').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagea')});  
	$w('#btnB').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pageb')});  
	$w('#btnC').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagec')}); 
	//-------------------------	
});

I have to set locations for these buttons to go to first?

And then, use this code to set them to go to the previous pages, correct?

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#btn2Back').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});  
});

In my case, I only want the BACK BUTTON to go to the previous page, wherever the user was at first.

May I exclude this part from the MASTER-PAGE?

	//--------------------------
	$w('#btnA').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagea')});  
	$w('#btnB').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pageb')});  
	$w('#btnC').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagec')}); 
	//-------------------------	

[CODE-NINJA]

@CODE-NINJA

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); 
	if(memoryData) {
		memoryData.prevPageURL = memoryData.curPageURL
		memoryData.curPageURL = wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
		console.log('Mem-Data: ', memoryData);
	}
	else {let memoryData = {};
		memoryData.curPageURL =  wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
	}
	//--------------------------
	$w('#btnA').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagea')});  
	$w('#btnB').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pageb')});  
	$w('#btnC').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagec')}); 
	//-------------------------	
});

The main-part of the function is the following…

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';


$w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); 
	if(memoryData) {
		memoryData.prevPageURL = memoryData.curPageURL
		memoryData.curPageURL = wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
		console.log('Mem-Data: ', memoryData);
	}
	else {let memoryData = {};
		memoryData.curPageURL =  wixLocation.url;
		session.setItem("memoryData", JSON.stringify(memoryData));
	}
});

This code-part makes sure, that your memory-object will be created/updated, each time when you switch the page. Because, everytime you switch the page → it will trigger the onReady()-part of the code, accordingly updating the current and the previous URL-state.

The second part is just for navigation if your buttons are inside the header.

//--------------------------
	$w('#btnA').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagea')});  
	$w('#btnB').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pageb')});  
	$w('#btnC').onClick(()=>{wixLocation.to('https://russian-dima.wixstudio.io/test-site-repeater/pagec')}); 
//-------------------------

.
.
.

Paste the following code onto the page, where your BACK-BUTTON is located on…

import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#btn2Back').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});  
});

Do also not forget to change the ID of the button → $w(‘#btn2Back’)
Each button you want to turn into a BACK-BUTTON, you will need to add this code to the corresponding page, where the button is located on.

[user2226]

Hi! This is what I get in the console. The button does not take me back. Does it mean anything, please?

Running the code for the site. To debug this code in your browser's dev tools, open masterPage.js.
Mem-Data:  
{...}
Running the code for the site. To debug this code in your browser's dev tools, open masterPage.js.
Running the code for the Post page. To debug this code in your browser's dev tools, open virgp.js.
Mem-Data:  
{...}jsonTableCopy JSON
curPageURL: "https://www.*********.com//post/doing-all-leaving-nothing?configName=fullFunctionality&dsOrigin=Editor1.4&editorSessionId=bbd46d10-739e-4f19-bbd4-fac2a6888f38&enableScopes=true&esi=bbd46d10-739e-4f19-bbd4-fac2a6888f38&experience=editor2&isEdited=true&isEditor=true&isSantaEditor=true&lang=en&languages=&metaSiteId=f83124d8-b34f-4a23-bfce-6fe0a3e07794"
prevPageURL: "https://www.******.com//blog?configName=fullFunctionality&dsOrigin=Editor1.4&editorSessionId=bbd46d10-739e-4f19-bbd4-fac2a6888f38&enableScopes=true&esi=bbd46d10-739e-4f19-bbd4-fac2a6888f38&experience=editor2&isEdited=true&isEditor=true&isSantaEditor=true&lang=en&languages=&metaSiteId=f83124d8-b34f-4a23-bfce-6fe0a3e07794"

I changed the ID of the button to $w(‘#button12’) though.

And testing by hiding it did work though.

It seems to work sometimes, but other times, it does not. I used it for the “Post” page… but I can go back for some posts, but not for others. I am not sure if I am doing something wrong…

[CODE-NINJA]

You are talking about blog-posts?
You installed the Wix-Blogs-App?

Working with APPs needs some more attention.
APPS have their own live-cycle. To be able to connect CUSTOM CODE to APPs you have to be tricky in many usecases.

And most of APPs have boundaries or are not flexible enough.

Maybe you want to provide some more informations about your setup ?

Some screenshots? Some facts?

[user2226]

Yes, I installed the Wix Blog Apps, but I use no Header or Footer.

I use the same code ID to try to sort out the RETURN button for both Web and Mobile:

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
import wixLocation from 'wix-location';
import {session} from 'wix-storage-frontend';

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#button12').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});  
});

But, on some pages, the IDs for Web and Mobile are different. So, the ID for each gets underlined when I am either in Web or Mobile.

One page has it so:

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#button12').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});   
});

$w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); 
    $w('#mobileButton1').onClick(()=>{wixLocation.to(memoryData.prevPageURL)});   
});

Which option is best, please?

[user2226]

It seems to be working okay for now. Thank you so much!

[CODE-NINJA]

If it works, mark the post which was the solution for you. Do not forget it.

[CODE-NINJA]

This post has a connection to…

How can I get it so when a button is clicked, it switches to a page for a tab?

Ok my friend! I took a lot of time to investigate your issue. Your code should work just fine and you didn’t really made a mistake. The TROUBLEMAKER is the → WIX-HORIZONTAL-MENU <— Since this is a Wix-Element (it has it’s own life-cycle). The menu do not care about your integrated —> REDIRECTION … THIS NEVER FIRES!!!! --> INSTEAD --> the MENU --> DIRECTLY --> NAVIGATES wixLocationFrontend.to("/main-street-approach#section22"); CONCLUSION: —> Your code never runs at all. That means you never…

… —> telling you a live-story about → WIX-OWN-LIFE-CYCLES <—