Livewire Multi Step Forms
This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
06. Creating the product wizard

Episodes

0%
Your progress
  • Total: 1h 38m
  • Played: 0m
  • Remaining: 1h 38m
Join or sign in to track your progress

Transcript

00:00
OK, so to kick off our practical example, let's just roll through everything we've already covered and create out our wizard, each of our steps, and then we'll
00:07
get our first form built out. OK, so let's go over and, of course, use Livewire to make out a component here. And we are going to put this under a product directory,
00:19
a create directory, and then we're going to create a create product component. So of course, you can go away from this. You don't need to create this structure.
00:28
But this is just how I found helps keep things really organized. So let's create that create product component. And we're going to go ahead and put that directly
00:36
on the dashboard over here. So Livewire, and this is now in products, create, and then create product. OK, great.
00:46
So that's on the page. Let's go over to the create product component. And we already know the first thing we need to do is extend that wizard component.
00:56
And we're done. So we don't need our render method, but we do need our steps method in here. So let's go ahead and create out our steps method
01:04
that returns an array. And we'll just return an empty array from here just now. OK, so we know that we're going to get this error because we don't have any steps.
01:12
Let's create out each of the steps up front so we know what we're doing. So phpr to Livewire make, and let's create out each of these steps, which I'll have in history.
01:21
The first one is going to be a meta step. So this is going to be the title and the description. The second one is going to be the image step, which, of course, is going to be to upload that image file
01:32
and store it. And then, of course, we're going to have another publish step, which will show the image, and it will show the title and description,
01:39
and it will allow us to save it. So a little bit more complex here. And let's go ahead and add our steps. So we'll add in our meta step directly in here.
01:49
We'll add in our image step just in here. And lastly, we'll add in our publish step, making sure we pull in the right one from products. Great.
01:58
So we know that each of these now need to extend that step component. So let's do that again for each of these. Step, component, and publish step.
02:08
Lastly, our step component. Great. So we shouldn't see an error now. We've got all of our steps defined.
02:15
Now, we're going to do things slightly differently here. So if we head over to our dashboard, what I'm going to do is I'm going to take the background here. And this is going to be within each of our steps,
02:26
just so we can style this out a little bit better. We're eventually going to have our navigation in here as well, which will need to sit above this container. So it helps to keep this directly within that component.
02:37
So let's get rid of that here. Let's pull these two in. And let's go over to our first step, which is our meta step, and just paste this in here and finish off
02:48
these two ending tags. Great. So this is our meta step. And we'll create out a really basic form for the title
02:55
and the description now. OK, so let's go over to our original things that we created. So let's go over to our title step
03:03
and just pretty much grab all of this so we can use this. And I'm going to go ahead and get rid of this div here and here. And we'll just keep this form directly within here.
03:14
So let's just go ahead and re-indent all of that. And we should be good. OK, so we've got our title in here. We're going to add another component in here, which
03:22
is going to be our description. So let's change all of these over to description. And what I'm going to do is just create out another component in here, which looks a little bit more like a description.
03:34
So if we come over to our base components here, we've got this text input. I'm going to go ahead and create another component called text area.
03:42
This is another blade component, which is just going to be a carbon copy of this, except we're going to have a text area component and just finish that off, just so we've
03:51
got something that's more like a description to work with. So now that we've done that, we should have our first step done. Great.
03:59
So the next step is going to work in pretty much the same way, where we're going to submit this and go over to the next step. But we're going to have a couple more things
04:08
that we need to think about, particularly because within this practical example, we're going to be able to navigate back. We saw in the original very simple introduction
04:17
when we did navigate back from that description, we actually saw an error there. So we're going to need to handle that. OK, I think we're done here.
04:23
We're going to tidy up this bottom navigation as well as add a top navigation. But that's another run through of our wizard and each of our steps.

Episode summary

In this episode, we dive into building out the actual product wizard! We start by recapping what we've covered so far, then get straight into the hands-on part—structuring our Livewire components to set up the wizard flow.

We organize everything under a products/create directory and create a main CreateProduct component that will extend the wizard base. From there, we define all the steps our form wizard needs: meta (for title and description), image (to handle the product image upload), and a publish step (where we review and save everything). Each step gets its own component, keeping things tidy and modular.

Next, we make sure each step extends the step component, and then move on to building out the first form: the meta step. We set up basic fields for the product's title and description. To get the UX right, we also create a reusable Blade component for a textarea (for those longer descriptions), tweaking the form layout for clarity.

You’ll see the beginnings of navigation structure, both for moving between steps and for styling purposes. We mention some improvements for later episodes—like handling back-navigation correctly and adding navigation controls above the wizard steps.

By the end, our multi-step product creation flow is ready to go, and you’ll have a solid pattern for setting up wizards in your own projects using Livewire. Stay tuned for the next episode where we tackle navigation and polish up the workflow!

Episode discussion

No comments, yet. Be the first!