Adding top navigation: Livewire Multi Step Forms

00:11

Now, word of warning, we're not going to be able to do this later on just because there are a couple of issues with the way that this package deals with navigating to steps that you can't navigate to. We'll talk about that later.

00:24

But this is really useful even as a standalone exercise just to see how you can build up these navigation items. OK, so the first thing that I'm going to do is create our component that we can use in all of these steps

00:36

because we want this navigation not to be global to the wizard because we don't have a render method for that. We will have to implement this in each of our steps. So let's think about where this navigation can go.

00:46

This is pretty important. So I'm going to close off our components here. And under Products and Create, that's probably where I want that navigation to go.

00:54

We could put it in a subdirectory, but let's just create out a navigation.blade.php file in here. And I'm just going to create out a div and say Navigation. So we want to insert this navigation into our Create Product step,

01:09

so for each step. So how do we do this? Well, we could just use the standard blade include, but I like to register these as anonymous blade components.

01:18

Now, the problem with this is these components here that are our anonymous blade components that we can just inject in like we've seen over on our title step, for example, by using this x prefix, they only come from this components directory.

01:33

But here's a little tip. We can choose to register another directory where blade will look for components. So we'll do that over in our app service provider under the boot method.

01:45

And we just want to say blade. So we want to use the facade here. And we want to say anonymous component path. And then in here, we want to give the directory to where we want to look.

01:57

So let's go from the current directory. We'll go back and back again into the resources directory where our views are and where our live wire components are. And we can essentially just register this

02:11

as a path to look for anonymous blade components, which is really handy. Now, we need to give us the second argument and name for this. So I'm just going to call this live wire. So just by doing this and saying, well,

02:23

look inside of this directory for any blade components and call it live wire, we can now access our navigation and add that to our steps like a blade component. So what do I mean by that?

02:34

Well, over on our meta step, what we're going to do is outside of this container within a div wrapper. So we need to make sure we include that base wrapper. We can now do something like this.

02:46

We can say x live wire, because that's the name that we gave it when we registered it. And then we can go into the products directory. We can go into the create directory.

02:58

And we can put in our navigation. So there, that should now work. And we have a nice blade component that we can work with. The reason I like doing this is because it's a lot nicer to pass props down.

03:11

So for example, we are going to need to pass our steps down so we can, of course, iterate over these steps and actually get them out on the page. So that's a good question.

03:20

How do we access all of the steps that we can actually iterate through? Well, let's just start to pass these through. And then we'll just dump them out in this component. So let's go ahead and say steps.

03:30

And then really, all we need to do here is access a steps variable. So that's just available within each of these step components. So let's go over to our navigation. And let's make sure we accept this in at the top.

03:43

In fact, we don't even really need to do that. Let's just go ahead and dump out the steps on the page. And we'll make sure we use something like a var dump so we don't get into trouble.

03:53

And let's just have a look. Great. So these are all of the steps. You can see that we've got this array with each of these step objects.

04:00

We've got a step name, which we've already discussed. And we've got a step status, which is just an enum that represents the current or next step or whatever it needs to be. Now, the problem here is that if we look at this,

04:13

we don't have any labels for each of these. Now, we could do some trickery to sort of work out what the step name is and grab the name from it like that. But there's a much easier way to do this.

04:22

And we do that by heading over to the step itself. So let's start with our meta step. And let's go ahead and add in a method in here called step info. So let's go and create our step info method.

04:39

And this is going to return to us an array of data that we just want to hold about this step. It doesn't matter what you add in here. This could be absolutely anything.

04:48

So as an example, I could create out a label. And I could call this title and description or meta, whatever you wanted to call this. So this is now going to be available inside of there.

05:01

And I'm actually going to call this product information. We'll just keep this really simple. So if we head over now and give this a refresh, you can see that this label has now been added within this info.

05:10

So we can now access this label for that step. And that means that as we iterate through, we can just grab the step info. So I'm just going to copy and paste this to each of our steps. So let's go over to our image step.

05:23

And we'll do exactly the same thing. And we'll say product image, for example. And then we'll go over to our final publish step from our products. And we'll just say review and publish, something like that.

05:40

