Build an E-Commerce Platform
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
08. Creating the product selector

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 see how far we can take this dropdown functionality
00:03
in this episode. We already know that we've got the first batch of variations here, which we basically just want to put into a dropdown. The idea behind this is when this is selected,
00:14
we're going to fire an event, the overall product selector component, which is then going to load in the next lot of variations, which in our case is the size. So from this, it will load in the children
00:26
and the same for this variation as well. So to get started with this, let's go and create an overall Livewire component, which is going to be our product selector.
00:37
So let's say PHP artisan Livewire make product selector. And let's go ahead and create that. If you've not worked with Livewire before, that has created a class here, which we can use,
00:49
and also the blade file as well. So I'm going to go ahead and just cut this out. And I'm going to go and say Livewire and product selector. We could probably pass the product down now,
01:05
just so we've got it in there, because of course, we need to know which variations to select here. And if we just come over, we don't see anything, because we've not filled anything out
01:16
in this product selector. So if we open up the product selector class here, that is rendering this view. Again, if you've not worked with Livewire before.
01:25
And what we can now do is accept that product in as a prop by just going ahead and declaring this as a public property at the top here. So now what we can do is grab out that initial variation
01:40
when this component mounts. So let's go and create out a mount method in here. That's one of Livewire's lifecycle hooks. And let's store a initial variation out of the top.
01:53
So initial variation. And that's going to be the color in our case. So let's go ahead and set that initial variation and actually choose the right property name.
02:02
And we'll set that to exactly what we saw before. So from the product, remember, we accessed the variations. And we did this in our blade template before. We sorted this by the order that we implemented.
02:14
And then we grouped this by the type. And then we grabbed the first one. So this should return them color variations that we saw before. So now that we've got that initial variation in there,
02:25
we can head over and we can start to create our dropdown. So let's go over to our product selector. And the first thing we want to do is check if we actually have an initial variation.
02:37
Because if we don't, that means that no variations have been added. It's highly likely that the product won't be set live at this point, but we want to make sure.
02:46
So in our case, let's just dump out the initial variation. And we should pretty much just see exactly what we saw before. But now this is within a Livewire component.
02:57
We can start to add some functionality to it. Now, this initial variation, for us at least, contains two colors. What we want to do is pass this down to another Livewire
03:07
component, which is a product dropdown. And when an item in that product dropdown is selected, we're going to emit an event just up to this product selector to say that a new variation has been selected.
03:19
Please load the children of that variation. So hopefully, that makes sense. So we're going to go ahead and create out another Livewire component.
03:28
And we're going to say product dropdown. Or we could say variation dropdown. Let's leave it a product dropdown for now. So let's go ahead and switch this out.
03:38
So Livewire and product dropdown. And into this, we want to pass the variation, or the variations in this case. So initial variation is a little bit misleading.
03:53
That could probably be pluralized. Let's leave it as it is just for now. So over in our product dropdown class, let's accept the variations inside of here.
04:04
So public variations. And then over in the product dropdown blade file, I'm going to go ahead and paste in some ready-made markup. So effectively, what this gives us
04:16
is the variation type here, which will switch out to color, size, whatever it is. And then a select box here, or a dropdown in HTML, with an option to choose an option, and then
04:29
each of the variations here. So we'll iterate through each of these. Now, I don't know if we actually have this x select component here.
04:37
So if we just head over to components, we don't actually have this. So again, I'm going to go ahead and include this in the course downloads.
04:46
It will effectively be a blade component, very similar to input, but it will just be a select box. That just means we can reuse the same styles. This is just a dropdown with options
04:58
that go inside of the slot. Again, this will be available in the course downloads, so we don't have to focus on styling all of this out. OK, so that should be good.
05:08
Let's head over and just give that a refresh. And there we go. So we've at least got a dropdown now where we can start to show them color variations.
05:17
But what about this variation type? Well, let's see what we can do about grabbing this. Now, I said before, this isn't the ideal solution, because what we're actually going to have to do here
05:28
is grab the first variation in our list of variations, pluck the type out, and maybe convert it into some sort of title case. So let's do that now.
05:37
We can always improve on this a little bit later. So the first thing to do is just say Variations and First. And that might not exist, remember, because we might not have any variations.
05:48
So we're going to go ahead and optionally grab out the type if this exists. And if we come over now, you can see we've got color there. So we're already making progress.
05:57
Now, for this, we're just going to use the string helper within Laravel. And we'll just add a title case to that. Ideally, we'd have a separate database table
06:06
that would hold these types so we could display maybe some metadata about them or anything like that. But this is fine for now. OK, so for this dropdown, let's get
06:15
to iterating through each of the variations. So for this, we're going to go ahead and implement a forEach loop over each of the variations as a variation. And down here, just end that forEach.
06:28
And then, sure enough, we already know that within our variations, we've got a title which we can output. So let's do that now.
06:36
And inside of this option, we'll just say Variation and Title. So if we head over, there we go. We can choose black or we can choose white as our color options.
06:47
Let's just head over really quickly and run npm run dev just to pull in any of them Tailwind styles. We should see that just bump down a little bit because we have a margin on the top there.
06:57
OK, so what we want to do is hook this form or this dropdown specifically up to a selected variation. So that's going to be this Select here. We're going to say Wire Model.
07:09
And we'll say Selected Variation. Now, at the moment, these options have no value. For each of them values, we're going to want to add something unique in there to that variation.
07:21
And in our case, that's just going to be the Variation ID. That makes sense. So now that we've got that, this Selected Variation over on our product dropdown, which
07:31
we haven't implemented a public property for, will contain that ID of the variation that we've chosen. Now, if we come over to product dropdown, we can test this out by just dumping out
07:43
the Selected Variation here and just make sure we add a dollar. Let's come over and see this. So at the moment, we see nothing. When I choose black, you can see that shows one.
07:53
When I choose white, that shows two. Now what we can do is detect when this changes. And if we have any children to these variations, we can create a new version of this dropdown
08:06
so we can effectively use the same component to go ahead and show the children variations. Let's hook that up really quickly now just so we can detect it.
08:15
And then in the next part, we'll look at loading in them children. So over in the product dropdown component, we're going to create out a listener for when this changes.
08:27
So in here, let's create a hook in here to say when the Selected Variation is updated, this is just prefixing this with updated, we want to do something.
08:39
So I'm just going to say changed in here with a die dump. So now when I choose black, we get this die dumped out. So what that means is we can then look this model up and then emit this up to the parent component
08:52
to then find the children. And the reason we need to look the model up again is our Selected Variation just contains the ID. It doesn't contain anything like the stockkeeping unit
09:03
or anything like that. So in here, let's just die dump here. And let's create out a getter to grab the model of this variation out from the database.
09:14
We could actually extract that from here, but let's just do another database lookup and we can always tidy this up later. So let's say get Selected Variation Model Property.
09:24
So what that will have done in Livewire, if you're new, is created a property for us called Selected Variation Model, or at least a dynamic property, which we can call. So what we can do from here is say variation and find,
09:39
and then pass in the selected variation, which we know is an ID. So that will just look that up in the database. So now that we've done that, we probably
09:47
could do the check here. Because if we, for example, go from black to choose an option, that's not going to be able to look up that model, because it will have given us an empty string.
09:58
So the first thing that we should really do is just say, if there is no selected variation, then just return and do nothing. So this property, dynamic property, now exists.
10:08
So here, let's die dump on this Selected Variation Model. And this should give us, when we choose black, the black variation. And when we choose white, the white variation.
10:22
Great. So in the next episode, we'll look at emitting this value up to the overall component to then load in the children of each of these variations.

