I am trying to generate a URL query string that links directly to a chosen lightbox loaded over a chosen page (a dynamic button internally on the Wix site will not suffice; I need a URL that will work as a QR code).
If I have a lightbox named “PopUp1” under “Lightbox Settings” in “Manage Pages”, my website is named “Example dot com”, and my background page is named “Webpage1”, what code should I use to create a parameter like “name” so I can have a working URL query such as “Example dot com/Webpage1/?name=PopUp1”? And if I wanted to change the lightbox to another one (e.g., “PopUp2”), or the background page to a different one (e.g., “Webpage2”), would the code still work?
There was a related discussion from six years ago, but the workaround discussed is ambiguous and no longer functional: Getting a URL Directly to a LightBox
I attempted to embed the following JavaScript in the “Head” section of my target background page as essential code. However, it does not seem to function.
<script type="text/javascript">
import wixWindowFrontend from 'wix-window-frontend';
import wixLocationFrontend from 'wix-location-frontend';
function open_Lightbox() {
let query = wixLocationFrontend.query;
var goto = query.name;
wixWindowFrontend.openLightbox(goto);
}
$w.onReady(function () {
open_Lightbox();
});
</script>
If anyone can tweak this code to work, or provide an alternative workaround, I would be appreciative.
Update: The code functions if added to the page in Dev Mode under Page Code on a page-by-page basis. But it does not work site-wide, and the lightbox loads after a noticeable delay (I assume the code executes after the site body loads). However, having a delayed lightbox loading is better than having no lightbox loading at all.
The code still does not work if added under Settings > Advanced > Custom Code within <script type="text/javascript"> </script>
tags in the <head>
section. This would be ideal, as I would prefer the script to execute before page loading.
If anyone has a simpler/faster code or one that works site-wide in the webpage head, please share.
Hi, TedBroda !!
If you want the functionality to work across the entire site, consider using masterPage.js
.
Thank you, I will test this out!
Hi Ted.
And what if you tried adding this code to the master page? This way, you wouldn’t have to write the code for each page separately.
And regarding the lightbox delay, it might have to do with the lightbox’s settings. When it’s set to open after 3 seconds, the website will prioritize this setting over your code. So if you want it to pop up immediately when the page loads, just change the delay in lightbox settings to 0
As mentioned you can do all this in the Master page.
import wixWindow from "wix-window";
import wixLocationFrontend from 'wix-location-frontend';
function open_Lightbox() {
let query = wixLocationFrontend.query;
var goto = query.name;
wixWindow.openLightbox(goto)
}
$w.onReady(function () {
open_Lightbox();
});
It is also best to test light boxes on the published site. They can be very slow when testing in preview. You can duplicate the site to do the testing if the site is being used live by others.
Thank you for all the prompt and helpful replies!
Thank you! Initially, I did not see any lightbox “Delay” parameter in the lightbox settings menu, but when I toggled on “Automatically display lightbox on pages”, the settings menu displayed the delay parameter at a default 2 seconds; when I changed this parameter to 0 seconds and toggled off “Automatically display lightbox on pages”, the site saved the new parameter (0 seconds) even though the setting was no longer displayed in the menu.
There still seems to be some delay, but I assume it is attributable to slow loading rather than a programmed delay. Alas, it seems that lightbox loading has low loading priority by default across the Wix platform: Site Performance: Best Practices | Help Center | Wix.com