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
34. Listing through sales
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 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
05. User subdomains
06. Product checkout
07. Storing sales
08. Accessing purchased files
Transcript
00:00
Finally, we're going to go through and list all of the sales that have been made just down here.
00:04
So I'm going to go ahead and grab this header so we can reuse this. And I'm just going to collapse this off and create a new div out in here with a header in here. And we're just going to say all sales. OK, let's go over and give that a refresh. A little bit of spacing needed here.
00:19
So maybe we could add a space Y6 just up here. OK, that looks good. OK, so down here we want to create out a table that lists through all of our sales. So let's start by scaffolding this out. I'm going to create a div in here. And let's give this some styling. And we're going to set a margin top to five.
00:40
We'll set an overflow of this to hidden. And let's set a shadow here to small. And again, we will set rounded to large on a small or bigger viewport. We'll go ahead and create a table inside of here. And for this, let's go ahead and set a minimum width to full.
01:02
We'll create out a T head and a T body. So the headers will be in here. The body, which will iterate through will be in here. And for this, we're actually going to hide it. We'll keep it for now, but then we'll hide it and set it to screen reader only.
01:16
We're just going to need a table row for each of these and a table header. And the first thing that we want to output is a product. So the actual product that has been sold. We then want to output the customer details, perhaps if we need to contact them for any reason.
01:31
Next will be the price that we sold it at. So let's swap that out. And finally, we'll go ahead and output the date that this was sold out. And of course, you can output any other information here. If you want to update your webhook to collect any more details from Stripe,
01:44
put them in your database. You can show them here as well. OK, so if we come over, this looks pretty weird at the moment, but that's fine. We can go ahead and style this up nicely. Let's just get rid of the header by setting this to a screen reader only.
01:58
That means that screen readers will still be able to read it, but we won't see it. We just want to see the list of sales. OK, so over to the T body. Let's go ahead and fill this in. We're going to go ahead and set a background of this to white.
02:12
Inside of here, we'll have a table row for each of the sales. So this is what we're going to iterate over. Let's add a TD, and this is kind of what we want to style up here to make this look good. So we're going to go ahead and say white space, no wrap.
02:25
So we don't get any wrapping on here. We'll set a padding on the y-axis to 4. Padding on the left of 4. Padding on the right to 3. We'll set the text to small. We'll set the font here to medium.
02:39
And we'll set that text grey color that we've been using. Finally, on a small or larger viewport, we'll set padding on the left to 6. In here then is going to be the product name that we've sold. Let's just head over and check this out. And that looks OK to me.
02:55
And then we can basically just duplicate this down for all of the other columns that we want to show with a little bit of variation on the styles. So this is going to be the email address of the user. If we come over, that looks a little bit weird, but let's fill all of these in
03:09
and then we can adjust this. So the next thing is the price. Let's just write price in there. And then last but not least is the date of the sale, which we will get to formatting. OK, so as far as that goes, I think that looks OK at the moment.
03:24
So we'll leave it at that, but we can always make some adjustments to this. And of course, we're leaving this open for you to style up how you want. OK, so over to the dashboard controller, we of course need to pass down the sales so we can actually iterate over these.
03:39
So let's go ahead and from the user here, grab the sales, grab the user first, then the sales. We'll say the latest first, that kind of makes sense. And then we'll say get, or we could always paginate this if we wanted to.
03:53
So what we're going to do is wrap this entire thing here in an if statement because we may not have any sales. So sales count and we'll go ahead and end the if down here with an else. And in here, we'll go ahead and output something if the user doesn't have any sales yet.
04:12
So for this paragraph, let's go ahead and add in a margin top of five. We'll set the text to grey 600 and we'll set the text to small. And let's go ahead and say no sales yet. OK, so for the actual sales itself, we want to kind of ignore this head.
04:33
And for each sale, we want to go ahead and output a row. So for each sales as sale, let's go ahead and just collapse this really quickly and go ahead and end that for each there. Pull this in and we should see four sales.
04:50
Now we just want to go ahead and replace out all this data and we should be done. So for the product itself, let's go ahead and create out an anchor for this so we can actually link through to the product. So we know that a sale has a product relationship and we can grab the title from that.
05:03
So that goes and shows us the actual product that's been sold, which is great. Now, let's go ahead and add in this as a link. So we'll set the text to Indigo 500 and we want to link through to the user's subdomain. So this takes us back to when we had our subdomain routing and we had products and show.
05:24
And then we passed in here the user's subdomain, which is going to be sale and product and user and subdomain. And then we, of course, want to pass in the product slug into here. So if we go over now, we have an undefined variable product.
05:40
Let's just find that and let's go over and there we go. So we can click through onto that product now just to see exactly what it was. All right. So the email is pretty straightforward.
05:51
That's just the sale email. The price, again, we can use our money helper for this. So money, sale, price. And there we go.
06:01
And finally, for the date, if we remember over on the sale, we cast this to a date time, which means that gives us back a carbon object. So what we can do here is say sale and we can either use paid at here or we could use created at. But what we want to do is format this in a certain way.
06:20
So we could say to date time string to make this a little bit more specific to when this was sold. That gives us the time that this was sold as well. OK, finally, let's just change around some of these. So I'm actually going to get rid of the font medium from here, here as well.
06:37
We just want that for the product. We could also get rid of the padding left on these ones. We just really want that on the first one. And there we go.
06:48
So that looks a little bit better. And I think for a basic list of sales, that looks OK. We can clearly see all of the information here as well as our sales stats. And of course, we can now keep track of all of the sales that we've made through our marketplace.
34 episodes•3 hrs 32 mins•2 years 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!
Episode discussion
No comments, yet. Be the first!