When I create a dropdown list at homepage and select one of the choice. How I can pass the value to the text in lightbox.
-
First declare the ID of your DropdownElement.
-
Everything starts when page is ready…
$w.onReady(()=>{
});
3. You need an EVENT-TRIGGER...
$w.onReady(()=>{
$w("#ddnList").onChange( (event) => {
let ddnValue = event.target.value; console.log(ddnValue);
});
});
4) Once you have declared the value of the Dropdown inside a variable, now you are ready to send it over to your LIGHTBOX.
$w.onReady(()=>{
$w("#ddnList").onChange( (event) => {
let ddnValue = event.target.value; console.log(ddnValue);
const lbxResponse = await openLightbox(mylBox, lbxData);
console.log(lbxResponse);
});
});
As you can see there are a few new code-lines, what are they for? And what is still missing?
Well…
a) When working with Lighboxes you will first need to import the API for it first…
import { openLightbox } from 'wix-window';
b) lbxResponse → This will be the response-data which will be send back to your backe, when you have closed your lighbox.
c) mylBox —> This is the NAME/ID of your Lighbox, at this point you also first have to declare it inside a VARIABLE, let’s do it first…
let mylBox = "NAME OF YOUR LIGHBOX HERE";
d) lbxData → This will be the data, which you want to send over to your lighbox.
Since you want to send the selected value of your Dropdown, it will be like the
following…
let lbxData = ddnValue
So, conclusion…(full code…)
$w.onReady(()=>{
let mylBox = "NAME OF YOUR LIGHBOX HERE";
$w("#ddnList").onChange( (event) => {
let ddnValue = event.target.value; console.log(ddnValue);
const lbxResponse = await openLightbox(mylBox, ddnValue);
console.log(lbxResponse);
});
});
So, your first part of your mission is complete. At that moment, your chosen LIGHBOX, should open. But now you need to write the SECOND CODE-PART (on LIGHBOX), to recieve the sent data from your page.
CODE-PART-II:
…continue…
/*****************
Lightbox Code
*****************/
import { lightbox } from 'wix-window';
$w.onReady(function () {
let receivedData = lightbox.getContext();
});