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!
@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.
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);
});
@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!
The webflow support team kindly pointed me in your direction, as I’ve ran into a similar problem as @jakelael has.
I have a collection list with items for projects and labs. The items include fields for names and descriptions in different languages. There are different pages for the different languages.
What’s great is that the names of the projects and labs are already linking to the correct language fields in the cms items. So I’m half way there.
Now I am trying to link the description fields in the correct languages. I’m assuming the only way to do this without creating a new list for each language, is to use document.referrer.
Is there a way to code:
“You are on the Page ES, so you will get descriptions ES.” ?
I have been working for a long time on this project as a designer (with no code knowledge) and have now been left in the rain by the developer who was working with me on this project.
So any advice would be amazing.
@MartinTaylor - how are you going to let the user set their language in the first place?
It might help if you break this out into the goals or the requirements you are looking to achieve rather than trying to specifically problem solve at this point.
To me it sounds like you want to let the user set their language (how are they going to do this?) and then display content based on that selection?
The user selects the language in the section section from the top. (See screenshot)
The homepage is in English, and the buttons are for accessing the Spanish or German page.
Would there be a way to:
1.) hide EN and DE Description but show ES description on the ES Page.
2.) hide ES and EN Description but show DE description on the DE Page.
It looks like clicking on those buttons takes you to pages like /es and /de with different text in each language on them. Is that accurate?
I guess I’m not sure CMS elements come into play on these pages? What would be an example interaction that you are looking to solve once the user has selected a language?
