This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
03. Creating categories

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
Let's jump straight into displaying categories and this is going to be a really good start because we're going to pull in the Laravel adjacency list package for this which we're also going to use for product variations as well. If you've not worked with adjacency lists before once you're finished with categories this will make sense. Okay so we want to do a little bit
00:19
of tweaking here because on the home page that's where we want categories but at the moment we've got that default welcome screen. Now the only issue with Laravel Breezes is if we open up app.blade.php and come to the top we've got this navigation here which we can open up but inside of here we can't use this on a guest page. Let's take a look at what I mean. So I want to copy
00:42
dashboard.blade.php at least the entire structure over to that welcome.blade.php page. So we're going to paste this in and pretty much have this as our home page. So let's just write home and this is going to be our list of categories. So if we just come over to the home page now and there we go. That works but if we're signed out we can see we've got an attempt
01:07
to read property name on null and the reason for that is inside of that navigation component this always assumes that the user is logged in. So this section here with the settings drop down and if we head up a little bit further we should have, well head down a little bit, we should have another version of this as well just here for the mobile menu. We want to kind
01:33
of wrap this and only show this if we're signed in. So the first place to do this would be in here so let's go ahead and just collapse this part and let's have a look yes log out as well. So we want to wrap this in auth which is a Laravel directive which will only display the content inside of here if the user is authenticated and we'll do that just up here as well for all of
01:59
this stuff here. So let's just go ahead and grab this drop down and that should be it I think. So let's just add this auth check inside of here as well. So we're basically just not showing this unless the user is authenticated. Let's go over and give that a refresh and there we go. So we've still got our navigation structure which we want for a user who is not signed in but we can at
02:25
least use this now even if we're not signed in. Now we also want some buttons to log in. We'll get to them a little bit later when we start to add in our cart and everything up here. For now we just want to focus on our categories. So a good place to start would be a model. So let's just close everything off and let's go ahead and say phpArtisan make model category. We'll generate a
02:46
migration alongside of this as well and you can generate a factory if you want to randomly generate some categories. We're going to manually do these. Okay let's open up the create categories table and let's fill this in. Okay so we just need some basic information in here. The first thing is going to be a title and then we're going to go ahead and include a slug as well. So we can use
03:09
that in our urls but really importantly we're going to add a unique constraint to this in the database. Now because categories are going to be nested we want to reference a parent id so we'll create a kind of top level category and then underneath that we'll have something that references a parent id. Don't worry if this doesn't make too much sense at the moment we'll go ahead and
03:31
cover this when we look at our adjacency package. So we're going to add this as an unsigned big integer because an id is an unsigned big integer. You probably won't have that many categories but we'll add that in anyway and we're also going to make this nullable because some categories won't have a parent id e.g if they're the top level categories. So that's pretty much all we need
03:52
for categories. Of course feel free to add more like descriptions or anything else you need. So we're going to go ahead and run phpArtisan migrate on this and we'll start to fill in some categories. So let's just do two top level categories to start with. So I'm going to go and call this brands, slug is going to be brands, the parent id is going to be null and then let's go ahead and just
04:14
add another one in here. Let's just call this styles, we don't really care what it is for now. Okay let's save that out. Okay so let's at least create a controller to display this information. At the moment over in routes and web we've just got this route closure here that returns this welcome view. So let's go ahead and create out a home controller. So let's say make controller
04:36
home controller and let's go ahead and hook this up to that. So let's grab all of this home controller and we'll pop that in there. So if we open up our home controller let's create an invoke magic method because we're not going to use method names here and let's return that welcome view. We can even rename that actually to home. I think that would make a little bit
04:58
more sense. So let's go down to welcome and just rename this to home.blade.php. Great. Okay so we want to grab our categories out here. Let's just do this really really quickly just the way that we would normally do this and then we'll look at our adjacency list. So we're going to go ahead and pass the categories down to here and why don't we just go over to home.blade.php and just dump
05:26
these out on the page. So let's just say categories and let's come over. There we go. So we've got them two categories at the moment just represented as JSON being dumped out. So the goal here is to get a kind of tree-like structure of all of our categories and then recursively iterate through each of them. Now at the moment what we can't really do is exactly that because we would have
05:50
to create a complex relationship, perform way too many queries. We've got a snippet on CodeCourse about using adjacency lists if you want to go ahead and check that out for a little bit more information. But let's pull this package in and see how we can build that tree up as we add to our database. So let's come down and go ahead and use the composer require command just to pull this
06:12
in and then let's go over and see what else we need to do. So we want to use the has recursive relationships trait on any model that uses recursive relationships. So that is going to be our category model. Let's open that up and we'll go ahead and use this trait in here. Might just need to re-index our workspace and there we go. So let's just pull that in. So we want to pull that
06:33
in and that is it. Now this relies on having a parent ID which we already have. So let's just start to add some subcategories here. So I'm going to go ahead and add Nike in and I'll just put the slug as Nike and the parent ID is now going to be one. Let's go ahead and fill in the time stamp for this as well and let's under styles or we could call this seasons actually and let's go
06:58
and add in just a couple under here. So let's say summer and let's set that to two and then let's just duplicate this down and we'll just say winter and this could go on and on. So these two categories are under seasons and Nike is under brands. We'll leave it at that for now because we can add more and we're going
07:22
to be recursively iterating through these so you can build up as big a tree as you like. But I think that will be enough for now. Now if we head over to our app we can see that this will just dump all of them as a kind of parent category. So if we were to start to iterate through these as a kind of parent category. So if we were to start to iterate through these now
07:41
we would just see every category underneath each other and it wouldn't really make that much sense. Now we've got this recursive relationships trait in here what we can do is in a single query effectively build up a category tree and then display that and keep this stuff in mind because we're going to be using this later like I said for our product variations.
08:02
So with this package what we can actually do is use a tree method we can say get and then we can say to tree. Now let's just take a look at the difference in the output here. So this is executed one query using a common table expression to grab all of this data and at the moment we can't really see what's going on because we've got this sort of top level one here then the
08:24
children of that which is Nike and then we've got a seasons which is top level and then under that if we just have a look really carefully we've got all of them children. So effectively as we add to these categories they're going to keep adding as children properties underneath each other and really importantly that's going to be done in a single query so we're not iterating through
08:47
and creating a query for every single depth of categories we're creating. So now that we've got that set up good time to go over to the next part and look at how we can actually recursively iterate over these to display them as we saw from the introduction. So let's head over to the next episode and do that now.
78 episodes8 hrs 42 mins

Overview

Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!