Episode summary

In this episode, we're diving into building the product selector functionality, focusing on how to structure our code to handle products with different variations (like color and size) using Laravel Livewire.

We start by creating a new Livewire component called ProductSelector. This will be our main component for handling product options. We set it up to accept the product as a prop, then pull out the initial variation (the first option, like "color") when the component mounts. We do a quick check to make sure we've actually got variations, just to keep things safe.

Next, we introduce another Livewire component called ProductDropdown. This is where we build a reusable dropdown that gets variations passed into it (plural, because it could be a list of colors, sizes, etc.). For styling and code cleanliness, we talk about using a Blade component for the select box—no need to worry about the styling details in this lesson!

We walk through populating the dropdown options from our variations and make sure we're showing the correct type (like "Color"). Then we hook up the select dropdown to a Livewire property so that anytime the selected option changes, we're tracking it. We even test this out to make sure the correct variation ID is selected.

Finally, we add an event handler so that when a user picks an option, we can later use this to load the next set of options (like picking a size after a color). We also set up a little helper to look up the selected variation model so we can access more data when needed. In the next episode, we'll use this setup to handle loading child variations based on what's been picked.

All in all, we make a good start on a flexible, dynamic product selector system for our store using Livewire components!

Episode discussion

No comments, yet. Be the first!