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

54. Flashing a message when quantities have changed

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

Now if you had added 10 items here to your cart and they were reduced to 8, it's pretty unlikely that you would notice this.

00:06

It would be a lot better if we flashed a message to tell the user that some items in their cart have changed. And remember the key thing is hit some items in your cart. At the moment what we're doing is being a little bit lazy

00:20

and just going ahead and iterating through all of them and just throwing a general exception here just to say that something has changed. Like I said we can change this up later to specifically tell the user what has changed. We'd have to collect up the items that had changed.

00:35

But for now let's focus on flashing a message just to tell this to the user. Now at the moment the only problem is we're not within a live wire component. Previously what we've done I think over on the product selector is dispatch this notification here with a body with a timeout.

00:53

And this has worked really nicely. But because we're not in a live wire component within this controller, how are we going to make use of our notification component that we built earlier which is actually here.

01:06

Now we can do this by using a session flash and actually picking it up and manually putting in the data into that component. So let's just flash a notification like we would normally do. It's not going to be as robust because we're not going to be

01:24

able to specify the timeout here although we technically could. So let's go ahead and just grab over some text from my notes here. And we're just going to flash a notification. Some items or quantities in your cart have become available.

01:37

Change that up of course if you want to. Now that's going to flash a message. Let's just go back. We're going to have to keep modifying this to 10 and give that a refresh.

01:46

That has been flashed but of course nothing has happened. What we're going to have to do is come over to our notification component and update this slightly to handle a session as well. So how do we do this?

02:01

Well let's go and just add in an XInit initializer for this Alpine component. So this will be run when this component loads. For example we can console log out something. And if we head over to the browser, open up our dev tools and give that a refresh.

02:21

There we go. So that's always going to be called when this component initializes. So what we want to do is within PHP, within this blade template, if a session has the notification flashing it,

02:37

we want to then manually dispatch an event which will be picked up by this. Hopefully that makes sense but bear with me. So we're going to go ahead and use PHP in here. A little messy but it's absolutely fine.

02:48

And we're going to say has notification which is what we just flashed. So let's end that if just down here. And if that's the case we're going to go ahead and say window on load. So we're going to wait for an onload event in our window and call something in here.

03:04

So let's just say flashed in here for now. Okay so let's go over and give this a refresh. We don't see anything at the moment but if we just bump this quantity up to 10 and we come over, there we go.

03:17

We get flashed out inside of here. Now we do see that twice. We'll have a look at why that is in just a second. But the most important thing is we have got this information in here.

03:27

Now at least we can detect that a notification has been flashed. So now what we can do is just pretty much do what LiveWire does behind the scenes but manually so it can be picked up here. So LiveWire behind the scenes will go ahead and dispatch an event on the window object

03:43

and we're going to go ahead and pass in a new custom event and we're going to call that notification. Now down to this of course what we're going to do is pass in the options in this detail property which we're using to pick up here.

03:58

So we want to pass the body and we want a timeout in here. So for the timeout let's just set this to three seconds and then the body is of course just going to be the notification from that session. So that's going to go ahead and dispatch that event and then get picked up by here.

04:16

So we're just basically pulling in the ability to flash with this component with a session. So if we give this a refresh and let's just have a look in here. So looks like we've probably messed something up here which of course I have done.

04:32

I'm not sure what happened there. So let's go ahead and say body and that should be good. Let's give that a refresh. There we go.

04:39

Okay so we're going to come over switch this quantity back to 10. Come back over and there we go. We can see some items or quantities in your cart have become available. Now let's figure out this issue where we saw that invoke twice.

04:57

So let's go and just console log something out and yeah it looks like that's happening twice. Maybe we don't need this window on load. Let's just get rid of that and just try to dispatch the event on its own.

05:12

So let's switch that back to 10. And yeah it doesn't work. I think it's actually going to be okay because it doesn't really matter if we dispatch this twice because this component is going to pick this up regardless.

05:26

So that looks good. We'll leave it at that. Okay there we go. As well as flashing things directly from Livewire,

05:34

we're now pretty much taking Laravel session functionality, flashing this, picking it up within this blade template and then doing what Livewire does behind the scenes to pass this back to the same component. Hopefully that makes sense.

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.