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
23. Creating the notification component
Episodes
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
We're now going to build out the notification component
00:02
that we saw from the introduction. So when we add a product to a cart, remove a product, update the quantity, we want a little notification component at the top to show.
00:12
So as with a lot of the markup that we've been working with, we're going to go ahead and copy and paste this. But you'll find the HTML in the course resources to download. So I'm going to go ahead and make out a blade
00:25
component for this. We're not going to make this a Livewire component. There's no need to use Livewire here. We can just stick with using Alpine, which is already
00:33
included by default within Laravel Breeze. And we're just going to call this, boringly, notification. So let's create that component out. I'm going to go ahead and delete the base notification
00:43
component under View here, because we're not going to need this. Let's do that first of all. And then let's open up notification.blade.php.
00:51
And I'm going to go ahead and paste in some markup that has already been created. So we've got a notification body, and we've got a Close button.
00:58
Now, we need to add this globally, because it needs to be on every single page. So we're going to do this in our app.blade.php layout. It doesn't really matter where you put this.
01:08
We'll just pop this down here. So let's say X Notification. And that's pretty much all we need to do. Let's head over, give this a refresh.
01:14
And there we go. There is our notification component. So we want this to have a timeout. So we want this to disappear after, say,
01:20
four seconds, five seconds. And then we want this to disappear when we click on this. And of course, we want to be able to dispatch this
01:27
from anywhere, so either from a Livewire component or a Laravel session, to show when something happens. So let's go over and start to figure out what we need to do. We'll start with over in Product Selector.
01:40
When we have added an item to the cart, let's start with the actual event that we want to dispatch. So this is going to be a browser event, which
01:48
we can pick up with JavaScript. And we can dispatch these events within Livewire. So we're going to say Dispatch Browser Event. We're going to call this Event Notification.
01:57
And let's think about the kind of data that we want to pass down to this notification. You can either just pass a single value in here, or you can use an array, whatever you want.
02:05
So I'm going to go ahead and pass in an array with a body. And for this, we're just going to say Added to Cart. I want to make sure we change that a little bit later to customize this to say something like Nike Air Force
02:16
1 Added to Cart, just so it's a little bit nicer. So that's pretty much it. And we'd also probably want some sort of timeout to be passed in here.
02:24
So we could call this delay, for example. And we'll do this in milliseconds. So say we wanted this to show for four seconds before automatically disappearing.
02:34
Let's actually call that timeout. I think that makes a little bit more sense, because delay kind of feels like the delay till it's shown. OK, so let's head over to our notification component.
02:45
Now we're actually dispatching this. And let's think about what we need to do. So we're using Alpine here. So let's go ahead and initialize this component with xData.
02:54
And for this, we just need to store the body in here that we can display within this component. So if you're new to Alpine, this is where we want to show that body text.
03:04
So we're going to say xText and body. That's going to reference this value up here. So we can get rid of the notification body. And we can just say an example.
03:14
Let's head over, give that a refresh. And there we go. So that's the text that we're showing. And this is the text that we're going to set from that global
03:21
browser event that we're firing. Now, how do we pick this event up? Well, we go ahead and create an event handler for this. And we give the name of the event, which is notification.
03:32
So if we just head over to here, that's the name of the event. And then we want to go ahead and say window to signify that this has been dispatched on the browser window object.
03:42
So now what we can do is set the body here to the value we get back from this event. So we have this special event object. We have detail, which will contain the array that we passed into here,
03:54
which will actually be a JavaScript object now. And then we can go ahead and pluck out the body. And that's pretty much it, just to show the notification. So let's get rid of an example.
04:03
Let's come over and give this a refresh. There's nothing in here at the moment. So it'd probably be a good idea to add an xShow to this to say, well, is the body available?
04:12
Or we could say body.length. So let's go over, give that a refresh, and it's gone. So as soon as we go ahead and dispatch this browser event, this notification event, this will be picked up here.
04:24
It will set the body here to the body that we passed into that array. And then it will show it, because the body will now have length. So let's go over and just try this out. So I'm going to go ahead and add another item in here.
04:35
And there we go. We get added to cart. Great. Now that's going to hang around now, and we're literally
04:40
not going to be able to get rid of it by either clicking this or waiting. So we're going to need to add in on this button a way to get rid of that notification. Very, very simple.
04:51
The condition to show this is that the body is filled. So all we need to do is say xOnClick, and we're going to go ahead and set the body to an empty string. So let's try it out.
05:03
Let's go ahead and add a cart item. And there we go. It's disappeared. So we can focus on that delay now as well.
05:12
If we just come up to the top here, when this notification is pulled in and we set the body, what we can also do in here is set a timeout. So after a certain amount of seconds, we're going to go ahead and do something.
05:24
And that is going to be setting the body back to an empty string. And the amount of seconds that we want to pass in is from the event, detail, and timeout. Or if that's not available, just fall back to a sensible default,
05:37
like two seconds. So this timeout will set the body back to an empty string after two seconds, or if we've passed it in, in our case, four seconds. So let's try this out as well and go ahead and choose an option.
05:51
And we'll just wait for four seconds, and that should automatically disappear. Great. OK, so with this done, we now have a nice way to display a notification. The only thing that you will see is if you just give the page a refresh
06:04
a few times, you see this sort of flicker of this component occasionally. That is just because when Alpine is loaded on the page and your markup is loaded on the page, your markup will be shown first before Alpine can kick in and not show this component.
06:20
So we're going to go ahead and add the xcloak directive to this. Now, that's not going to do anything on its own. You can see we still get the flicker. But xcloak, by adding this, what it will do is automatically remove a class,
06:34
or it will remove an xcloak attribute on that item. So what we can do is we can set the xcloak attribute within CSS to a display none with an important modifier. And then once this is removed, then it will be shown.
06:49
But at that point, Alpine will be loaded, which means that we won't see that flicker. Now, if that doesn't make any sense, I don't know how else to explain it. So the best thing to do would be head over to the documentation
06:58
and see that working. But we can kind of catch this here. So let's come over to Resources and CSS. And let's style up xcloak to have a display of none.
07:10
And we'll go ahead and add that important modifier, because we always want that to be taken into effect. So when we first run this component, xcloak as an attribute will be on that component, which means it will always be hidden.
07:23
As soon as Alpine kicks in, it will remove xcloak for us, which means that at that point, we have already got Alpine loaded. So this xshow will take effect. Hopefully, that makes more sense.
07:33
So now when I refresh the page, you can see that nothing happens. And by the way, if you don't see that working, make sure you're running npm run watch or just run npm run dev once. But I'm keeping this running, so all of my CSS is compiled.
07:47
OK, there we go. That is our notification component for when we do something. And now we can just pretty much use this wherever we want inside of our LiveWire components
07:56
and outside of our LiveWire components later, which we're going to need to make a slight modification for. But at least we've got our notification component for our LiveWire stuff, and we can move on.
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!
Episode discussion
No comments, yet. Be the first!