Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE SENDING DATA TO LIGHTBOX
Need to send data from your webpage to lightbox? This tutorial will show you how to customize your Wix Lightbox by sending data from your webpage using Wix Code. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Text Elements
-
Event Name ID: #EventName
-
Amount ID: #amount
User Inputs
-
Name: #name
-
Email: #email
-
No. of tickets: #quantity
-
Date: #datePicker1
-
Comments: #comments
Button Element
-
Submit Button: #submit
The Lightbox
Light Box: CheckOut
User Inputs
-
Cardholder Name Field: #cardname
-
Card Number Field: #cardnum
-
Expiry Month Field: #month
-
Expiry Year Field: #year
-
Card CVC Field: #cvc
Text Elements
-
Lightbox Title: #LightBoxTitle
-
Error Message: #errortext
Button Elements
-
Payment Button: #SubmitButton
THE CODE
Page Code
import wixWindow from "wix-window";
export function submit_click(event, $w) {
var data = {
amount : $w("#amount").text,
EventName : $w("#EventName").text
};
wixWindow.openLightbox("CheckOut", data);
}
Lightbox Code
import wixWindow from "wix-window";
var pmtdata;
$w.onReady(function () {
pmtdata = wixWindow.lightbox.getContext();
$w("#SubmitButton").label = "Pay " + "$" + pmtdata.amount;
$w("#LightBoxTitle").text = pmtdata.EventName;
});
// Add Payment APIs //
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.