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
13. The final step

Episodes

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

Transcript

00:00
so the benefit of having an already created product that we're adding to to each step is that in the final review step we pretty much just need to pass the model down then we can access anything in here to show the preview so let's go over to our final step and again i'm just going
00:17
to grab any of the other steps that we have here probably better to grab the image step because that contains the back button and we're going to go over to our published step component making sure that's the one for the product so let's paste everything in here we've got our back and our next step buttons which is now going to be called publish and let's get rid of all of these
00:38
stuff in here that we don't need and we will just output publish inside of here great okay so we should now be able to go over to our publish step after we've filled all of this in and let's choose an image let's go next step and there we go okay so we got a little bit of a refresh that's just a little issue within vite but let's try that one more time and there we go so we're at our publish
01:09
steps and now all we need to do in our publish step the actual component itself is go ahead and pass down the products into here so let's pass that product down from our state and that's product and we're done so you want to be really careful here about how many times you're accessing this product remember that this looks this up in the database every single time so if for example you
01:34
are passing this down like this and repeating yourself that's going to create a database query every single time but you're not always going to do that we're mostly just going to be passing the entire model down so if we go over to the publish step we can now just very quickly fill this in so let's add in all the information about this product okay so we'll go ahead and output the
01:55
image in here and let's just add in a flex with a space x of six we'll have the image on this side and then we'll have the metadata on this side so for the image because we've already got that stored on the model and we've got that in the file system which is why this is a really good idea we can just go ahead and do slash and then this product image path and we're pretty much good
02:18
to go and that should show that nicely so let's go and just wrap this with a height of 44 and a width of 44 and we should be good so we could even set this one as well to have a height of 44 and a width of 44 okay great so for the meta let's just go ahead and output this really easily again we'll just space things out here on the y-axis and then i'm just going to have a header in here and that's
02:45
going to be the title of the product so again we can just access this normally product title and this needs to be product not this and then we'll have just a paragraph down here with the product description there we go let's just add a couple of styles really quickly so we'll make this text large and font medium and we should be good let's check it out and see if everything works so now
03:11
for the first time we're going to roll through the entire form so i'm going to say a product and then a product description hit next step choose an image hit next step and we're now on the final step where we can review what we've got and then of course we can hit publish to set this live in the database so let's do that now and actually get this published and redirected
03:34
because it's a live wire component we can just redirect wherever we want probably to a product page to show this so over in the publish step let's open this up and let's create out a submit method now we don't need to validate anything in here you could do a couple of checks in here if you wanted to for example if something wasn't filled in properly or you needed to do some extra
03:56
validation on top of what you've already done remember you can navigate to any specific step or back to the previous step whatever you need to do but in our case we're just going to say this state product and we're going to update this and we're going to set published to true and that will be the end of this now down here you can do pretty much whatever you want to do
04:18
so i'm going to return and i'm going to redirect back to let's have a look we could just redirect back that will go back to the start of the form which is you know fine for our case okay so that should be working now and if we just double check that in our publish step this is getting hooked up to submit we've got our button we should be good so let's roll through this whole thing i'm just
04:40
going to clear the database out as well okay so a product a product description let's hit next step of course keeping on our database that's been created without the image let's upload an image and let's hit publish and that's redirected us back which is fine but you can see published has been set to true so that is the final step created of course after you hit publish you
05:05
can redirect wherever you want you've got the product id so you can go over to a product page if you want to now that that's done we are on to the tricky stuff so let's just look an example of this and then we'll go ahead and figure this out later so again i'm going to clear the database out of everything and let's go ahead and just do the same thing so a product description
05:28
next step let's choose an image next step we're on the review and publish let's say we decided that we're not quite happy with the product image or the title or the description i'm going to hit back and yeah sure enough we don't see the current product image that would be nice to do so we will be doing that now if i hit back again and then i hit next step again sure enough that's working
05:52
if i hit next step here nothing's happening when i go ahead and choose an image we get call to undefined function temporary url on array what is going on here well quite a lot so let's head over to the next episode and look at more complex back steps and making sure that all of our state is good through all of the steps in our form

Episode summary

In this episode, we wrap up the product creation process by building the final step of our multi-step form: the publish (or review) step. Here, we take advantage of the fact that our product model is already being passed down through the steps, so it's super simple to just grab what we need and display a nice preview for the user before they hit that final publish button.

We start by copying over the template from a previous step and refactoring it for this review screen. The product's image and basic details (like the title and description) are displayed side-by-side, making use of the data we've collected in prior form steps. There's a little CSS thrown in to make sure everything looks good.

Next, we hook up the publish button so that when clicked, it sets the published flag on the product and performs a redirect. There's a quick discussion about database queries and making sure we're not repeating unnecessary fetches (which can be a gotcha in Livewire). We also touch on where you might want to redirect the user—like to a product details page—after they've published successfully.

As a final part of the episode, we do a quick test: running through the entire flow from start to finish, making sure our form and publish actions work as expected. There's a quick note about what happens when you go back to previous steps (e.g., you'd want to show the already uploaded product image rather than requiring another upload). We run into a little issue and tee up the next episode, where we'll dive into handling more complex state management, especially for the back button and image handling.

All in all, this episode is about getting that all-important "done" feeling with your product-creation form and setting up for more advanced UX tweaks next time!

Episode discussion

No comments, yet. Be the first!