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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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