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

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

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

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.

78 episodes•8 hrs 42 mins•2 years ago

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

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.