Build a File Marketplace with Laravel
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
24. Showing the product page

Episodes

0%
Your progress
  • Total: 3h 32m
  • Played: 0m
  • Remaining: 3h 32m
Join or sign in to track your progress
01. Introduction and setting up
01. Introduction and demo
5m 51s
0%
02. A fresh project with Laravel Breeze
4m 29s
0%
02. Onboarding with Stripe
03. The onboarding screen
7m 17s
0%
04. Registering the Stripe PHP library
3m 43s
0%
05. Automatically creating Stripe accounts for your users
3m 11s
0%
06. Forwarding users to Stripe Connect
4m 36s
0%
07. Verifying if payouts are enabled
2m 24s
0%
03. Creating products
08. Setting up and listing products
10m 54s
0%
09. Installing Livewire
2m 49s
0%
10. Building the product 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
15. Creating the product edit form
5m 4s
0%
16. Reviving product state
5m 21s
0%
17. Showing and modifying existing files
7m 55s
0%
18. Pulling together the product update process
4m 20s
0%
19. Flashing an update message
4m 57s
0%
05. User subdomains
20. Adding a user subdomain on registration
10m 54s
0%
21. Subdomain routing basics
6m 47s
0%
22. Adding a string macro to properly display the user's name
3m 32s
0%
23. Listing the user's live products
3m 49s
0%
06. Product checkout
24. Showing the product page
10m 35s
0%
25. Creating the checkout success page
3m 57s
0%
26. Starting the checkout flow
9m 22s
0%
07. Storing sales
27. Handling Stripe webhooks
12m 1s
0%
28. Storing product sales
10m 15s
0%
29. Sending a confirmation email to customers
4m 30s
0%
30. Securing Stripe webhooks
4m 32s
0%
08. Accessing purchased files
31. Creating and validating the product download page
3m 54s
0%
32. Displaying and downloading files
4m 50s
0%
09. Sales dashboard
33. Calculating and displaying download stats
6m 6s
0%
34. Listing through sales
7m 3s
0%

Transcript

