Help passing data from lightbox to page code

I have this on my page code

//Open lightbox ‘Existing Order Found’
$w . onReady ( function () {
wixWindow . openLightbox ( “Existing Order Found” )
//ask customer if they want to keep order or start over (see lightbox Existing Order Found)
1 if ( ‘start over’ ) { removeOrder = true ; }
2 if ( ‘keep’ ) { removeOrder = false ; }
});

And I would love to pass data from my ightbox to line 1 and two, so I wrote this below in my light box, I need assistance on setting it right. Thanks
import wixUsers from ‘wix-users’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

export function button1_click ( event , $w ) {
// if you want to remove pending order and place a new order,
// this where you should add your conditioning
if ( “start over” ) {
( “removeOrder = true” );
}
}

export function button2_click ( event , $w ) {
//if you want to keep pending order
//the condition can come in here as well
if ( “keep” ) {
( “removerOrder = false” );
}

}

You can defintely pass data back and forth between the lightbox.

See: https://www.wix.com/velo/reference/wix-window/openlightbox

When calling your lightbox you need to pass an object, containing the key/value pairs you are passing into the lightbox.

Eg when calling your lightbox:



  lightboxvalues = {value1: "", value2: "", etc...};  // data being passed to lightbox
  wixWindow.openLightbox("Existing Order Found", lightboxvalues)
    .then( (returnvalues) => {
        // now process the data that came back from the lightbox
        returnvalues.value1  ... etc ( you can return as many items as you want
  

When you are returning from your lightbox you need to pass the data back to the calling function, as I have shown above where I called it ‘lightboxdata’.

//lightbox code
import wixWindow from 'wix-window';

let dataObject;

$w.onReady(function () {
    // display data passed into lightbox
    dataObject = wixWindow.lightbox.getContext();
    $w("textbox1").text = dataObject.value1;
    $w("textbox2").text = dataObject.value2;
    ... etc
});

// using Save button to exit lightbox and return the data
export function buttonSave_click(event) {
    dataObject.value1 = $w("#inputfield1").value;
    dataObject.value2 = $w("#inputfield2").value;
    wixWindow.lightbox.close(dataObject);
    }

Remember when using the savebutton to exit the lightbox, you have to disable all other exit methods for the lightbox in order to force the user to press the save button.

The api documentation clearly states:
If the lightbox is closed by the site visitor clicking the ‘X’ icon, close button, or lightbox overlay, data will not be passed back the the page that opened the lightbox. Therefore, if you want to make sure data is passed back to the page that opened the lightbox, disable all of the methods mentioned above and create your own method for closing the lightbox programmatically.

Thanks Paul for the response, but can you please take a look at the code I put up there, I am trying to make the light box send data back to the page code, just want to know if i got the light box code right

@akinpelu-akintayo01 , I have added more details and an example showing how to pass the data back and forth.

I didn’t seem to get it. If you can assist with the code up there, please do

Your main code has to pass in information into the lightbox, something like this.

I am not sure if you want the lightbox to open as soon as you load the webpage?

let lightboxreturn;

//Open lightbox 'Existing Order Found'
$w.onReady( function(){ 
    lightboxreturn = {removeOrder: false};
    wixWindow.openLightbox("Existing Order Found", lightboxreturn)
    .then( (result) => {
        if (result.removeOrder == true) {
           // do something because we are removing the order
        } else {
          // do something because we are NOT removing the order
        }
    });
}

Now, your lightbox code should be something like this:

import wixWindow from 'wix-window';
 
let returnvalues;

 $w.onReady(function () {
    returnvalues = wixWindow.lightbox.getContext();
})
 
 export function button1_click(event) {
    // button1 is for starting over, removing order
    returnvalues.removeOrder = true;
    wixWindow.lightbox.close(returnvalues);
 }
 
 export function button2_click(event) {
    //button2 is for keeping order, not removing
    returnvalues.removeOrder = false;
    wixWindow.lightbox.close(returnvalues);    
 }
 

Next you will need to go into the lightbox, into the ‘Set Triggers’ option and turn off the ‘X’ icon and the ‘Close’ button.

@pekrzyz this works perfect… Thanks Paul

@pekrzyz this works perfect… Thanks Paul

1 Like