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

Ask the community
,
1

Hi,

I have a dynamic page with a button.
With this button I want to open a lightbox.
I tried and tried but not working.
Now I have hardcoded the name of the lightbox in it, and even then it’s not opening.
Am I missing something?

I have set the name in the properties of the lightbox to HRMCoaching.
I put the code like hereunder. And then in preview click the button.>> Nothing happens
Any suggestions?

import wixData from ‘wix-data’ ;
import {wixWindow} from “wix-window” ;
import {local} from ‘wix-storage’ ;

$w.onReady( function () {
$w( ‘#button8’ ).onClick((event)=>{
wixWindow.openLightbox( ‘#HRMCoaching’ )
});
/*
$w.onReady(function () {
let dienst = local.getItem(‘#projectname2’);
console.log(dienst)
wixData.query(“Projects”)
.eq(“title”, dienst)
.find()
.then(results => {
let items = results.items;
let firstItem = items[0];
/
/
$w(#button8).onClick((event)=>{
wixWindow.openLightbox(“HRM Coaching”);
//wixWindow.openLightbox(firstItem.lightbox);
//});
*/
//});
});

2

See the Wix Window API for more help with how to open a lightbox.
https://www.wix.com/corvid/reference/wix-window.html#openLightbox

Open a lightbox

import wixWindow from 'wix-window';

// ...

wixWindow.openLightbox("LightboxName");
3

Ok thanks, got this working.

Now I’m trying to open a Lightbox Dynamically
Depending on the record in the database. In d=the database there’s a field lightbox, where I have filled in the name of the Lightbox. But this doesn’t work yet :frowning:
Any idea pls?

import wixData from ‘wix-data’ ;
import wixWindow from “wix-window” ;
import {local} from ‘wix-storage’ ;

/*
$w.onReady(function () {
$w(‘#button8’).onClick((event)=>{
wixWindow.openLightbox(‘HRM Coaching’)
});

*/

$w.onReady( function () {
let dienst = local.getItem( ‘#projectname2’ );
console.log(dienst)
wixData.query( “Projects” )
.eq( “title” , dienst)
.find()
.then(results => {
let items = results.items;
let firstItem = items[ 0 ];

$w(#button8).onClick((event)=>{

            wixWindow.openLightbox(firstItem.lightbox); 
    }); 

});

});

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
  } );
}
5

This is wrong here.

$w(`#button8`).onClick((event)=>{

Don’t use the ` for elements as it needs to be like you have already used above that is now marked out.

$w('#button8').onClick((event)=>{

You use the ` when you are moving to another page through button click.

export function myaccountbutton_onclick(event) {
 wixLocation.to(`/account/my-account`);
6

Also change your code to something like this.

find() \
  .then( (results) => { \
    lightbox = results.items[0].lightbox;
  } );
7

Also when you use Wix Storage you need to be storing the variable correctly.
https://www.wix.com/corvid/reference/wix-storage.Storage.html#setItem
https://www.wix.com/corvid/reference/wix-storage.Storage.html#getItem

Examples
Store an item in local storage

import {local} from 'wix-storage'; // ...  local.setItem("key", "value");

Key can be whatever name you want the stored item to be called.
Value is where you add the element name, so in your case it would be $w(‘#projectname2’).value.

Examples
Retrieve an item from local storage

import {local} from 'wix-storage';

// ...

let value = local.getItem("key"); // "value"

The value returned here will be the value that is assigned to the name that you have added to the getItem line, so here it would be the value that is associated with ‘key’

Just note that if the ‘#projectname2’ element is a text box, then you might need to change .value to .text instead.

8

Thanks for your extensive explanations!
It got me some further, but since it is not my basic language I have to dig deeper in it to better understand it.

I had a deadline so I took the help of an external.
Anyway, this is the final result:

import wixData from ‘wix-data’ ;
import wixWindow from “wix-window” ;
import { local } from ‘wix-storage’ ;

$w.onReady( function () {
$w( ‘#button8’ ).onClick((event) => {
let currentItem = $w( ‘#dynamicDataset’ ).getCurrentItem()
let lightBox = currentItem.lightbox
wixWindow.openLightbox(lightBox)
});
});

Thanks again!