Now we are going to build a multi-step wizard inside a model. Here it is. Click on the button. A model window opens with three steps. This is the first step. Let me fill in all the fields. Click Next. It goes to the next step. It validates because if you click Next, you won't be able to proceed. Fill in the fields again.

It validates because if you click Next, you won't be able to proceed. Fill in the fields again. Click Next. It smoothly transitions into the Preview step where you can preview everything and if you feel like editing something again, you can go back to that particular step, complete it and then submit it. So all of this with validation and the best part is, let's say, you are still filling the form. You end up refreshing or closing the window. If you come back, it stays on the same step with all the values prefilled.

You end up refreshing or closing the window. If you come back, it stays on the same step with all the values prefilled. All of this with smooth animations as you can see. Let's build this. Here I have the Livewire component. Let's start with the bare bone structure of a model. Let's see what this looks like. So we have the button. Click on it and a model window opens with placeholder content and a cancel and the close button which will close the model window.

Click on it and a model window opens with placeholder content and a cancel and the close button which will close the model window. So the main thing here is to note that this content area in between is scrollable. So the overall height of the model is fixed or rather there's a max height which is 85 viewport height. So the model doesn't stretch beyond that. It's perfect for such kind of wizards, which is why we break the form into multiple steps so that it doesn't go too long. But in case it does also, this is this content area is scrollable. So now let's replace this placeholder content with all the form fields without steps.

But in case it does also, this is this content area is scrollable. So now let's replace this placeholder content with all the form fields without steps. Let's just paste everything right here. And this has everything. It's quite long of course. So we have the step one content. We have the step two content. Let's just see what it looks like. But before that, we will have to add all of these properties that is the name, product, description in Livewire.

But before that, we will have to add all of these properties that is the name, product, description in Livewire. So let's add them here. Name, category, description, price and URL. Great. And now let me open the model again. You can see all the form fields here, all of the steps and the preview as well. Now let's break these down into multiple steps. Let me add a public property, current step, public int, current step and let it be one to start with.

Let me add a public property, current step, public int, current step and let it be one to start with. And down here, we show the step one content if the current step is one, else if the current step is two and else we just show the step three content. Let me close this down here. Right. Let's look at the browser, create product. And yes, we only see the step one. Great. Let's also display the step count here, right below create product.

Great. Let's also display the step count here, right below create product. Let me look for it. Create product. And let me add the step here. This would be step one of three, two of three and so on. And let's replace the footer with this, which has the back button, which is shown only if the current step is greater than one. So dollar wire is what we use here. So Alpine can access the Livewire property.

So dollar wire is what we use here. So Alpine can access the Livewire property. And if the current step is only greater than one, we can go back. So it shows that. And while you click, it goes to previous step. Yes, we are yet to add these methods, which we will. And then we have the cancel button as it was before. The next button shows only if the current step is less than three, because three is the final step where we have to show the submit button instead. Right.

the final step where we have to show the submit button instead. Right. So here while click submit and while click next step. So let's add these methods in the top. Right here, we have three methods, next step, previous step and go to step. Now this go to step is needed in the final preview where we click on edit and it goes to that particular step. This method is called in the edit button. So let me just show you. Yeah, here we have the edit button component.

So let me just show you. Yeah, here we have the edit button component. Let me open this. And once you click on it, it goes to that particular step. All right, let's go back. Let's look at the browser. Create product. We have the next button. We don't have the back button. Click on next.

We don't have the back button. Click on next. Yes, we see the step two. Now we see the back button as well. We see next and next here. We don't see the next, but we see the back. Great. So now we are able to move between the steps without even validation. Let's add validation. Now go to the method which says next step.

Let's add validation. Now go to the method which says next step. We shouldn't be able to go to the next step without validating. So let me just say this validate step and I will add this method down here. Public function validate step. Right. Something like this. If current step is one, then only validate these three fields because you're not, the user is not even able to see the other fields. This is okay.

user is not even able to see the other fields. This is okay. And nullable, maybe not nullable. We could say a minimum of say 20 characters, something like that. So we validate the step and only then let it go to the next step. But for user feedback, we have to add the error messages under each of the inputs. So let me just quickly do that. Like so. Error name. And so on.

Error name. And so on. I don't want to watch this. All right. I've added all the error messages. Let's check. Create product. Click on next. It doesn't let me proceed. Let me just fill all of these and now click on next.

It doesn't let me proceed. Let me just fill all of these and now click on next. Yes. And here if I click on next again, doesn't let me proceed. The price I think should be greater than zero. You can change that validation. But anyway, if this is blank, it doesn't let me proceed. Let me just fill them and then click on next again. This is great. We have a very nice preview.

