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

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

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

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