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

37. Hooking up product filters with Livewire

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 couple of parts, we're going to be working on the filters.

00:02

So when we click on them, we filter the product. Before we do that, we're going to hook this up to an array over in our product browser so we can actually eventually pass this

00:12

to Melissa in the next episode. The reason we want to focus on this now is because we're going to need to set up this array in a very specific way.

00:21

And we'll dump some stuff out along the way just to see what we mean. So I'm going to head over to the product browser here. And just at the top, we are going

00:30

to create out a public property, which is going to store these query filters. And you can call that whatever you like if it makes a little bit more sense.

00:39

Now, we're going to come down to our template. And we're just going to go ahead and output those query filters just out in here so we can at least see what we're working with on the page.

00:49

Now, at the moment, that doesn't quite work. So let's just dump this. Or let's go ahead and say print all. That would be enough just so we get out a very, very

00:58

small bit of text representing that array. Now, the first thing that we want to do with these query filters over in our product browser is build this array up with all of the filters

01:09

we already have. And that's just because we need these in place before we start to add, say, size 2, 3, 4 to these. Otherwise, things aren't quite going to work out.

01:20

So let's go ahead and build this up when we mount this component. We don't have a mount method yet. So we can go ahead and create that out in here really easily.

01:28

And then we're going to go ahead and assign query filters to grab all of the variations and build that structure up. So we need to extract these from the products that exist within the category that we've

01:41

passed in to this component. So we're going to go into the category here. We're going to grab the products from that category. We already know that we have that relationship set up.

01:51

And we're going to pluck out the variations because, of course, those different things exist over on our variations here, color, size, and any other variations that you have.

02:02

Now we're going to go ahead and flatten that array. And let's just leave it at that for now just to see what we have. And you can see that we've got a collection here.

02:09

And if we just cast this to an array just so we can see this a little bit better, there we go. So we've got all of the variations in there. Now what we want to do is go ahead and group them

02:20

by the type. So let's group these by type. And then we want to go ahead and grab the keys. So let's go ahead and grab the keys out of here.

02:28

And again, we'll just cast this to an array just so we can see what we're dealing with. And sure enough, we've got color and size. So we can start to assign what we've chosen.

02:37

Because remember, these are multiple select. We're not just clicking on one. That would be a lot easier. But we have multiple ones of these

02:43

that need to get added to color and multiple that need to get added to size. So now that we've got them keys, we want to map through them to construct a new array that

02:53

looks like this. So color and then output an array here with everything that we need, with perhaps a key in here like 12.

03:01

And we need to know if that's been selected, so on and so forth. But we'll figure this out as we go. OK, so let's go down here.

03:09

And let's go ahead and map with keys. Remember, we used this earlier. So we actually get them keys in here. Choose a shorthand function here.

03:16

And let's grab the key in each of them. And then we'll basically just return a new array with a key as the key, which makes sense, and an empty array.

03:26

So effectively, what we're going to end up with is the following. If we, again, just cast this to an array, we end up with the following.

03:36

So we've got an array within color. Well, we've got an array with color in there as the key. And then an array of options. So effectively, what we're going to do is map color up to these.

03:46

We're going to have an array here filled with black and rainbow, for example. And then we can pass them through to Metasearch. There are, of course, different ways of doing this.

03:55

But just setting this up to start with really helps us out. So hopefully, that makes sense. If not, go through each of these steps

04:02

and just see what these do. And then you'll figure it out. And I'm just going to pull this down a little bit more, just so we can read this a bit better.

04:09

So now to actually hook this up, which happens over in our template. So we'll keep that printr on there, just so we can see what's happening.

04:16

And of course, this checkbox here now needs to represent each of the things that we're hooking up. And we've also got this label here as well. Let's just pull that down and see

04:24

if that messes with the template. And that looks fine. So this label, we also need to be able to click on as well. So let's give each of these inputs a unique ID, first of all,

04:32

so we can hook the label up. That's really important. So I think what we can do is grab the title from this, so the title just here.

04:41

So let's go ahead and do that. And we'll check this out in a minute. And then let's go and just to have an underscore, for example, just to separate this out.

04:49

And we'll go ahead and output the option in here. So let's go over and just check the markup up for this. So let's pull up our developer tools and close this off. And let's go down and just inspect one of these

05:01

and just see what we've got in here. So we've got color underscore black. That makes sense, because then we've got color as the unique kind of overall for this section,

05:11

and then the actual title of the item underneath, or the title of the variation underneath here. Now that's got a capital B at the moment, which isn't the end of the world,

05:19

but I'm gonna go ahead and use string to lower, native PHP function, just to make that lowercase, just so it's a little bit more consistent. So now that we've got that unique ID for the whole section,

05:30

e.g. the color and the size, and the individual variation, we can go ahead and put that in four. And that just means we can go ahead and click on black, rainbow, white,

05:38

and we've got that label nicely hooked up to our input. Now in terms of the value for each of these, well, that's pretty straightforward. It's just gonna be the option in here,

05:47

because we know if we have black there, black is just gonna be a unique color, same with rainbow, and the same with white. And we could do that in lowercase,

05:57

but we're gonna be sending this across to MeliSearch to compare them things that we indexed earlier. So we'll leave that not in lowercase. So I think it makes a little bit more sense.

06:07

Okay, so now it's time to actually hook this input up to Livewire. So when we click on it, that query gets updated, or that query filters property gets updated.

06:17

So let's go ahead and say wire model, and we're gonna go ahead and say query filters. Now within Livewire, if you want to hook something up, you can either do this to an individual property.

06:27

For example, if you're registering a user, you can have an email and hook her up saying wire model and email, and that would just go ahead and update that property.

06:35

But if you're dealing with an array like we've got for our query filters, and we know that inside of this query filters, we've got color and size,

06:43

that means we can do something like the following. We can say query filters dot size or dot color. So let's go ahead and do that. And we know that we can just output this here

06:56

as the title of the overall section. So now this is nice and hooked up. So if we click on black, for example, you can see black has been added to that color array,

07:05

which we mapped through and created earlier. Same with rainbow. So we can just keep creating these inside of here. And now we know that what we need to filter on color

07:14

is within this array, black and rainbow. We can do the same with size as well now, because of course we're just iterating through, so I can filter by each of those.

07:22

So now effectively what we've got is a array hooked up with the keys for each of the things that we want to filter by, and they're coming through really nicely.

07:31

So we can go ahead and get rid of our query filters just here, and we're pretty much done. We have hooked up these to LiveWire. Now, of course, what we need to do

07:40

is head over to the next episode, and when we click on these, actually send them through to MeliSearch so we can filter the products that we've got.

78 episodes•8 hrs 42 mins•3 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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!