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
Design your order form by adding text, user input and a submit button. Connect your user inputs to a database. Then add the page code to send data your lightbox.
Create a lightbox for customers to entering their payment information (i.e. credit card details). Add input fields and submit button. Finally, add Wix Code to receive data from your Order Form and change lightbox elements such as title and button label.
Design your order form by adding text, user input and a submit button. Connect your user inputs to a database. Then add the page code to send data your lightbox.
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.
Please complete all required fields.
No comments. Be the first to leave a comment.
Hi,
I'm having issue with the code
Below is my page code - 'submit' is the button that opens the lightbox, which has a text field that I would like to automatically fill with the title of the page the user is ok ('text24').
import wixWindow from "wix-window";
export function submit_click(event, $w) {
var data = {
title : $w("#text24").text
};
wixWindow.openLightbox("ContactLightbox", data);
}
And this is my lightbox code.
import wixWindow from "wix-window";
var pmtdata;
$w.onReady(function () {
pmtdata = wixWindow.lightbox.getContext('#text24');
$w("#text36").text = pmtdata.title;
});
However my text box ('text36') stays empty and i'm not sure what to do. Can anybody help me?
julian kuypers
Jul 31, 2018
1
sorry, for the lightbox code I removed '#text24' in getContext()
julian kuypers
Jul 31, 2018
0
Hi Julian,
I have tested your code and it works. Have you tried checking your element names? And ensure that your submit button has the correct event handler (i.e. click).
Elements:
1. Text: #text24
2. Submit Button: #submit
3. Lightbox: #ContactLightbox
4. Lightbox text: #text36
Page Code:
import wixWindow from "wix-window";
export function submit_click(event, $w) {
var data = {
title : $w("#text24").text
};
wixWindow.openLightbox("ContactLightbox", data);
}
Lightbox Code:
import wixWindow from "wix-window";
var pmtdata;
$w.onReady(function () {
pmtdata = wixWindow.lightbox.getContext();
$w("#text36").text = pmtdata.title;
});
Do let us know if you need help implementing the code for your website.
Thank you!
Ben (Vorbly)
Jul 31, 2018
2
Hi,
What has to be the button click event from gui to use this code. i tried but the lighbox wont open.
Isuru Liyanarachchi
Mar 27, 2020
0