So now we've got a label for each of these steps. But how do we iterate through these steps? How do we get this label? And of course, how do we click on these to actually navigate the steps?

05:49

Let's go over to our navigation and just start to iterate through each of these. OK, so let's start really basically. Then we'll style this up.

05:56

So we're going to say for each steps as step. And let's end that for each out there. Let's first of all look at grabbing the label for each of these steps. So we're going to go ahead and say step.

06:08

And then all we need to do is just say label. This will automatically look that up from the information that we've provided back from that method. So if we give this a refresh, sure enough, there are each of our steps.

06:20

Doesn't look great at the moment, but we're now going to style this up and we'll make these clickable. OK, so for each of our steps, we want these to be justified or sit between each other.

06:30

So we'll say items center, tailwind. And we're going to use justify around. And we'll set the text to small here. All that's going to do is just make these sit apart.

06:42

Now, it doesn't work at the moment because these aren't wrapped. But let's go ahead and create a div out for each of these. And there we go. So it's something like that.

06:49

OK, so inside of here for each of our steps, let's create out this div. And we do want to show this inside of here. But I kind of want the step number in here as well. Now, you could add this to the information.

07:00

So for example, you could over on any of the steps add that number into there. But since we're iterating through here and all the steps are in order, I'm just going to use the index here. So we'll just grab the index.

07:13

And we'll just add 1 onto that. And that's pretty much all we need to do to get 1, 2, and 3. So that's just a trick that you can use to grab that. OK, so let's go and make this a button because we

07:25

want to be able to click on this to navigate between each of the steps. And we'll just wrap this in a div so we can add some additional styling to this. Let's wrap that like this. And for this outer one, let's go and just style this up.

07:40

So we'll say padding for, let's say, uppercase, tracking wide. And of course, these are just styles that I've created to make this look a bit better. But you can change this up as you need.

07:50

We'll change the text color. And we'll set text to gray. Let's set text to gray 900 or 500. And then we'll make it 900 when this is active.

08:01

OK, so it looks like this. Maybe we could just make this a button, actually. That would probably be a little bit better to have this directly on here. And there we go.

08:11

Great. So we've got something that resembles what we had to start with. OK, so let's look at making the class slightly different when we have an active state, so when we're on that current state.

08:23

Now, to do this, we can actually use the class helper within Blade. So we can go ahead and get rid of this. And we can use the class directive here. We can add the classes in that we want to see.

08:34

But then we can merge one in on a condition. So for example, I could say, well, I want to merge in text gray 900 when this is active. So for now, I'll just set this to true directly.

08:49

You can see that all of these are now in a darker color. But this is the condition. And that's just going to be step. So the current step that we're iterating through is current.

08:59

And we saw earlier the status of this is tracked by enums, which is really nice. And is current is just going to compare them values. So as you can see now, this one is slightly darker now that we are on product information.

09:11

And then, of course, when we move over to the next one, that's going to change as well. So speaking of moving over to the next one, how do we navigate between steps? Well, let's just pull this button down.

09:20

And we're going to attach a wire click directly onto this. Now, what we can do is take the current step that we are iterating through and just invoke a show method on it. And that's going to show that step.

09:32

It's going to handle it for us. So we could just say in here, wire click and then step. So that's the current step and show. And that's pretty much all we need to do.

09:41

Now, like I said, later on when we get to this, it's really difficult with this package to prevent a user going forward a step when they haven't filled out the initial information. So we are eventually going to be getting rid of this.

09:53

It's just a limitation that I found with the package. But of course, it may change in the future. OK, so I can click on product image now. So that's not working again.

10:02

But I have a feeling it's just because we haven't filled any content in our image step. And yeah, sure enough, we haven't. So let's go and say image step. And we will actually see that navigate over to our image step now.

10:14

And it's working nicely. OK, great. So clicking on any of these is going to go over to that step now. But like I said, we're going to get rid of this later because we're going to see an issue

10:22

with not being able to very easily stop the user from going too far forward if they haven't completed a previous step. So that's pretty much our navigation done. Let's move over and look at creating the initial record in this first step.

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

Episodes

Transcript

Episode summary

Episode discussion