Dynamic Lightbox getContext PLEASE HELP - I AM STUCK

Ask the community
,
1

SO I am brand new to Corvid (and mostly very new to coding in general). I have created a database with images where each image has a title, description, date and location. I have a ProGallery that displays the images dynamically from the database. When you click on an image it takes you to a dynamic page with shows the image larger and has additional data. What I want to do is when you click on the image on the dynamic page it will open a lightbox that has certain data from this particular image already inserted into a text field.

Thus far I have managed to get the lightbox to open using the following code added

import wixWindow from 'wix-window'
import wixData from 'wix-data'

export function gallery1_itemClicked(event) {
    wixWindow.openLightbox('myLightBox')

now I am completely stuck with how to make certain data from the page go into a lightbox field…

I understand that there needs to be code added to the lightbox -

import wixWindow from 'wix-window';
import wixData from 'wix-data'
 
$w.onReady( function () {
 let text = wixWindow.lightbox.getContext();

but I can’t figure out how and where to define what text needs to be taken from the page and how to insert it into a particular field in the lightbox.

I read the API documentation on the getContext command but I don’t understand how to implement it… any guidance would be very much appreciated

2

You need to add an object containing the data to the openLightbox call.

let contextData = {‘infoForLightbox’:’hello light box!’};
wixWindow.openLightbox(‘myLightBox’, contextData);

3

thank you for the reply, but I want that the “contextData” will be dynamic - so it needs to reference the dynamic elements on the page that contain text - such as:

import wixWindow from ‘wix-window’
import wixData from ‘wix-data’

$w.onReady( function () {
})

export function gallery1_itemClicked(event) {
let dataObj = {
“title”: $w(“#text27”).text,
“date”: $w(“#text28”).text,
“location”: $w(“#text29”).text,
“description”: $w(“#text30”).text
}
wixWindow.openLightbox(‘Place Your Order’, dataObj)
}
on the lightbox page I add the following to the code:

import wixWindow from 'wix-window';
import wixData from 'wix-data'

$w.onReady( function () {
 let text = wixWindow.lightbox.getContext()
  $w('#textBox1').value = $w("#text27")
        } )

But I still can’t get it to work…

4

Anyone - I am at my wits end - please help me! what am I doing wrong>?!

5

@ilyav The context variable that you get from the call to getContext() IS the object you created for the call to openLightbox. So instead of

let text = wixWindow.lightbox.getContext();

Think if this as:

let dataObj = wixWindow.lightbox.getContext();

Then you can access the properties you sent:

$w('#textBox1').value = dataObj.title;

Also make sure you are using the correct property on textBox1 inputText uses .value
textBox uses .text :wink:

6

Amazing! thank you! it is almost working!!!
so here is the last tidbit that’s not…

so the page code is:

import wixWindow from 'wix-window'
import wixData from 'wix-data'

$w.onReady(function () {
})

export function gallery1_itemClicked(event) {
 let dataObj = {
 "imageTitle": $w("#text27").text,
 "imageDate": $w("#text29").text,
 "imageLocation": $w("#text28").text,
 "imageDescription": $w("#text30").text}

wixWindow.openLightbox('Place Your Order', dataObj);
}

the lightbox code is:

import wixWindow from 'wix-window';
import wixData from 'wix-data'

$w.onReady( function () {
 let dataObj = wixWindow.lightbox.getContext();
  $w('#textBox1').value = (dataObj.imageTitle, dataObj.imageDescription, dataObj.imageDate)  
        } )

and the result is the text field is showing only the imageDate value… I have tried putting it like this:

import wixWindow from 'wix-window';
import wixData from 'wix-data'

$w.onReady( function () {
 let dataObj = wixWindow.lightbox.getContext();
  $w('#textBox1').value = dataObj.imageTitle,    
  $w('#textBox1').value = dataObj.imageDescription,
  $w('#textBox1').value = dataObj.imageDate
        } )

that didn’t work either - only the imageDate shows… so what am I doing wrong now?

thanks in advance!

7

Use semi colons to terminate statements not commas.

What are you trying to do?

The code tries to write three different things to the same element. So each is over writing the other. What other elements do you have on the light box?

8

I have a form that has a field that has to be filled out with whatever image triggers the lightbox… so:
there is an image which has a dynamically set (from a DB) title, description, location and date which are displayed on a dynamic page, then once that image is clicked it triggers a lightbox which lets the user order the image so its a form that requests info name, phone email etc… and it has a “Note” field where one would write the image they are requesting, and I want that part filled out with the data from the dynamic page.

So all that information needs to go into that field

805×599 123 KB

the #textBox1 field is the one to be filled out

9

Have a look at the Wix Lightbox API reference here and have a good read of the getContext() function that Steve is talking about.

It also lists an example of passing data from a page to the lightbox itself, so you can familiarise yourself with the code that Steve is asking you to use.
https://www.wix.com/corvid/reference/wix-window.lightbox.html

10

You can rest assured that before I have come to the forum I have read the information already available - I have looked at that page so many times…

it doesn’t really explain much in the way of what I need… It seems that I am following the entire protocol that is described there but I am not achieving the desired result - hence I am here and asking questions. So if you have any useful suggestions, I am all ears!

11

@ilyav In addition you need to brush up on your JavaScript string manipulation.

You are trying to create a text field from something that is called an object. Objects contain properties (e.g. dataObj has a property called imageTitle) that you want to build into a string. There are several ways to build strings from object property values. One is called a template literal:

The other way is using concatenation using the ‘+’ character or the concatenation function:

Lastly I suggest you read this link that should get you up to speed with strings:

12

Thanks for pointing me in the right direction… I don’t know JavaScript, from Chinese… so I will have to read up on the links you provided…

Thanks

13

Well as it turns out my brother who is a developer gave me a simple solution (for him simple - i would never have figured it out) and its not as satisfying as figuring out myself but, in the interests of expediency I implement it. so here is the solution:

Page code:

import wixWindow from 'wix-window'
import wixData from 'wix-data'

$w.onReady(function () {
})

export function gallery1_itemClicked(event) {
 let dataObj = {
 "Image Title": $w("#text27").text,
 "Image Date": $w("#text29").text,
 "Image Location": $w("#text28").text,
 "Image Description": $w("#text30").text}

wixWindow.openLightbox('Place Your Order',  JSON.stringify(dataObj));
}

Lightbox code:

import wixWindow from 'wix-window';
import wixData from 'wix-data'

$w.onReady( function () {
 let dataObj = JSON.parse(wixWindow.lightbox.getContext());
 let str = '';
 let keyMap = ['Image Title', 'Image Description', 'Image Date','Image Location'];
 for (let key of keyMap) {
 if(dataObj[key]) {
                str += key + ': ' + dataObj[key] + '\n';
                }
            }  
$w('#textBox1').value = str;
        } )

WORKS LIKE A CHARM!

14

Great, why not see if he will do your whole website for you for free?! :wink:

15

Like I said I like to do it myself - hence I was trying to figure it out on my own with the help of this community… but no such luck… :frowning: