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

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

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

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 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.