Cannot even get a button working. What am I missing?

Ask the community
,
4

Simply read the Wix API Reference for help with this.
https://www.wix.com/corvid/reference/wix-window.lightbox.html

Or make use of the search function in this forum as there are many previous posts about this.
https://www.wix.com/corvid/forum/community-discussion/dynamic-page-lightboxes
https://www.wix.com/corvid/forum/community-discussion/lightbox-with-dynamic-content-via-button

How do I pass data between a page and a lightbox?

When you open a lightbox using the openLightbox() function, you can pass an object containing data to be used in the lightbox. In the lightbox’s code, you call the getContext() function to retrieve the data sent by the openLightbox() function.

When you close the lightbox using the close() function, you can pass an object containing data to be used by the page that opened the lightbox. This data is retrieved from the resolution of the Promise returned by the openLightbox() function.

A scenario where information is passed between a page and a lightbox
This example demonstrates how to pass data from a page to a lightbox that it opens and from the lightbox back to the page as it closes.

It assumes that the page has:

  • An open button that is used to open the lightbox.

  • Two text inputs where information that is to be passed to the lightbox is entered.

  • Two text elements where information that is passed from the lightbox is displayed.

It assumes that the lightbox has:

  • An close button that is used to close the lightbox.

  • Two text inputs where information that is to be passed to the page is entered.

  • Two text elements where information that is passed from the page is displayed.

/*************
 * Page Code *
 *************/

import wixWindow from 'wix-window';

export function openButton_click(event) {
  wixWindow.openLightbox("MyLightBox", {
    "pageSend1": $w('#pageSend1').value,
    "pageSend2": $w('#pageSend2').value
  })
  .then( (data) => {
    $w('#pageReceive1').text = data.lightboxSend1;
    $w('#pageReceive2').text = data.lightboxSend2;
  } );
}

/*****************
 * Lightbox Code *
 *****************/

import wixWindow from 'wix-window';

$w.onReady( function () {
  let received = wixWindow.lightbox.getContext();
  $w('#lightBoxReceive1').text = received.pageSend1;
  $w('#lightBoxReceive2').text = received.pageSend2;
} );

export function closeButton_click(event) {
  wixWindow.lightbox.close( {
    "lightBoxSend1": $w('#lightBoxSend1').value,
    "lightBoxSend2": $w('#lightBoxSend2').value
  } );
}