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

32. Hooking up products to 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

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

So as we discovered in the last episode we don't actually have products attached to categories which obviously doesn't make any sense. We're going to need to do that so when we click on

00:09

Nike for example we see all of the products that have been attached to that category. So this will be very quick but then we can move on with the rest of our product browser. So we're going to go ahead and create out a migration just a migration on its own and this is going to be to hook up the categories to the products with the belongs to many

00:27

relationship. So we're going to start with the category and then say product the reason being is that just C comes before P in the alphabet and Laravel will use this convention by default. So create category product table and that should be everything we need. We just want to prefix that with create so Laravel builds out everything we need. Okay so let's go over to create category

00:51

product table and let's fill this in. It's going to be very very simple we're just going to need in here a category id and we'll use foreign id for this so everything gets hooked up for us so category id and we'll constrain this and we also need a product id. Now the reason that this pivot table is important is because multiple products could be in multiple categories

01:13

you don't just want to come over to your database and say that a particular product is within a certain category otherwise you would have to duplicate products it doesn't make sense. So let's go ahead and run php artisan migrate and let's go over and start to hook some of these up. So let's say that we want Nike to be in a couple of categories we'll start with that and we'll add

01:35

some more later so Nike is obviously going to go in the night category so let's go and select Nike here we don't really need to create it out and update it up but we'll go ahead and fill it anyway and let's go ahead and put that same product that Nike shoe in Nike new in kind of makes sense there we go so they are the same product but in two different categories. Okay so in terms of the

01:58

relationship let's go over to the category model to start with and we'll go ahead and create out this product relationship so that is belongs to many and product so that will go ahead and pull out any of the products in that particular category and we can do the reverse which we were trying to do in the last episode over in the product model and we'll just create this down here

02:24

and we'll say categories so that will give us all of the categories that that particular product is in and once again we just use the same belongs to many relationship but this time we give the category model in there and again let's just make sure we pull the namespace in for that and that doesn't look like it's working probably because we've already defined the relationship

02:44

just here in the last episode so we'll leave that just up there okay so now that we've done that we can actually fix our two searchable array method and we can include them categories in there so let's do that now let's say category ids we'll go ahead and we will pluck out the categories relationship but we'll pull that back as a collection and then we'll just go ahead and

03:05

say pluck id because that's really all we need we just need some sort of identifier for each of the category ids and this will obviously give us back an array so that will be absolutely fine we can even cast that to an array just there just to be explicit okay so let's open this up and rerun flush and import and let's head over to melisarch and there we go we can see that that

03:30

nike product is in categories three and six now the reason that this is important let's get to that now is that when we come over here and we build out our product browser our product browser is going to make an immediate request to melisarch so what we're going to need to do is when we pull in the products that we want to show say under category nike what we can do is do a quick look

03:54

up inside of melisarch and say well what category does nike belong in and we can pull in only them products that belong to them category ids so we can just do a simple search to grab that out if that doesn't make sense now it will do when we get to our product browser which we are going to scaffold out in the next episode

Episode summary

In this episode, we tackle the missing link between products and categories in our app. Previously, when you clicked on a category like "Nike," it didn't actually show any products associated with that category. So, we set out to fix that!

Here's what we do:

We create a migration for a pivot table called category_product to establish the relationship between products and categories, following Laravel's conventions.
Using foreign keys, we hook up category IDs and product IDs so products can belong to multiple categories and vice versa.
We run the migration and manually attach a Nike shoe to a couple of categories as an example, showing how a product can exist in more than one category.
Next, we update our Eloquent models to set up the belongsToMany relationships in both the Category and Product models. This allows us to easily fetch all products for a category and all categories for a product.
To make sure our search works correctly, we update the toSearchableArray method to include category IDs, so when we're searching for products under a specific category, it all just works.

In the end, we confirm that products are correctly associated with categories by looking them up in our search index. Now, when we build our product browser, we'll be able to pull and display products by category without any headaches. Everything's ready for the next step—scaffolding out our actual product browser UI in the upcoming episode!

Episode discussion

No comments, yet. Be the first!