This is great. We have a very nice preview. Sadly, if I just refresh the page and try to open the model again, everything is gone. Which is why we need to preserve all these values in the session. And it's so easy to do that with Livewire. Go to all the public properties and simply add the session attribute. Like so. Livewire attribute session. Let me just add that here. And add this for each and every public property so that it even preserves the current step.

Let me just add that here. And add this for each and every public property so that it even preserves the current step. So if the user is in step two and ends up closing the browser, they can come back to that exact step. So let's do this. Add it to all the properties. Like this. And now, let me fill it again. Click on next. And let's say I end up refreshing the browser.

Click on next. And let's say I end up refreshing the browser. Create. Notice we are in step two. Obviously step one remains filled. This is amazing. Let me fill this as well. Next. Now the final thing pending before we add smooth transitions is to submit this. We don't really have to submit for this demo.

Now the final thing pending before we add smooth transitions is to submit this. We don't really have to submit for this demo. I'll simply add a submit method where it resets the form. So let me scroll down here and just add a submit method. So I'm simply resetting the form and dispatching the toast that we made in the previous episode if you watched. This is good. Now is the final piece. We use view transitions to make those forms slide right and slide left. Let's see how that's done in Livewire version 4.

We use view transitions to make those forms slide right and slide left. Let's see how that's done in Livewire version 4. The first thing we do is scroll to each of those steps. The step one div and use wire transition. Give it a name, form and we add the same name to all the other steps as well. So it's the same thing that's transitioning. Copy this and paste it down for the other two steps here. And here as well. All right. Now without doing anything else, we already have subtle animations.

All right. Now without doing anything else, we already have subtle animations. Let me show you. Create product. Go back. You notice earlier it was just appearing and disappearing. Now there is a slight animation when the height changes, but this is not what we want. We want it to slide to the left and right. For this, we need some keyframes and some custom animations. Let's head over to the CSS file.

For this, we need some keyframes and some custom animations. Let's head over to the CSS file. So when I click next, I want the first form to slide out left and the second form to slide in from right. So let me add two keyframes, slide out left and slide in right. Now we target the particular form using view transition old. So the old one is what is supposed to slide out left. So we say view transition old and we have to specify what it is. Here goes the name that is the form and we use the animation property. We say 300 milliseconds, ease in out, slide out left.

Here goes the name that is the form and we use the animation property. We say 300 milliseconds, ease in out, slide out left. This is the keyframe. Now let's do the same for view transition new as well. So the new form that is the next step slides in from right. Okay, let's see what this looks like. So we have step one next, you see, it really did animate. Of course we are seeing those borders and everything before it completely faded out. For that, let's target the view transition group form and we have to set the overflow property to clip.

For that, let's target the view transition group form and we have to set the overflow property to clip. So that way it hides it and keeps it within the model window. Let's try again. Click next. And yes, this is actually what we need. Click next again. Perfect. But now notice what happens when we click back. It still looks like we are going forward into the next step.

But now notice what happens when we click back. It still looks like we are going forward into the next step. Back again, it's moving forward. That's because when we go back, step two becomes the old one and step one becomes new. In this case, we need a different direction. So we have to tell Livewire if it's going forward or backward and animate differently. So along with the keyframes slide out left and slide in right, we also need slide out right and slide in left when we go backwards. Let me add those two. So here when you scroll on top, when we go to next step, after you validate, you'll have

Let me add those two. So here when you scroll on top, when we go to next step, after you validate, you'll have to say this transition and set the direction to forward. Similarly, for previous step, you will have to say transition backward. And for go to step that is in the preview form, when we are coming back to a step, the transition is backwards again. This is the case for go to step always because we're in the last step. If you're adding go to step somewhere else, you might want to calculate and then set the transition as backward or forward. For this demo, I'll just keep it simple.

transition as backward or forward. For this demo, I'll just keep it simple. Now, once we set the direction, we will have to target it accordingly in our CSS. So here, this part is for the forward transition. This is how it's done in Vue Transition. So we say HTML active view transition type forward, and then we do this. So this is the new CSS syntax. It's okay if you don't understand this, but this is how it's done. And for backward, it's the other way around. We use slide out right and slide in left.

And for backward, it's the other way around. We use slide out right and slide in left. Okay. So now this should work as expected if everything is right. Let's check. Create product. Go to next step. It was working anyway. Click on back. And yes, the transition is reversed now.

Click on back. And yes, the transition is reversed now. So next, next, back, back, and then let's try go to step. So if we go back to this and that's smooth as well. This is beautiful, right? So we just built a multi-step wizard with validation, session persistence, and smooth animations. Everything simply using Livewire so you can just copy this entire thing and put it in your app. And it simply works.

your app. And it simply works. Don't forget the CSS, of course. See you in the next one.