Streaming live at 10am (PST)

Hide/Show elements based on the page you used to access the current page

Not sure if I am approaching this in the best way but here is what I am trying to accomplish.

I have a CMS Template page that can be accessed via a main catalog page as well as via the search results page. I would like to conditionally show or hide elements on the template page depending on which page you accessed it from. Particularly, there are navigation arrows and a “more rings” section that shouldn’t show up on the template page if you accessed it from the search result page.

I figured that i could set a variable on the search page as well as the catalog page and have that carry over to the template page and then depending on the variable set the element(s) to display either “block” or “none”.

The problem is that I have no idea how to do that. All the javascript I have used so far has been cut and pasted from fnsweet or this forum (thank you). I’ve tried to figure this out on my own but it seems a little too advanced for me. Any advice would be appreciated… or even point me in the right direction. Thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/cathy-waterman?utm_medium=preview_link&utm_source=dashboard&utm_content=cathy-waterman&preview=0cb57c7f4fd60e70ccd3b988c666a953&mode=preview

Here is the CMS Template Page: https://www.cathywaterman.com/rings/r-2201g
Here is the Search Result Page: https://www.cathywaterman.com/search?query=rings
Here is the Catalog Page: https://www.cathywaterman.com/rings

@jakelael - you can actually get the previous page url using what is called the referrer. The code is pretty simple:

$(document).ready(function() {
	var referrer =  document.referrer; // find the previous url
	if (referrer.indexOf('search') !== -1) { // if the referrer contains 'search' do whatever follows
		console.log('search page');
		$('.more-jewels').hide(); // hide element with class if true
	}
	console.log(referrer);
});

I put some comments in there to help make it a little easier. You can remove the console logs or comment them out for your live site, they just help to check the code is working properly when testing. You can obviously change the if condition or add additional conditions and change what happens when those conditions exist.

Put this code in your site settings before the /body tag.

1 Like

@sam-g, awesome! This is so very helpful. I will give it a try later today. Thank you so much.

@sam-g

i am happy to say that this is working, although I had to put the code on the individual template pages because, for some reason, it didn’t work when i put it in the site settings page.

Taking it a step further, I wonder, is there a way to have it hide an element if the previous page dos NOT contain ‘search’?

thanks again for your help. I very much appreciate it.

@jakelael - should work fine in the site settings as long as it’s in the footer custom code section.

And yes, you can just add an else statement:

$(document).ready(function() {
	var referrer =  document.referrer; // find the previous url
	if (referrer.indexOf('search') !== -1) { // if the referrer contains 'search' do whatever follows
		console.log('search page');
		$('.more-jewels').hide(); // hide element with class if true
	} else {
		// do something
	}
	console.log(referrer);
});
1 Like

@sam-g
it works perfectly now when i put the code in the site settings footer.
adding the else statement worked as well.
and i’ve learned a thing or two. thanks again!

1 Like

@jakelael - great, glad to help!