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

1/2

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.

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

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP