Hi guys. How to create a dynamic lightbox with contact and detail info from the database?
My site is a “room booking” kind. So when I click “book it now” a lightbox with info from the room should open.
Any idea? Thanks.
ps: my site already has databases, dynamic map and dynamic image gallery.
Hi,
It is possible to communicate between the page and the light box.
For example:
wixWindow.openLightbox("Your lightbox",{data:'the information you want to pass'});// from the page that opens the lightbox
And the code in the lightbox:
let receivedData = wixWindow.lightbox.getContext(); // to receive the information
When closing the lightbox:
wixWindow.lightbox.close({wantsToBookTheRoom:true});
For more information read this:
Good luck!
Roi
Thanks Roi.
But I have some difficult writing codes…I’m not a developer.
How do I set the button “book now” to open that specific lightbox?
Where do I find the name of the lightbox?
Don’t I need to write import wixWindow from ‘wix-window’; before these codes?
Hi,
Some coding skills are required in order to code in Wix Code.
You can hire an expert in Wix Arena .
Or, you can try coding!
In order to set the button you need to create onClick event and use openLightbox() method like i wrote in the example above.
This article will help to create events to elements.
Roi
Hi Roi
I was wondering if this is do able from a Dynamic Page to LightBox ?as i want to pass a variable from a dataset to the lightbox ?
thanks
Lina
Hello Lina…
I have a tutorial that can show you how to grab information then display it in a lightbox.
This specific tutorial gets information from a repeater, but you can basically modify your code to get current item from dynamic dataset instead.
Here is a link to the tutorial:
https://support.totallycodable.com/en/article/open-a-lightbox-when-clicking-an-item-in-a-repeater-using-a-button
Thank you Queen , So in my case i have a dynamic data set (Item) , so my code will be as below bit confused how to edit the repeater part cause the item is already ready right ? :
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
$w(“#repeater”).ItemReady(($item, itemData, index) => {
$item(‘#Button’).onClick(() => {
let item = $item(‘#dynamicDataset’).getCurrentItem();
wixWindow.openLightbox(‘Lightbox’, item)
});
});
});
You would remove the ‘repeater’ line altogether and keep everything in between. Since your button is not in a repeater the onClick line would look like this instead: https://www.wix.com/corvid/reference/$w.Button.html#onClick
Dear Code Queen
I tried alot to remove the repeater but now i guess i am loosing the line that prepares the item value ( if i am understanding the code right logic) so when i placed the on click line the TargetId is not readable
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
$w(“#text54”).onClick( (event) => {
let targetId = event.target.id; // “myElement”
} );
wixWindow.openLightbox('lightbox',targetId)
});
});
thanks
Lina
hello Lina, have you made yet?
Hello, i have the same problen, can someone help
@code-queen can u explain this … I also removed the repeater line and change as show on LINK u sent, but then then i got error on lasT line
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
$w.onReady(() => {
$w( “#dynamicDatasetAngra” ).onReady(() => {
$w( “#button3” ).onClick( (event) => {
let targetId = event.target.id;
=======IT SAYS " $ item " IS NOT DEFINED =========
let item = $item( ‘#dynamicDatasetAngra’ ).getCurrentItem();
wixWindow.openLightbox( ‘Cheese’ , item)
});
});
});