Hi,
I have a lightbox which can be opened from any page due to the fact the button for opening is in the header.
If the lightbox is opened from one specific page ‘iswtest’ then I want to hide the close button. I am using wixLocation.path and the console log is telling me that the correct path is being returned but my if/else statement is not hiding the button?
My code in the lightbox is…
$w.onReady(function () {
let path = wixLocation.path;
console.log(path);
if (wixLocation.path === "iswtest") {
$w("#btnClose").hide();
console.log("Close button is hidden");
}
else {
$w("#btnClose").show();
console.log("Close button is shown");
}
});
Console log is always stating “Close button is shown” even when I am on the page ‘iswtest’
Am I missing something?!
Thanks,
Rachel
Hey,
The issue is the “wixLocation.path” returns not just a string, but an array, as you could see it in “console.log” output. So, in order to check if path is equal ‘iswtest’ you need to check first item in array, like this:
if (wixLocation.path[0] === "iswtest") {
I think it should fix the issue you encounter.
That’s done it!! Thanks for your help, Nick
Hi again,
I’ve been thinking that it may not be such a good idea to completely hide the close button but rather refer a user back to the page they came from. The point of hiding the button was that if someone ‘stumbled’ across the page they would not be able to access it unless they have a login but this might leave someone stuck. I know I could direct them to another page but thought, out of courtesy, it would be better to refer them back!
export function btnReferrer_click(event, $w) {
if (wixLocation.path[0] === "iswtest") {
let url = wixWindow.referrer;
console.log(url);
console.log("Close lightbox and return to page navigated from");
} else {
console.log("Close lightbox and return to same page");
}
}
This gives me a url in the console log when I preview and displays the correct message but doesn’t actually take me anywhere. If I view in the published site then there is an error in the console log that says ‘Failed to load resource: the server responded with a status of 403 ()’
Thanks,
Rachel
Sorry, I realised I missed out
wixLocation.to(url);
which I have now added. The console log in the live site is giving me the following error…
Hey,
Taking error messages into consideration I assume that value of ‘wixWindow.referrer’ in your case equals ‘null’, and it is correct behavior if you opened page directly without navigation to it from another page of the site. So, solution that uses ‘wixWindow.referrer’ might not cover all cases when user come to a specific page.
I suggest to navigate user to specific page, instead of just sending him back. You could hide regular close button if user opened Lightbox from specific page and create new one, specific for your case, for example “back to homepage”. It should looks clear for users.
Thanks, that’s what I’ll do
Rachel:
Another thing you could consider is a router wix-router - Velo API Reference - Wix.com
This intercepts the page request before the page is actually loaded and gives you an opportunity to validate the user etc. before you load the page and perform the redirect there. For example I have an “Ooops” page that my router redirects to that says something like:
“Oops the page you have requested requires you to be logged in as . Redirecting to our home page”.
Steve
Thank you, Steve! So, if I apply this to the page that I don’t want people to accidentally come across then, if they are not logged in (and session is not active), they will be redirected?
Hi Rachel:
Yes you can run logic in the router that decides if you even want to show the page. You can create different page load contexts that route your user to specific pages based upon something you know about them, like are they logged in.
If you take a look at these pages and some of the related ones this should help you understand more.
Steve
How could I get a similar result but have lightbox elements shown/hidden based on a dropdown menu selection, as opposed to the page you came from?
[@dan.weiss42] I’m not clear on your question. Do you just want to load a light box based on a dropdown value or do you have other conditions you want to consider.?
@stcroppe sorry this having a lightbox open and showing an element or hiding it based on dropdown value, as opposed to what page you navigate from
So say if i select ‘vanilla’ from a dropdown box, the lightbox opens showing a specific slideshow, but if i select ‘chocolate’ a different slide show will show and the other one will be hidden
@dan-weiss42 OK this is straight forward and uses the dropdown onChange event to get the value for the selected option. Then once you have the value of the dropdown you use wix-window.openLightbox(“lightbox-name”); To show the light box.
What does your current code look like?
I have the lightbox opening. I did have trouble with that originally because i was using the lightbox ID instead of the actual name. My problem is related to the original post. Hiding or showing lightbox elements dependent on what options are selected from a dropdown menu on a separate page. The original post asked about hiding elements dependent on what page you navigated from. Ive read from the API about having lightbox elements change or accept data from user inputs, so there has to be something similar to affect what a lightbox will look like upon opening with dropdown menu selections
@dan.weiss42 Here is a snippet of code to get you on the right track
import wixWindow from 'wix-window';
$w.onReady(() => {
// Set the dropdown change handler
$w('#dropdown1').onChange(loadLightbox);
});
function loadLightbox(event) {
// We will assume that the lightbox to be loaded are named "<dropdown-value>Lightbox"
let lightboxName = (typeof $w('#dropdown1').value !=== 'undefined' ? $w('#dropdown1').value + "Lightbox" : null);
if (lightboxName) {
wixWindow.openLightbox(lightboxName);
}
}
Cheers