Build a File Marketplace with Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a File Marketplace with Laravel" right now.

Already a member? Sign in to continue

Playing

34. Listing through sales

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

02. A fresh project with Laravel Breeze

02. Onboarding with Stripe

03. The onboarding screen

04. Registering the Stripe PHP library

05. Automatically creating Stripe accounts for your users

06. Forwarding users to Stripe Connect

07. Verifying if payouts are enabled

03. Creating products

08. Setting up and listing products

09. Installing Livewire

10. Building the product creation form

11. Automatically generating the slug from the product title

12. Validating and creating a product

13. Handling product file uploads

14. Attaching files to a product

04. Editing products

15. Creating the product edit form

16. Reviving product state

17. Showing and modifying existing files

18. Pulling together the product update process

19. Flashing an update message

05. User subdomains

20. Adding a user subdomain on registration

21. Subdomain routing basics

22. Adding a string macro to properly display the user's name

23. Listing the user's live products

06. Product checkout

24. Showing the product page

25. Creating the checkout success page

26. Starting the checkout flow

07. Storing sales

27. Handling Stripe webhooks

28. Storing product sales

29. Sending a confirmation email to customers

30. Securing Stripe webhooks

08. Accessing purchased files

31. Creating and validating the product download page

32. Displaying and downloading files

09. Sales dashboard

33. Calculating and displaying download stats

34. Listing through sales

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.

Episode summary

In this episode, we focus on building out the section of our dashboard that lists all the sales that have been made. We start by adding a new "All Sales" header and set up the structure for displaying our sales in a nice, styled table. Along the way, we handle some necessary UI styling tweaks to make the information visually clear and easy to interpret.

We walk through how to build a table with the right columns: the product that's been sold (and make this a clickable link to view more details), the customer's email address, the sale price (using a handy money helper), and the exact date and time the sale happened (properly formatted for clarity). There's also some discussion on accessibility, by hiding the table header visually but keeping it available for screen readers.

On the backend side, we make sure to pass the latest sales from the controller to our view, making sure the most recent sales show up first. We also implement a check—if there are no sales yet, we display a friendly message instead of an empty table.

Finally, we polish things up with some small tweaks to padding, fonts, and colors to keep everything consistent. By the end of this episode, you'll have a clear, functional table on your dashboard that lets you (or your users) see all sales at a glance, complete with links and nicely formatted data.

Episode discussion

No comments, yet. Be the first!