Build an E-Commerce Platform

Sign in Get started

This episode is for members only

Sign up to access "Build an E-Commerce Platform" right now.

Already a member? Sign in to continue

Playing

30. Showing the category products page

Episodes

0%

Your progress

Total: 8h 42m
Played: 0m
Remaining: 8h 42m

Join or sign in to track your progress

01. Introduction and demo

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

Transcript

00:00

Over the next handful of parts, we're going to be looking at the product browser, which means we can filter by different variation types, all of that good stuff that we saw from the introduction.

00:10

The first thing to do, though, is create out the category page, meaning when we click on one of these, we want to go through and actually view this category. We're also going to, in this part, add in the category ancestors as well, so we can sort of trickle up and look at a sort of wider category if we want to.

00:28

Okay, so the first thing to do is just go ahead and create a controller for this. We're going to keep this super simple and create a category show controller, and let's head over to that category show controller, and we'll just add in an invoke magic method in here.

00:45

And of course, we're going to expect in a category, so let's make sure we pull that in now and go ahead and pull the namespace in. Okay, so we won't do anything here just for yet. What we want to make sure we do first of all is register that route.

00:59

So let's go and just grab any of these. It doesn't really matter too much. And let's go ahead and say categories slash, and then we want the category in there. But really importantly, we want this by the slug.

01:12

So if we just come over to our categories here, we've got our slug in there. So we want to make sure that we pull that in by the slug. And of course, use the category show controller. Great.

01:23

Okay, so if we just come over to one of these now, click on it, we go through to an empty page. So of course, what we want to do is return a view. So let's go ahead and say categories and show.

01:34

And let's create that just over here under our resources, views, and categories. And we'll create show.blade.php. And once again, what I'm going to do is just pull over some pre-made markup. Very, very similar structure to the rest of this.

01:52

The only difference is we are showing the ancestors just here with the category title. So the ancestors will come before the category title. So we can click back into them. And then we've got the product browser just here.

02:04

So effectively, what's going to happen is if we click on new in, we're going to show that this comes from Nike, which then comes from brands. So I think that's helpful in terms of going through that. So actually, let's click on new in under Nike.

02:19

So we can show the ancestors just up here. And then the entire product browser that we saw from earlier is going to be just down here. OK. So the category title is pretty straightforward.

02:28

We're not actually passing this category through yet. So let's do that now. Category and category. We'll need to think about some eager loading here as well,

02:37

particularly when we work with the ancestors. But for the category title, that's pretty straightforward. It's just plucking the title out. And there we go.

02:45

We've got new in. OK. Let's focus on these ancestors then. So because we have already looked at this, this should be very familiar.

02:53

We're just going to go ahead and iterate over category ancestors. Let's fix that up. And we're just going to call that ancestor. And go ahead and end that for each there.

03:04

And then inside of here, we're just going to have an anchor because we want to be able to click through to each of them ancestors. And we're just going to go ahead and extract out the title. Remember, these are all effectively categories, even though they're ancestors.

03:16

So they all have a title. So if we just give this a refresh, there we go. We've got Nike and we've got brands. Now, once again, this might make a little bit more sense to be reversed

03:26

because brands should technically be the last thing. So we can very easily do that in here by just saying reverse because that just gives us back a Laravel collection. So we can reverse that just so it makes a little bit more sense.

03:39

So we've got brands and Nike. Let's go ahead and just add a little bit of styling to this. So let's say text Indigo 500 maybe. And then down here, let's go ahead and create out a span to separate these.

03:51

So I'm just going to have a slash in there. And we'll just say font bold text gray. Let's say 300. And we'll say last hidden.

03:59

So we'll use CSS here. But again, like we did earlier, when we were iterating through the product details for each variation, you could use that loop variable that we have, which detects if it's the last.

04:12

But we'll just use CSS here. I think that makes a bit more sense. So let's just give that a refresh. And there we go.

04:17

So we've got Nike and brands. Only thing we need to do now is just link through to this. So we'll just say categories slash and then the category or the ancestor slug. And if we come over, we can now go over to Nike, which of course is under brands.

04:33

We go back to brands if there are any products under that. It's entirely up to you what you want to do. So there we go. We've got a category show page, which we can start to build out our product browser in,

04:45

which is going to be really important. But before we start to output anything within our product browser, all of this relies on indexing our products into MeliSearch, which is a open source search engine. So let's go ahead and do that in the next episode.

Episode summary

In this episode, we start building out the category products page for our store. The main goal here is to make sure that when a user clicks on a category, they're taken to a dedicated page showing products from that category. We kick things off by setting up a controller to handle showing a single category, routing by the category's slug instead of the ID for cleaner URLs.

We then create a Blade view to display the category details. One cool feature we add is showing the 'ancestors' of the category, which basically gives users a breadcrumb trail — so if you're looking at 'New In' products from 'Nike', which is under 'Brands', you see 'Brands / Nike / New In' at the top. This also makes each part clickable so you can easily navigate back up the category hierarchy.

After handling all the routing and making sure our controller passes the right data (like the category's ancestors), we enhance the look a bit with some basic styling and get everything working with actual links. By the end, you can browse into any category and see its place within the wider category tree.

This sets us up nicely for the next step: hooking up our product browser so we can actually show products within each category. But before we do that, we'll need to make sure our products are indexed in MeiliSearch, which is up next!

Episode discussion

No comments, yet. Be the first!