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
40. Adding global navigation search

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
So let's move away from our product browser and let's go and implement the global search in our navigation, which, of course,
00:07
allows us to just type and see a list of products which match our query. Finally, we can get to the point where we can start to actually search within MeliSearch
00:15
and see some results. So the first thing to do is put the search input up here. So let's close everything off and go over to our navigation within Livewire.
00:25
Remember, the reason that we moved this over to Livewire is so we could implement this functionality into here. Now, this would be slightly better if we were to create this as an Alpine component
00:38
rather than a Livewire component because we're gonna be sending down quite a few requests to a Livewire component. So just bear that in mind for now.
00:46
We can always change this over a little bit later, but we are gonna be making sure this is as fast as possible by not sending too many requests down to our server. So just next to this navigation link item here,
00:59
I'm gonna go ahead and grab some pre-made markup for the wrapper for our search input. Of course, you can go ahead and grab this from the course downloads.
01:08
And basically, it's just an input type of search styled up nicely. And the only other thing that we need to do if you pull this across is set flex grow
01:16
on this overall container. So this just has enough space to breathe. Now, if we come over and give this a refresh, there is our search here.
01:23
And we may also need to just change around all this flex here. So let's say flex grow on this overall wrapper. And yeah, there we go.
01:33
So we've got a full search bar up here. Of course, we can change that around if you wanna style it up slightly differently. Okay, so the goal is to just start typing in here,
01:41
send a request through to MellaSearch, which we're gonna be doing via Scout. So again, we're not gonna be sending a request directly to the MellaSearch server.
01:50
We're gonna be doing this through Scout. So again, it's gonna hit our server every time we potentially type a key, which could be improved,
01:58
but we'll get this working and then we can always change it later. Okay, so we need a search query. So let's head over to our navigation
02:06
and let's go and create a property. Let's do it at the top here called search query. I think that's fine. We'll just set that as an empty string by default.
02:17
And then what we wanna do is when we perform a search, actually grab a list of the products. So under render, let's go ahead and say products and product search.
02:30
And we'll say this search query and get. Now again, not the most efficient because we're doing this when this component renders. So we're always gonna be performing an empty search
02:42
when this renders. But again, we can always fix that up a little bit later. Let's get it working first. And we're gonna pass them products down to our navigation.
02:51
So if I were to set this to say Nike, just to test it out, and then inside of our navigation, we were to output the search results,
03:00
we'll be able to see all products that match Nike, which of course at the moment are two. So right down the bottom of our navigation, we're gonna go ahead and say if search query,
03:10
and then we're gonna show a block with our results if we actually have that. So let's just put results in there for now. If we come over and give that a refresh, there we go.
03:19
We get a results out because of course we passed Nike in by default there. Once again, I'm just gonna go ahead and pull in some pre-made markup,
03:27
which you can grab from the course downloads just so we can see what this is gonna look like. If we give that a refresh, a product's gonna be here, here,
03:34
and then just stacked underneath. Of course, feel free to style this out how you like. So if we do have a search query then, and then let's just indent this
03:43
and make sure all this is pulled in as well. Just fix that up. Then we wanna go ahead and iterate through this here and output each of the products that we have found.
03:54
So let's start to iterate through. And what we could do is actually use a for else here. So we're gonna iterate through the products that we have as product.
04:09
And we could say empty and then end for else. And we can have a kind of no products found state in here, which we'll style up in a second. And let's just take a look at this.
04:22
There we go. We get two outputs. Of course, there are two products that match Nike in here. And then for each of them products,
04:27
we can just grab like the formatted price and all the kind of stuff that we're used to. So let's say formatted price in here. And of course, output the product title.
04:37
Product title. And if we come over, there we go. So we've got the two products that are found with that search query in there.
04:43
And then if there aren't any products found, of course, we'll style that up in a second. But let's just go and hook up our input here to that search query.
04:55
So let's say wire model, search query. And let's come over to our navigation and get rid of Nike in there. And let's give that a refresh.
05:07
And then let's type Nike in. And yeah, that doesn't work. So let's figure out why that is. Let's come over to navigation.
05:16
And let's, of course, just fix that up because it's wire colon model. So let's come over and type something in. And there we go.
05:22
We get what we need. And again, if I type Air Force 2, MeliSearch is gonna prioritize that because it matches a little bit better
05:30
and it's gonna show us that first. Of course, if you had lots of different products with different names altogether, this search would work much better.
05:38
But for now, we're just working with these two. Okay, so let's just think about the amount of requests we're sending down here. Like I said before,
05:45
this would be better as an Alpine component. But if I type, for example, Nike Air Force 1, if we head over to Fetch XHR, you can see that we are sending
05:58
a huge amount of requests down here. So what we could actually do is get away with debouncing this. So let's say debounce,
06:06
and we'll set this to 500 milliseconds. We could bump it up as well, but this will just mean that as we type, we'll see less requests being sent.
06:15
So I typed Nike in, and that only sent one request. Let's try Nike Air Force 1, and you can see that that debounce has improved the amount of requests that are being sent down.
06:27
So I think for now, that is a good compromise until we potentially move this over to an Alpine component. Okay, now we've got that in there,
06:34
let's just hook up a few things in here. So namely the href that goes through to the actual product itself. So of course that's gonna be product and slug.
06:43
So we should now be able to search for Nike, and click on this and go through to the product, add it to our cart. And also we wanna go ahead
06:51
and style this no products found, and also clear the search as well. So if we just type in a load of rubbish in here, we get no products found.
06:59
That's fine as it is, absolutely fine as it is, but let's just wrap that in a div just in case we do want to style it up. We'll just leave it for now to not waste time.
07:09
And then we want this clear search in here. So let's say wire click, and we'll just say clear search. And let's just implement a really quick method in here
07:21
called clear search. And all we'll do is set this search query to an empty string. So let's go over and type Nike. Let's hit clear search, and there we go.
07:35
It clears out for us. There are other ways to do that, but I think that's absolutely fine for now. Okay, so that is our basic search.
07:42
Feel free to improve it, but at least now what we can do is search for products, click on them, and of course go through to eventually add them to our cart.
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!