How to Create A Back Button for A Wix Page using Session

Ask the community
, ,
1

Since a “Back” button feature isn’t conveniently ready yet, I managed to code one using Corvid for my Blog Post page. I needed a back button since I have customized my Blog into different pages per categories using a menu & blog custom feed.

1st: I made sure I created a button with ID #btnBack.
2nd: On Site Code I wrote the following code:

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

$w.onReady(function () {
	let currentPage = wixSite.currentPage.url;
	let postPageUrl = '/post'; //wixSite url page with back button

	//set session only when not in POST PAGE
	if(wixSite.currentPage.url !== postPageUrl){
		session.setItem("pageTrail", currentPage);
	}	
});

3rd: I intend to only get the session pagetrail when I am in my target page where I need my back button. Under the Post Page code, I applied the following code:

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

$w.onReady(function () {
	let backTarget = session.getItem("pageTrail");
	$w("#btnBack").onClick( () => {
		wixLocation.to(backTarget);
	})
});
1 Like
2

Well done for the above. :+1:

However there is a tutorial already which was made by Yisrael (Wix Admin) in Jan 2019 which you could have used as a solution or a starting point for this.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-back-button

Also, you might want to vote for these too.
https://support.wix.com/en/article/request-adding-a-back-button
https://support.wix.com/en/article/request-choosing-where-the-back-button-redirects-to-in-wix-events
https://support.wix.com/en/article/request-adding-a-back-button-to-your-product-page

There is also a Corvid tutorial for next and back buttons on a dynamic page.
Corvid Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code

3

I have read this reference. However, Yisrael’s solution requires the button to be available for the entire site, placing the button on the header. I tried it and it work. But my requirement is specifically a back button for a particular page. Same issue mentioned by Sarah Grover on Yisrael’s back button tutorial.

4

Hi there,
Exact same issue but I am not 100% sure how to change the code if I need it for a different URL. I would like the back button to only work on my product page (non-dynamic) - how would I change the code to make this work?