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

23. Creating the notification component

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

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.

Episode summary

In this episode, we're building the notification component for our app—the thing that pops up at the top of the page whenever we add, remove, or update a product in the cart. It's a simple notification UI, but really handy for providing feedback to users.

We start by adding the Blade template for the notification (don't worry, the HTML is in the course resources for easy copy/paste). Instead of using Livewire, we’re sticking with Alpine because it's lightweight and already included with Laravel Breeze. After removing an extra base notification component we don't need, we create our notification component and stick it in the global layout so it shows on every page.

The cool part is making the component reactive with Alpine. We set it up to listen for browser events, so anytime we trigger a notification (for example, when adding to the cart in Livewire), it’ll pop up, show the appropriate message, and then disappear either after a few seconds or when the user clicks to close. We even make it customizable, allowing us to adjust the timeout for how long it appears each time.

To polish things up, we address that annoying flicker where the notification briefly appears when Alpine hasn't kicked in yet—using the x-cloak directive and a CSS rule to prevent that. By the end, we've got a reusable, Alpine-powered notification component that works with our Livewire components and looks clean on every page.

Episode discussion

No comments, yet. Be the first!