Coding with Velo: Frontend | Full Course | Wix Learn

Hey there and welcome to the Velo front end course. I'm Joshua, developer advocate and I'm going to be showing you how to use the front end for Velo by Wix. So throughout this course we're going to be doing a number of things from creating static and dynamic event handlers, creating a simple hello world example, and even using our own Wix internal APIs like storage window. And on top of that we're going to be also learning how to use some of our tools like the release candidate and logging and monitoring. So you'll be able to combine all these skills together and by the end you'll be able to be a solid front end developer with Velo by Wix. So before we get started, we have to turn on dev mode to enable Velo. So we just go here to the top of the screen and we'll turn on dev mode. So dev mode gives us access to add our own JS code, connect to Wix internal tools and our own APIs that we're going to be going over throughout this course. So we'll turn on dev mode and you see that we got started without any setup. I already have some code here and you'll notice that I have some new things on the screen here from the code panel and even the Velo sidebar. We're going to start here with the code panel or the ide. The code panel has different tabs depending on the page that you're opened on. Right now we're on the Velo front end page. Then we also have another tab here for the MasterPage JS. MasterPage JS is a file that controls all of the pages on your site. So you can add code here to make different functions happen on every page. So for example, you have your headers and your footers. Maybe you have a search bar at the top of your header that you want to show up and operate the same way on every single page. You can do that. So back to the Velo front end tab, it's pretty easy to navigate back and forth. We also have our CodePen or our IDE. So our IDE has its own eslinter inside of it. It's kind of similar to VSCode and it also has autofill and autocorrect. So if I go here and import a new API, you'll see that I get a list from this auto fill here. So I can choose a lot of APIs from Wix data, Wix CRM backend, Wix animations, WIX Stores to work with that Vertical, you name it. So if I type in WIX Location, which is a front end API that we'll be going over in this course, you'll see that it's here. But we also notice that I'm getting some errors as well. So that's one thing that our editor can do for us and lets us know if we have any duplicates or anything wrong with our code. So we'll just go ahead and delete WIX Location, since we already have it in our code. And we can even go here and right click and format our code to make it look nicer. So as we select different elements on our page or on our editor, you'll notice that we have a new piece here to our code panel, and that is our Properties panel. Our Properties panel lets us manage all of our different elements on the page as we click them. So you'll see here I have our welcome message. That's the ID that I set it as. And I can always go here and edit our ID name. Below we have our default values. These default values are hidden and collapse, and that just depends on the element that you have selected. So our hidden and collapse, we can set these as default values so that when the page loads, it would automatically have done these actions. So we can even do this through programmatically with code as well. But you have your default values you can select here to boost things up. So below that we have our event handlers, and our event handlers have all of our different static event handlers that you can add to depending on the element that we've chosen. And this also depends on the data type as well. So if it's a text or if it's a button, there's going to be different event handlers for each type of data type. So now onto the Velo sidebar. The Velo sidebar has a lot of options, but primarily for the front end, we're going to focus on page code. Page code has a folder here called Main Pages, and this is where I can access all of my different pages that I have throughout my project. So as I click the different pages, you'll notice that in the code panel, the tab is changing. So each page has its own way of adding code and controlling it. Below that we also have an area here for WIX members, and if I added WIX stores or even bookings or events, it would add more front end pages to my page code option here. And then on the bottom of that we have our lightboxes, which we're going to be going over throughout this course as well with WIX Window and Wix Location. And then last but not least, we have our masterpage JS which we just talked about. So these are all the tools that you can get up and ready to go with your front end development. You can also use the Velo tools here on the side to check out the release manager secrets, Manager monitoring, which we're going to be talking about a little bit more later on the course. If you need any help, you can click here for Velo help to check out our API reference and then you can even look at our conversations in the forum as well. So to get started we just have to talk about a few different things and some other exceptions. So when you're using Velo by Wix, you're not able to use HTML or CSS. This is just straight JavaScript. You also don't have DOM access, but you do have access to using our page elements and also our front end APIs. So we're going to be going over a basic example that we've seen in many other programming languages to get started and that's a hello world example. We're going to be doing this the Velo way. So if you're familiar with JavaScript, this is not going to be something that's very foreign to you, but showing it the Velo way and how we use our selectors is going to open up your eyes to a whole other world of development. So we already have dev mode enabled and we have a bunch of elements on our page. So let's just get started by changing the text and showing you the difference between using HTML CSS and then maybe just JavaScript with Velo. So go here, bring up our IDE a bit and you notice that I have some elements in the page and I hover over this. It says welcome message. That's what I have it ID as. I changed it in the Properties panel. So when I select it, the properties panel does appear and I can see the ID and welcome message. Same goes for the other text on the bottom here. And what I want to do in this example, I'm going to change the value of this text to something different. So let's change welcome to to something else. So since we have the ID which is welcome message, we can use that and select the element and then use a different property. Since it's a text, we'll use the text property to then change it to a different word or different string or text. So what we'll do now is in the onready function we'll just do $W and we'll select welcome message. Next, we're going to use the text property. Text and this text property, we can equal it to a string or another text. So we'll equal that in quotes to hello World. Awesome. So when we go to preview mode, we should see a change in this welcome message and it won't say welcome to. It should say hello World. So preview and we get a change of hello World. And the reason why we get this change already is because we have it inside of our onready function, which we're going to talk about more in depth in the next lesson. But basically we're presenting this code and it's already loading what we have changed in the functions before we get to the page. So we'll go back to the editor now and we're going to add some more functionality to this page as well. So I think what I'm going to do next is I'm going to add a button so that when I click this button, it's going to make something else happened. So maybe change the text to something different once this button is clicked. Let's try that. So we go here to the add panel and we have a list of different buttons here. But I like the way that this say hello button looks. Just because it's relevant. I'll drag it and drop it here and I'm going to select it. So the Properties panel, I'm just going to select the button and change the name of the ID to hello button. Cool. So now that that's selected in this hello button, I'm going to open up our code panel again and say hello is a cool label or text to have. But I want to make this dynamic. And the reason why I would want to make this dynamic through code is because maybe there's some other function that I want to interact with that's going to change the text over time or maybe some API over the web that I want to populate this value as something different as the API is changing. So there's many instances, but it's mainly just so that we can customize the way that this button is working rather than just working with the default menu and making things static. So we'll select this button $w, we'll select the button and we'll say hello button. And buttons have a different way and a different property of changing the text. And we're going to use that with the dot label property. So it says dot label is set and gets a label of a text button. And we can just equal that to a string as well. So equals to, let's say this one, this button says what's up? Or say what's up? Cool. So when I go to preview, I should see a change in what my button looks like, but that looks like there's a little bit too much text. So we'll go back and we'll change it to something shorter. We'll just go to what's up? So we have this button, but we want some type of action to happen. We change the labels, we change the text. But when I click this button, let's make it do something else. And we'll change it to a different message now. So instead of hello World or Welcome to, we're going to change this same welcome message to something else. So first what we're going to do is we're going to select our button and then add an event handler. But we're going to add this event handler dynamically with code. So we'll select the button once more. $w hello button. Instead of changing the label, we're going to add an event handler. And this is going to be on click. So when we click the button, a certain event is going to be handled. So on click. So now what we're going to do is select the text element and just keep in mind that you can select any type of element and add any type of functionality to it within this onclick function. It doesn't just have to be what I'm doing now. So in this on click, we're going to change this text, this welcome message once more to Earth is the best. So I'll select Welcome message again. So $W. And we'll select welcome message and we're going to use the text property once more and we're going to change this string to Earth is the best. So now let's go over to preview mode and check this out. Preview, open it up. We can even bring down our developer console a bit. So you notice we have hello World. That's already changed. What's up is our button. But now let's see what happens when we click our button. This is going to handle our event that we just created. Change what's up. And now you see Earth is the best. So I could have moved this over design wise or maybe add less text. But this is the great thing about preview mode. I can go in and out the editor and then what I see is what I get. I can drag and drop and get back to my code really easily without having to go through HTML or css. In our last lesson we went into a lot of detail about just getting the basics of Velo. So we had a basic hello World example where we just had our text appear and we clicked a button and we made some text change. So now we're going to go into more detail about $W and some more situations that you'd be getting into along the way. So let's get back to the editor and check this out. So I have a few different elements on my page already, and Also in my IDE you can see a few times that I've used $W. So I use $W to select different elements on my page. This is different from HTML and CSS because I don't have to use get element by ID or change anything within our HTML. Everything I can change right here with JavaScript or with the editor in the menus that are available for you to use with wix. So that helps pick up a lot of the speed and cuts the development time in half. So what I'm going to do now is use $W to interact with some more things on the page. So you notice here on line number five I have $W onready. So this is an onready function that actually starts to load and present certain elements on the page before our visitors are there. So our onready function uses $w because the whole page acts as an element itself. So $w helps you select elements with your code. And in this example, we're going to use some things from our backend actually, which is going to kind of make things make a little bit more sense between this course and the backend course as well. And we're going to be using a Velo package just to use some more front end helpers with our WIX Animations API. So this is going to help us jumpstart adding animations to our site. So let's go over here to code files real quick. It's the only time this course where we're going to be doing this and we already have a Velo package already here and this is WIX Animations Helper. So let's navigate over to the readme and we're going to learn a little bit more about this package and maybe about some other packages that are coming down the line as well that you can interact with your front end. So the Animations helper is going to be using the WIX Animations API, which is a front end API to add animations with JavaScript in the readme. It already gives me a breakdown of exactly how to use this tool, how to use the package, and then also I can start to add my own custom functionality to it as well. So the Velo packages are a great way for me to reuse code and get up and going anywhere, either if it's this site, an existing page I had beforehand, or sites I have in the future that I'm creating. So let's scroll down because I think I want to make this Velo message text. I want this to zoom in and out anytime I hover my mouse over it. So this is when we get into event handlers as well, because with event handlers you're able to use $W and then add some more functionality to it. So we have our welcome here. Let's go to our readme once more for this package and we'll check it out. So I want to make this zoom. So there is a zoom function here that we're going to use. And you notice how this readme actually really breaks down the code and tells me what I need to import and what I need to use. So I already have this imported. I want to select an element. So saying here to zoom into text element on hover, we first need to stop the animation function from playing by default. So we're going to do that right here by using the zoom function. So the great thing about this readme here is I can just get up and going without having to reinvent the wheel with Velo packages. I'm just going to go and use the same code that's here now. What I'm going to do is add a static event handler for this purpose. I already have some here. I'm going to actually delete them. Because the thing is about static event handlers is that they only are added for one instance at a time. If I was to add this again, it really wouldn't work out. So it's the difference between static and dynamic event handlers. I'm just going to add a onmouse in enter and we're going to use that same code. Let's format Then I also want to add a mouse out. I can always go here in my static event handlers and change the name out depending on what it is. But since I have the name of my ID and I already know what event I want to handle, it tells us the name first that we have as the ID and then what the event is. So we'll just click enter here. And now that we have both of these event handlers here, let's take care of these comments let's get them out the page. Right. So I'm going to actually use the same code as well, format. And the great thing about Velo packages, it already comes ready with everything you need to do without the same idea of the element you're selecting, because there's no way for them to know exactly what elements you have on the page. But this is a great starter code for you to get up and going. So we're here to welcome, And we can change this to welcome as well. So for the mouse in, I want the animation to play, and for the mouse out, I want the animation to reverse. So I'm pretty much zooming in and zooming out, depending on where my mouse is. So we're going to use the text zoom timeline, and then we're going to use the play function. For the mouse out, we're going to select the text zoom timeline and we're going to use the reverse function. So now when I click on preview mode, when I hover over this text, we should have it zoom, and then when I hover away, it's going to zoom out. But you can also change this with the WIX Animations API on your own. So definitely check out that documentation and you can learn how to really make this animation do exactly what you want in combination with the Velo package or just doing the code yourself. So when using Envelope by wix, there's two different types of event handlers that we can add. We have static event handlers and dynamic event handlers. So we're going to start with static event handlers here. So when we select a certain element on our editor, we're going to see event handlers appear on the Properties panel. So when I click this text here for welcome message or even this other welcome text as well, you'll see that I have event handlers that are there for me. So even from the last lesson, we use the static event handler to make the text zoom in and out when we mouse in and mouse out. So when we hovered over the text, it would zoom in and zoom out. And those are static event handlers. So we specified which element needed that static event handler by the id, which is given to us in the Properties panel itself. So let's go back to this welcome message, and we're going to take a look at the different types of event handlers that are available. So text have different event handlers than, let's say, an input for a dropdown or even for input for text. You notice that there's nothing here for onchange because there's nothing that we're changing in the state of this element in terms of an event handler. So, speaking of different elements that we have different event handlers, we're going to add a button now. So add a button, drag it to our page, and the first thing we're going to do with this button is make sure we rename it to something that is relative to what we are creating. So instead of button number one, we're going to change this to a name that is going to relate to what we're doing, and we're going to name this spintext button. So my plan is to create a button that makes all the text on my screen spin at the same time. So we're doing this all based off of the type of element this is. I plan to continue to use the WIX Animations Helper Velo package that I just installed from the last lesson to continue to use it here. So we used static event handlers in that last lesson, but we're going to show you the difference between using both static and dynamic here. We're going to have them do the same exact thing, but we're going to write the code differently. So first, starting with a static event handler, now that we renamed this element to SpintextButton, we're going to add an event handler and I'm going to show you this workflow. So we're just going to click on click, because this is the function that I want with this button. When I click this button, I want some type of action to happen. Afterwards, we'll click this and you'll notice that right here next to the OnClick event handler, we have SpintextButtonClick. So it's the name of the ID that I stored already for this element. And then I also haveclick, which specifies the type of event handler that is actually happening. Now, I can rename this anytime I want before I put it onto my IDE or my code panel. I can also delete and also recreate these event handlers as well. But I'm just going to go here and click Enter or Return and it's going to create a event handler for me on my code panel. So you see, you notice, like, I have this trash can here. I can remove this event. I can even add other events on top of each other as well. But we just want the simple on click event handler. So let's get rid of these comments. I'm going to show you how easy it is just to add any type of action to this. So we want all of our text to spin when we click the button. And what we're going to do is we're going to use the spin function from the Velo animations helper and we're going to use that to make all of the text elements that fall underneath this element type to spin at the same time once the button is clicked. So these examples are simple, but you use these to like, you know, open up your mind into the creativity of what is possible with Velo by Wix. So we're just going to use spin very simply and then we're going to specify the type of element that we want to spin once this button is clicked. So I want all of the text elements to spin at the same time. And if you've seen our back end course where we actually use this Velo package as well, you'll notice that we did the same thing for spinning a vector image as well. But here we're going to be showing you the difference between dynamic and static events on the front end. So we're going to choose the type of text and I could just get up and go home with this fellow package. Really easy. What I'm going to do, I'm going to just statically change the name of this button and I'm just going to have it say spin just so I know the action. I could even add a function that after I click this button, using a promise that's going to be returned that I want this label to change once the button is clicked. So you can do a whole bunch of different things. Let's go here to preview and I'm going to click spin and look at that. Every text element on my page is spinning at the same time. Now this is a static event and you saw that it was pretty easy to get this going. I'm going to do the same thing, but this time I'm going to do it with a dynamic event and I'm going to tell you the difference between the both. But before we get started into the dynamic events, we have to make sure that we don't override anything that's going on or cancel anything out. So you can have dynamic events and static events happening at the same time. So just for best practice, what you should do is go back to the button, delete this onclick event handler, and for this next example, I don't need this code. So I'll get rid of this as well. But I'm going to keep the ID of the button the same and we're going to use this ID and $W select the button and add an onclick function dynamically through code. So I can use functional programming. So where I take the function outside of the onready and then invoke it back into it. Or I could just create the function right inside the onready. So just for this purpose, we're going to create this function right here in the onready and we're going to on click add this event handler dynamically to this spin button. We're going to select this spin text button with $w and we're going to name it spintextbutton for spin text button. We got to think about what type of event we want to have happen here. So I'm just going to mimic what we just did with that static event handler and I'm going to use dynamic event handler here with onclick. The reason why I would want to use a dynamic event handler here is because there's going to be so many other changes that I probably would want to happen within my site when I do click this button and maybe that I have some other custom functionality to happen as well. It makes it a little bit easier to do that when I'm coding, especially if I have some third party services that I have installed here with the static event handler, it kind of locks me in the box a bit. So this course is going to be focusing on a lot more towards dynamic event handlers. But static event handlers are very useful though. So what we're going to do is we're going to go here and add our onclick function. So within this, I'm just going to call spin. Within the same scope going to use this function and within spin, let's just choose the text elements and I encourage you to look through the readme of this velo package as well, because it definitely details how you could select different elements individually. And you can see that from some of our previous lessons in this course as well. So you have spin text and we're going to go to preview. So now let's spin it. And there you go. And even from the last animation that we created with the zoom from the last lesson, we can still use those things in sync with each other. Right here. As I hover over and I hover out, it's zooming in and out of this velo word that's going in a circle. There's a lot of ways that you can use the timeline to create unique experiences on the front end with JavaScript. So there's no need for HTML or CSS here. This was just straight JavaScript and Velo APIs that are built in. So although we don't have DOM access here for the front end, there's plenty of front end APIs for you to choose from. So in this lesson we're going to dive in and learn about wix Location specifically. Now, WIX Location is an API that allows you to get information about your URL and even helps you navigate to new URLs across the web and even on your own website. So what we're going to do first, we're going to use a very simple example using Wix location 2 to navigate to a new page. So let's navigate to the Wix.com Velo page so we can go right there and learn all the information we need to know about Velo. So before we get started, we have to make sure that we have WIX Location imported at the top of our front end page here. So import WIX Location right at the top. Now, to navigate, I'm going to need something to, you know, initiate this action. So let's drag in an element like a button. So I'll minimize my ide. I'm gonna go to the add panel now and let's go look for a button and we'll drag or drop our button right here. Now let's change out this button id. I'm gonna change this ID to Velo navbutton. Okay, so now that it's changed the Velo now button, I'm going to use $W to select this button and then also add some type of on click function to it so that when I click the button, we're going to use WIX Location to navigate to a new page. Bring up my IDE some more. I could even change out the name of this button programmatically by just selecting the Velo Nav button as well, just so we can see that change when the page loads, because we're storing it here in our onready function. So Velo Nav button, we'll change the label and we have that label equal to go to Velo. Let's make this button a little bit bigger and we're going to move it right here. So now the button should say go to Velo should fit. And what I'm going to do now, I'm going to add an on click function. We can do this dynamically and we're going to do it right here inside the onready function. If you want to use functional programming, bring it out and invoke the function back in your onready. You can do that as well. But just for this purpose, we're going to do it right in the onready function. And what I'm going to do now, I'm going to select this button and then also use on click and then on click. We're going to use WIX location. So let's select our button. So $w velo nav button. When you click the button, I want to navigate to a new page. And that new page is going to be Wix.com Velo so now Wix location right here in our autofill WIX locations here I'm going to use the dot to function. Wix location 2 directs the browser to navigate to a specified URL. So it's going to be looking for a string needs to be string format and it also needs to be an HTTP format. So you can't just type www.wix.com Velo we have to use HTTP. So we'll do HTTP colon forward slash, forward slash wix.com Velo and you notice underneath I'm starting to get this underline here. So that to me is verifying that this, this string that I put in for this URL is actually a URL. So if I just did www.wix.com velo it would come up as an unidentified format. So we need to keep it in HTTP. So now that my WIX location is here, ready to go, I have my on click for my nav button. WIX location's inside of it. It's on my onready function. My button label's gonna change. We have to go check this out. But something different about WIX location. WIX location operates in a published version of your site. We try to keep you within the editor and make sure everything is running smoothly. So we're going to check out our published version of the site. So what we're going to do, first we're going to save. We're saved. And now let's publish our site. Cool. Site's published and we're going to go view our site right now. And now when we press this button, we should be able to navigate to Wix.com Velo so let's go to Velo. And there we go. So now we're on Wix.com Velo and we use Wix location 2 to navigate to this page. So now that we've navigated to Wix.com Velo with the Wix Location 2 function, we're going to talk about The WIX query function with WIX location. So querying was going to help you navigate to a new page and then also get results based on what you typed in your query. So let's say you had a database full of planets and you wanted to get a result on another page from a search, and it's just going to show all the planets that are gas giants. So using query is going to help you query through this collection and you can even combine it with WIX data to filter the collection and give you the results you're looking for. So for this lesson, I'm just going to show you how to structure this and you can customize this functionality any way that you like. First, what I want to do, I'm going to move this button over here to the side and I'm actually going to add another input. We're still going to use the same button because there's no need to continue to reinvent it. We're done with that example and we're going to drag this input right here and I'll even design it a little bit, change up the colors, make it more readable, and we're going to make this white, going to turn the text to white as well, and even the placeholder color. Okay? So I think that should be good enough for right now. We can even go in here and edit our placeholder real quick and we can have this say search. Right? And our button over here can also say we'll go here to the bottom and we'll change this programmatically since I was showing you the same example before. And this button is going to say submit. Cool. So let's take away this on click function because we don't need it just yet. And you know what? This time around, I'm going to use a static event handler. So let's get rid of that function. We're going to format our code again and let's click this button and add an on click from the Properties panel. So return. Let's get rid of our comments. So now that we finished that, we also have dragged in our input. We have a button there. And what we're going to do inside of this static event handler, we're going to capture the value of what's being typed inside of this input box. And then we're going to also use WIX location and the query function as well to then help us navigate to a new page and even query and add to our URL. So what we're going to do now is we're going to select Our input here, let's just name input1. So let's just change this to search input, right? Just so we can work with it and have a name that we can recognize. $w again, so $dub and we're going to change search input and we're going to get the value. Now I want to be able to use a search input, so let's make this into a variable. So let search input equal to what we have selected here. Now I'm going to use that very same search input variable that I just created and I'm going to create a conditional. So we're going to say if search input, then we're going to use Wix Location 2 and we're going to navigate to a page that is already part of our project here. So we're not going anywhere external. We're going to navigate to one of our pages. So in quotes, forward slash, let's see if we can navigate to the homepage and change up our URL. Right? So we're going to do home and you have to make sure when you're using your own pages that this is in lowercase, Right? So it's something to keep in mind. And then on top of that, we need to have a certain query that we have in question here. So we have question mark and we're going to use query equals. And we're going to concatenate this query and we're going to use our search input. Right? So we're going to navigate to the homepage, we have a query, and the query is going to be based off of what we have in the search input. So let's save our page. Cool. And we can publish and let's view our published website now. So this should bring us to the homepage. And then when we look at the homepage's URL, we should have whatever we typed in our search input. So let's view our site. And I'm also going to go here and open up my toolbar. So let's view our site. We're going to type in Mars and pay attention to our URL submit. And notice how we just went to another homepage here. It looks the same, but the URL is different. We have query equals Mars. This is a powerful tool because if I did have a database on here or repeater or connect that's connected to a data set, I can use these same query parameters to then filter my database and filter my data set that's going to show different results on the page. Now let's just say I Wanted to show all of the gas giants. I can use WIX Data Set and the WIX Data Filter method to then filter through that data set and look for anything that contains gas giant if I have that as a field in my database. So now we know how to use Wix location, Wix location 2 even get some information about our URL with query. You can take this even further and you can check out our API reference and look at some of the other examples we have there to use WIX Location. There's even functionality to do some things with phone numbers and emails. So look at our API reference, there might be something there that interests you. So we might not have DOM access, but there's plenty of front end APIs that you can use and you can manipulate a lot of things that are happening on your page. So we already have a lot of these things built in and I'm going to show you how to work with WIX Window in this lesson. So I already have WIX Window imported at the top of my code already. And what I'm going to do is I'm going to create a dynamic event handler and I'm going to be passing data from this page from this form that I have. So if I just minimize my screen here and I see I have ad name, ad planet, submit the data that I'm going to be collecting from this small form, I'm going to be sending it to a lightbox using WIX Window. So first let me show you my lightbox and how I want it to work. So I have this one lightbox that I created. I added it from the outpanel and it says welcome name, get your spacesuit on and let's take off. And the planet planet name. So right here planet name is just a placeholder. So I have planet name, planet object, that's what I have identified it as. Then I also have name, which is name object. So the whole purpose of that form is to pass the name that I'm collecting from the form and the planet name. And I'm going to be sending it to this lightbox so that when I submit, the lightbox pops up and lets me know, hey Joshua, you're from planet Earth, get your space suit on and let's take off. So there's a number of reasons that you could be using this type of technique. It could be for a store when you're letting a customer know that they purchased something and you're thanking them and maybe even dropping a promo code there, right? So there's a lot of ways that you could be working with passing objects to your lightbox. So let's go back to our page with the form and let's begin by creating a dynamic event handler with that submit button. So you have a submit button here. We have already ID'd it, and this one is called Submit button. There's no event handlers here that are already taken from the static event handlers menu. But I'm going to be creating a dynamic event handler now. So let's select using $W the submit button. So $W. And we're going to be choosing our submit button and then on click function. With this on click function, we're also going to be looking for an object to be created. So first let's create this object and call it dataobj just for short. And inside this object, we're going to be placing a key value pair for our submission. So we need a key for our name and then a value. Then we need a key for our planet name and then a value for that as well. Right. So when we click it, we're going to be getting those values. Then on top of that, once this button is clicked, we want the WIX window to pop up, but then we also want to be sending the data. So follow along and I'm going to be showing you exactly how to do that. We have data object, and within this data object, I'm going to create a key for the name, and I'm going to have this name equal the value of what's inside this input. So whatever is typed inside of this input when the user's on this page and typing it in is considered the value. So what I'll do now is I'm going to select this input box and then use the value property in order to capture that value that I'm typing in or the user. So this is all dynamic. I'm going to be passing in new data all the time, depending on who's been visiting the page. So I have name, and I'm going to select the name input here. So $w name input and then I'm going to be using the value property. Awesome. And let's do the same thing for planets. So I can just go here, copy, paste on a new line. Let's swap out the names to planet. And I'm going to be using the planet input. But actually let me go here and erase it all just so it doesn't override it. Planet input. Cool. And I'm getting an error here. And that's just because in this object, I didn't put a comma here to separate the concerns of what these objects actually are. And now in the last section of this, I'm going to be using using the WIX Window API to open the Lightbox. So WIX Window and we have a function called Open lightbox. So when you have Open Lightbox, you have to look for the name of the lightbox and any data that you want to pass by. Those are the arguments that we're going to be using here. So the name of the Lightbox that I have is called Popup. You can name it whatever you like, but you have to make sure that this Lightbox is exactly named the way that you have it, the way you're going to put it in your code. It's case sensitive. So we're going to use pop up and we're going to have this as a string because it's going to be accepting a text. It says it right there on the autofill and it says it right here. So I'm going to put it in quotes. And the name of our Lightbox is called popup. So popup and, and we want to be able to pass a data object. So we just created an object and what we're going to do is just simply type in dataobj because that's what we named the object. So it's data object, but dataobj for short. So we have dataobj. Cool. So that step's done and let's go and navigate to the Lightbox. So now that we have the WIX window is going to open up once we click the button and then we're going to be opening the pop up Lightbox and then pass the data through. But how do we get the data through? Let's find out when we go and open up this Lightbox now. So right over here, Lightbox, we have pop up. And remember, I have my welcome, I have my name, the planet name. And I only really want to be working with two dynamic elements here that I want to change here and there. So welcome can stay static. I just want that to stay there. There's no code or any event handlers attached to it. Same with this sentence about get your spacesuit on and let's take off. And even just this planet text, I only want to be manipulating the name and the planet name. That's it. So to get that up and going, we have to also create a data object that's going to be getting the context of what is coming from that form onto this page of the Lightbox. So that's why we called the popup lightbox name inside of the last page. And then also use our data object that we passed through. So we're going to be utilizing that right now. So what we have to do is create a new variable for the data object and we'll have that equal to wix window lightbox get context so we can grab all of the content that we are passing over from the form over to this lightbox. So let's start with the wix window lightbox get context. Now that we've got the data, we want to swap it out. Now this is a static value. This is also static value right now, but let's change it. With this dynamic data passing through, first things first, let's use $W again to select the name input. But then we're going to replace that text using the text property and press and replace it with the data object name that's coming through from that form. So what I'm going to do now is W and then we're going to select the name object. So now we have name object. We want to be able to change the text of what is presented on the page. That's fine. So we're going to do text and want to have that equal to the name object from the data that's being passed by. So let's just use data object. Cool dot name.