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
35. Indexing product variations for filtering

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
In order to implement our filters on the left here, we're going to need to make use of something called faceted search.
00:06
Now, what this is going to allow us to do is within our index, which at the moment is pretty simple, have lots of different properties of these different products.
00:15
So for example, Nike Air Force One, the two properties of this which we can filter on are the color and the size. And of course, that's going to vary from product to product.
00:26
You might have lots of different filtering options or lots of different variations. So what we're going to do is for our filters, we're going to pluck these directly
00:35
from the types that we have in our database. You can change this up to make it a bit more custom if you want to, but I found it just makes a lot more sense to filter
00:44
by what you already have in your database. So in our case, we're going to end up with two filters, color and size. And what we want to do is we want to index the fact
00:54
that the Nike Air Force One has black and white properties and also has these two different size properties as well. So in this episode, we're just going to focus on getting this data into MeliSearch to start with.
01:08
So if we just head over to our product model, let's go down to where we created this searchable array. So we've already got our category IDs and we've seen how we can use these.
01:18
But now what we want to do is grab the variations of this product, all of the variations, group them by their type, go through them and then output these in MeliSearch.
01:30
So let's just go and look at how we're going to do this. So to do this, we're going to merge in another array because we're going to need to pluck out and let's just actually demo this up here really quickly.
01:42
So what we're going to need to do is something like the following. This variations, we're going to need to pluck, sorry, group by the type, which is going to group
01:51
by the value that we have in our database. So color and size, which will give us two properties here, color and type. And each of these will have black and white and type
02:05
or in this case size, sorry, not type, will have eight and nine, for example. So what we want to do is group it by the type, map through it and then output this data to MeliSearch.
02:17
So because we're going to be doing this, the best thing to do would be to merge in another array, which will be the result of that query that we're making and then go ahead and cast it to an array.
02:29
So let's go ahead and get started on this. So let's say this variations and group by type. And let's pull this down so it makes a little bit more sense.
02:41
And now what we're going to do is map through with keys. So let's create out a callback in here. That's going to give us each of the variations and the key.
02:55
And then from that, we're going to return an array and we are going to include a key here, which is going to be size or color, for example. And then we're going to end up with an array here
03:09
of the different colors that we have. So effectively what we're going to do is for each product, we're going to have this color and size in here with all of the different options
03:20
for that particular product. So we group by type to get this out by this key, either color or size. And then we want to iterate through each
03:29
of the properties of that and then output them. So from this array, then what we want to do is output the key here. So we're building up pretty much a new array
03:40
and that's why we map with the keys because we want to include these keys in here. And we're going to say variation. And of course we want something like
03:48
for if this key in this iteration was size, we want eight and nine, but we don't want to iterate through them. So once again, we can make use of pluck,
03:58
which will pluck out then properties of that collection and we can pluck that by title. So let's go ahead and index this and just see what we end up with.
04:07
So we're going to go ahead and let's flush it first and then re-import it. And yeah, so we've got a error here and it looks like map with keys doesn't exist.
04:20
And yeah, that's map with keys, not map with key. That would make sense. So let's go ahead and import them and yeah, we get another error here.
04:27
So let's just check this out and argument two must be type of type array. Ah, of course, yeah. So we mapped through this fine,
04:35
but what we're trying to do is merge in a collection. So the last thing that we want to do on this is just cast it to an array so we can merge it in properly.
04:43
So we should be there. Let's go ahead and import this and there we go. Okay, let's come over to MeliSearch
04:48
and see what we've got here. So you can see now that we've got a color here, black, white, and we've got a size 8998. Now ignore the fact that that's duplicated for now.
04:59
We can fix that up later and it's not going to affect our faceting whatsoever because each of these is unique so it doesn't matter too much.
05:08
But you can see what I mean. Now we know the properties or the available properties of each of these products. Two colors that we can have for this
05:16
and the two sizes in this case four, but we can ignore the fact there are duplicates of this as well. Now this one doesn't have any
05:23
because we haven't added them to the database. So it'd probably be a good idea at this point to just add a few more variations in here just so we can start to see them
05:33
other filters come through. So what we want to ideally do is create something wildly different to the product that we've already got.
05:41
So let's duplicate down black and let's associate this with the second product that we've got and let's do something completely weird
05:49
like rainbow for example. And that's again going to be color. So that's the color property of that. And then let's just add one size under rainbow.
05:58
So let's just duplicate a size down make sure that's associated with the second product but really importantly for the parent ID make sure that that reference is rainbow
06:07
which is an ID of seven and we'll just set the order to one here. So we've got one, we'll set that to two actually cause that would make sense
06:15
and we'll just say X, Y, Z for the SKU it doesn't really matter. And again, this is still the size. So for the actual size itself
06:24
let's set this to something like 12 just so it's different to the ones that we've already got. So let's save that out. We can test this out actually now
06:32
if we just come over to our Nike Air Force 2 you can see we've got rainbow which is currently out of stock. Let's just add some stock in there
06:40
just so we can play around with this. So let's add to remember the last variation, which is 12. So add 10 in there for that and let's go over and give that a refresh.
06:50
So we can select rainbow and we can select size 12 and technically add that to our car and eventually check out with it. But that's not the point.
06:59
We now want to go ahead and re-index this data. And if we come over to MeliSearch we now know that the properties or the available properties for this particular shoe
07:10
are rainbow and 12. So that is what we have done. We have indexed all of the available colors and the available sizes
07:19
for each of the products we've got. Now what we can do is we can pluck out all of the different colors, add them as options over in our filters
07:29
and then of course add in all the sizes under them as well and kind of merge them together. So when we click on them, we can then filter through when we search
07:39
to only pull back products that have the color or the size or any other variation type you've got inside of our MeliSearch index. So now that we've got that in there,
07:50
the first step is to pluck all of this data out and actually show the filters before we start to filter on them. So let's tackle that in the next episode.
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!