00:00
Okay so we're going to build out the product index page now over on the user's marketplace, so that will be under the subdomain and we'll be able to click on one of these products and see that product with a buy button with the correct formatted price. Now one thing we didn't do earlier is actually add a link up the top here, so we're going to head over to the navigation
00:20
component just here and remember we have these links that we added earlier for the product, let's start with a responsive one so let's just copy this down and we're going to say your marketplace that will link the user directly over to their marketplace. Now remember with the root names here we have these prefixed with subdomain and then dot so we're just going to say
00:40
dot home and we can do the same thing here for root is so we know that's selected. So now on a smaller screen that's going to show up. Now we've got an error here because what we need to do is actually pass the user into this because if we remember over in our roots here we need the user to actually form that subdomain. So all we're going to do is pass in the current user for each
01:05
of these and we should be good, there we go. So if we just go ahead and look at this on a smaller screen we should see your marketplace and that goes through to the right page, great. Okay so let's close this off and let's do the navigation item here and we can carry on. So if we go all the way up here to the products link we're going to go ahead and copy that and just do exactly the
01:26
same thing. So your marketplace and let's go ahead and say subdomain home and again pass in the currently authenticated user and then again just grab this and replace that in there, great. So we shouldn't need that because it goes over to a completely different page but you kind of get the idea. Okay so what we need to do now is build out a new controller, a new
01:48
route for the actual product page itself. So over in our web routes here it will need to go just inside of here. Let's go ahead and create out a controller for this first of all. So we would normally call this product show controller like this but as we have already seen we're prefixing all of these with subdomain and we're putting that in the subdomain folder so let's just keep
02:11
the same structure here and of course you can change that around if you need to and in here we're going to go ahead and say route get and for this we just want this to be the product pulled in with its slug. We don't want to show the id on a public marketplace route so let's go ahead and put in the subdomain product show controller like this and we can give this a name. So we could say
02:34
products in here and show for example. So now the full name would be subdomain.products.show. So let's hook that up we'll just go ahead and create out a invoke magic method in here and just do nothing for now and if we go over to the subdomain home template here we can actually hook up this product go through to that route. Now this is slightly different we know the root name
03:01
it's subdomain products and show but we need to pass through here both of these user and product because we need the user in the domain but of course we also need the product in there as well. So for this we're going to go ahead and pass an array in here instead and the first thing here is going to be the subdomain for the user and the second thing as we know we're pulling this out by
03:25
the slug is going to be the product slug so because we require two parameters they just both go in there. Now we can click through to this and sure enough we're still under that user's subdomain and we see product one as the slug in here now we can just start to build that page out. So let's go ahead and return a view in here this is going to be under the subdomain directory under a
03:47
products directory and show so let's open up our views here and under subdomain let's create our products directory and let's create show.blade.php and again we're going to keep this really simple so let's go ahead and grab the subdomain home pop this over in here and we'll get rid of these products we don't need them in there and we will get rid of just this title and fill that in so
04:17
that's now going to look like that. Okay so the details that we need in here are going to be the product name so let's go and just output the product title inside of here then we want to say buy and we want to create an anchor out in here that's going to link back to the user's store so if a user just lands on this product they can go back to the store for that user and they can see
04:40
the rest of their products. So this is just going to be user and name now we don't have any of these passed down at the moment but that is really the only information we need here. So under the subdomain product show controller let's go ahead and grab from here we shouldn't need the request so let's just pull the user in here and then remember we're also passing the product in this
05:02
subdomain as well so we're going to pass the user down here we're going to pass the product down here and we should be good and we should be able to see that over here product one by alex great and that's a link now which we can use to send the user back. So let's go ahead and apply a text indigo 500 on this and the url for this we know it's just going to be the subdomain
05:26
home page and that just requires the user's subdomain to be passed in. So now we can click back to see alex's marketplace and of course browse all of the products. Next up is going to be the product description so let's go down here and just output that in a paragraph tag if we can get that to work so there we go and that's just going to be the really basic product description
05:50
that we have in here and there we go and then just down here we want a button so once again we can use that x primary button component that we've already used and in here we can say buy now for and then it will be a certain price and for this if we check this out at the moment it looks sort of a little bit weird in the middle there so what we can do is override the styles on
06:13
this base and we can set the width to full and we can use justify center to center the text inside of there and let's just make sure yeah so justify center not justify self center and there we go great okay so to output the price itself we already know that over on the product itself we used a mutator when we were getting this value and that just gives us back a money instance
06:39
now the great thing about the money library is if you just output the price object within a view the string in the background well the object in the background will just cast the formatted version of this to a string so we don't need to necessarily call a specific method within code we would need to do that but when we're outputting this as a string it should just work as normal so
07:00
what we can do is just say product price and we don't even need to include the dollar symbol there because that will automatically call the format method for us when this is cast to a string so as you can see sure enough that just gets cast to a string and we're good to go now one thing i think we could probably do here is just bump up the spacing a little bit just to make that look
07:18
a little bit neater and we're good to go so the last thing that we're going to do on this page is make sure we protect against this if the product isn't live we already did that on the listing for all of the products over here but if we were to go over to product two for example we can actually see the details of product two and then potentially go through to purchase this
07:39
so we're going to go ahead and create out some authorization here to make sure that no one can access this if it is not live so the first thing that we're going to do to get this working is create out a policy which we can register and then very easily authorize this within the controller itself there are tons of different ways that we can handle this we can put a very simple if
08:02
statement inside of the controller but i like policies because then they become global and we can just use them anywhere and there are going to be other places where we're going to need to use this same check as well so we're going to go ahead and create out a product policy and that's going to generate that under the policies directory so let's go ahead and open up the product policy
08:23
and in here we can get rid of the constructor we're not going to need that we can just go ahead and create out a method in here which determines whether we can show this or not so there might be a few conditions around this but for us if we get a user passed into here and a product passed into here what's the condition that this gets shown well it's just that if the
08:43
product is live or not so we're going to go ahead and return product and live so we only allow this action which we're going to use within our controller if the product is live now how do we use this if we head over to the auth service provider we can actually register policies in here so we can hook up the product model itself to the product policy that we have just created
09:07
so let's create the product policy out in there and we should be good now over in our controller all we need to do in here is say this authorize we're going to go ahead and say can we show this product now behind the scenes what laravel will do it will find the policy associated with products in general it will look for the show method which we've created just here and it will
09:34
deny this based on the condition that we've given or allow it based on the condition that we've given so if we head over to the browser you can see that for product two now this action is unauthorized now if we just go over to product one we would expect that to work because we know in the database that this is live the reason that this isn't working is because within the context
09:55
of this subdomain users can't authenticate themselves we can't sign in within a subdomain because we've not set up that functionality so the user here not being available is actually denying that so what we're going to do is use a question mark in here to say that this is an optional parameter that needs to get passed in and if we come over to product one now you can see that this
10:16
works and if we go over to product two you can see sure enough it doesn't now i'm going to go ahead and just make this a little bit more explicit and say double equals true just so it's a little bit more type safe as well but now we have the ability to deny access to these products if of course they are not live

Episode summary

In this episode, we're building out the individual product page over on the user's marketplace, which is displayed under their subdomain. We start by improving the navigation so users can easily jump to their marketplace, even on smaller screens, and make sure the links direct to the right subdomain-based routes using the current user.

Next, we set up a new controller and route for displaying a specific product using its slug (instead of the ID, for cleaner and more user-friendly URLs). We then create the associated Blade view, keeping it simple, showing the product name, a link back to the seller's store, the product description, and a prominent, styled Buy Now button that shows the properly formatted price.

We also make use of a money library, which lets us neatly output the price as a formatted string without any extra effort. Then, to keep things secure, we introduce authorization: by setting up a Product Policy and registering it, we ensure that only products which are "live" can be viewed. We use Laravel's policy system so that requests to view non-live products are automatically denied.

Finally, we tweak the policy so that guest users (or anyone on the subdomain who isn't authenticated) are handled properly, making access seamless for visitors, while still keeping unpublished products protected. By the end, we have a tidy, secure product page that only shows available products and has all the navigation you'd expect!

Episode discussion

No comments, yet. Be the first!