This episode is for members only
Sign up to access "Build a File Marketplace with Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
15. Creating the product edit form
Episodes
01. Introduction and setting up
02. Onboarding with Stripe
03. Creating products
08. Setting up and listing products
10m 54s
0%
09. Installing Livewire
2m 49s
0%
10. Building the production creation form
15m 1s
0%
11. Automatically generating the slug from the product title
1m 28s
0%
12. Validating and creating a product
6m 23s
0%
13. Handling product file uploads
8m 14s
0%
14. Attaching files to a product
6m 45s
0%
04. Editing products
05. User subdomains
06. Product checkout
07. Storing sales
08. Accessing purchased files
Transcript
00:00
When we click on any of our product here, we should be able to head over to the edit page where we see pretty much the same form, but of course the ability to edit this out. So we're going to kind of scaffold this out now and then go through the steps to get this product editable. So the first thing that we're going to do
00:16
is head over to our web routes and we're going to create out a route in here, which allows us to edit a particular product. We're going to use route model binding to pull the product in by its ID, and then we're going to just add on to the end edit. And this is just going to show the form. Basically, the controller that we're going
00:34
to use here is product edit controller. And of course, we'll switch the name over just while we generate the controller. Let's go ahead and comment this out and we can head over here and run make controller to go ahead and just build that out. OK, let's pull this back and then pull the namespace in for the product edit controller
00:52
and we can head over here to fill this in. Now, of course, we want to bring over the constructor here and add that in. That's going to be exactly the same. And then we just want an invoke magic method, which returns a view, which is going to go ahead and show that format. That's going to be product and edit.
01:12
Great. So let's head over to our product section under our views and let's just create edit dot blade dot PHP. In this case, we can pretty much pull over the entire create page just here. So here we're going to say edit a product instead, and then we're going to build out
01:31
an entirely new component for this. OK, so if we head over to our products index, let's hook up each of the products here to go over to that product edit page. So we're just going to use route and products to edit. And then, of course, we're going to pass the product in here because we need that in the URL.
01:48
Laravel behind the scenes will take care of the route model binding and putting that in there for us. So if we click on this, sure enough, we go over to products for slash edit or, of course, whatever we are editing. Now, in this case, of course, we just need to go back over to the product edit controller.
02:05
Same as what we did before and just pull the namespace in for the middleware and we should see the edit product page. Great. OK, so next step is to generate out the Livewire component for editing a product. So we're going to go ahead and say Livewire and make and say edit product or edit product
02:25
form, whatever you want to do. OK, so we've got the component in there. Let's go ahead and add that into here. Now, the only difference that we need to take care of now is that the Livewire component needs to know what product we are actually editing. So over in our product edit controller,
02:44
what we're going to do is actually pass the product down that we get passed into here with route model binding. So this is going to be the actual product model. And we're going to pass that down to the view so we can share that with our Livewire component. So we've passed that down to the view. Now we can head over to edit and we can
03:02
actually pass that into our Livewire component and we can pick that up inside of edit product. So if we head over to the edit product Livewire component, all we need to do to get this working is go ahead and set in a product in here and that will bind that in. We can, of course, also type in this if we want to just to show that this is actually a product.
03:25
So over on the edit product Livewire template, let's just test this out by outputting the product title just to prove that that is in there. And sure enough, we get the title of the product. The title of the product is product. So it looks a little bit confusing, but we are getting that data.
03:42
So what we're going to do now is go and actually copy the entire create product template over from our Livewire component over to edit product. Now, this is going to break a couple of things because, of course, we've got things in here that don't quite exist at the moment. But the point of this part is just to get this set up so it looks the same
04:02
and then we can start bringing in the state from the product that we've already got. So let's just make a couple of obvious changes here, like changing the button over to edit product. And there's a couple of other bits that we can do as well. So we've got product information that's all the same.
04:17
These will hook up to the state which will be pulled from that product. And then for the files, we're going to need to handle this slightly differently because we're going to have existing files as well. Now, if we head back over, of course, we get undefined variable files.
04:31
Nothing here is quite working at the moment. So let's get rid of this entire for each. We'll keep the unordered list. And at the moment, this looks OK. So everything is sort of in here and being rendered. We just need to make sure that we actually get the state through and allow the user to edit it.
04:46
So while we go through the process of adding stuff into the edit product component itself, we will be pulling a lot over from create product because it's very similar. But of course, with some differences, because the way that we save this out and the way that we deal with files is going to be slightly different.
34 episodes•3 hrs 32 mins•1 year ago
Overview
Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect.
We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers.
Here's everything we'll cover:
- The Stripe Connect onboarding flow
- Effortlessly creating products (and uploading files) with Livewire forms
- Subdomains for your user's marketplace
- Stripe Checkout for a beautiful, secure payment flow
- Securely delivering files with Signed URLs in Laravel
- Showing sales stats on a dashboard
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.