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

20. Showing the cart in the navigation

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 going to focus on our navigation now and adding the cart button into the navigation but

00:06

also the count of items we currently have inside of the cart. Now at the moment we can't add anything to our cart but this is going to show us how we can do this and then also later when we do for example choose black size a and click add to cart we won't have to refresh the page because we're going to create a live wire component for this cart to refresh this for us. So let's take

00:30

a look at the current state of our navigation which I've just closed off. Now at the moment this is just a blade component and we tweaked this earlier. This is referenced inside of our main app file. Now at the moment we can't really add much dynamic behavior to this navigation like our search which we're eventually going to do and also our cart button. So I'm going to turn

00:53

this into a live wire component so we can easily refresh it. So let's go over and create out a live wire component which represents our navigation. So let's say live wire make and we'll just call this navigation. So we're going to go ahead and open up our navigation.blade.php file, grab the contents of this and open up navigation.blade.php inside of our live wire views

01:20

and paste this in. Then we can come back over to app.blade.php and we can replace this with a live wire component and we shouldn't see any difference at all because at the moment we've just got a blade file that's rendering out everything as normal and live wire works really well for that. So now that we've got our navigation I'm going to really make sure we delete our base navigation

01:44

which should be under the layout here. So we don't want that in there anymore and let's come over and we now have a live wire component for our nav. So let's go ahead and create out that cart item over on navigation. So let's figure out where we're going to put this and I think if we go over to the settings drop down section yeah we could put this just here I think

02:10

I think that would be absolutely fine. So let me go ahead and copy over some predefined markup for this very very very simple there we go. So let's just go ahead and pull that in and effectively what I've done is just taken one of the styles that we already have for our navigation items just over here and just very slightly tweaked it. So let's just add some content in here let's say

02:35

carton zero and let's give that a refresh and there we go so it sits directly next to that. Now we can change this up by adding some spacing in here so let's say space x8 just to space out them items and I think that's fine for now. We can also go ahead and log out and see what that looks like of course because we have a guest car and I think that looks absolutely fine. Okay so we can

02:58

leave ourselves logged out that's fine but I am going to come over to the products page just so we have something nicer to look at and let's focus on grabbing the total amount of items that we actually have in our cart. Let's come over to our cart class and the first thing we want to do because at the moment we don't have any way to pull this out of the database what we want is some

03:23

sort of method which is going to allow us to grab the current instance of our cart out of the database. So let's go and just create out a method called instance this isn't going to work brilliantly at the moment we're going to look at caching this in the next episode but let's go ahead and just say return and cart model or model cart I think it's namespaced under in here and

03:49

where uuid and then first so let's go and fill this in and we know that this is under our session so session and get and then config cart session and key let's just roll over this just in case it doesn't make sense so this is our cart model the one that exists in the database we know that we've got a uuid stored in our session and this will have been for the one where I was logged in

04:20

and this was the one where I'm logged out we're plucking it this out where the uuid equals the uuid that we have stored in our session and then we're just grabbing the first item out of here so what we could do is again just test this out so I'm going to come over to our product in fact we can come over to our navigation now and test this so under live wire let's go ahead and pass our

04:42

cart interface directly into our render method and we'll just die dump on cart instance and let's just see what we get okay there we go so we've got our car instance there from the database which means because this is now a model we can start to pluck out the relationships for like the variations we have stored when we've added these to our cart so with this we're actually going to make this a

05:08

protected method because we're not going to need to access this directly from outside of our class because everything else is just going to lean on this instance now this isn't cached at the moment so every time we call instance we're going to be performing a database query we'll look at a really simple caching technique to get rid of that in the next episode so the next method that we're going

05:30

to implement is the contents of our cart so what that is going to do is basically just return to us very very simply using the instance all of the variations which we haven't set up yet from our cart so if we come over to our cart model we know that this has multiple variations so let's create a variations method here and we'll just say that this has many

05:57

and variation like so so let's go ahead and call this contents method from our navigation here just play around with it let's give that a refresh and yes we've got variations cart id does not exist oh of course it's not a has many it's a belongs to so let's come over to belongs to many so let's come over to our cart model and this is belongs to many variation because we're working through a

06:29

pivot table and the pivot attaches this to the variations let's give that a refresh and there we go so we've currently got no items but we could kind of mock this just to get a feel for how it's going to work so i'm going to add a manual row in the database here and i'm going to attach the current session which i'm assuming is the latest one to these black size eights and i'm just going

06:50

to say a quantity of one so let's save this out come over and give this a refresh and there we go so that is one item technically in our car that we have manually added so now that we've done that what we can do is using this contents grab how many are in here now this isn't the total quantity so we don't need to think about summing up quantities just yet we just want the

07:13

total unique variations that we've added so let's go ahead and create a method in here called content count and let's just return this contents and just say count so we're just using a count on a laravel collection that we get back so we can use contents count now to display this in our navigation let's just check this is working first of all that should say one and sure enough

07:39

it does if we had more of course it would increment so this is the value that we want to display so let's go and just cut this out of here we're not going to pass this directly down to the template instead because we might need to reference it in multiple places and we might need to do some other cool stuff with it we want to go ahead and create a getter so let's go ahead and create

08:00

out a get cart property method so what that's going to do is again use our car interface and just return that to us cached because livewire will cache dynamic properties that we create inside of there so now what we can do is inside of our navigation template in place of this we can say cart which is now available and contents count like so so if we come over and

08:33

give that a refresh and undefined variable cart so that needs to be this cart because that's a property there we go we've got one item in our cart and of course if we come over here and just duplicate this down and choose maybe the white size eights as well we see two items in the cart so there we go so now when we eventually get to clicking this add to cart button and we call our cart to add an

08:58

item and attach a variation to our cart model we can actually refresh this and then the cart value will be updated because it will read the new value but there is a massive issue with the way that we have set things up at the moment and that is the amount of queries we're going to be running and we're going to talk about that in the next episode before we go any further

Episode summary

In this episode, we're focusing on upgrading our navigation so it can display our cart, complete with a badge showing how many unique items are inside. Right now, our navigation bar is just a static Blade component, but to enable real-time updates (so the cart count updates instantly when items are added), we turn it into a Livewire component.

We go through moving the navigation markup into a new Livewire component, swapping it out in our main layout, and making sure everything still renders the same. Then, we introduce a cart icon (or simple button) in the nav, using some quick markup tweaks and spacing to make everything look tidy. The cart initially shows "cart: 0", but we want it to pull real data next.

We create a method on our cart class to fetch the current cart instance from the database using a UUID stored in the session. After a bit of trial and error (and some manual database tweaking for testing), we hook up the navigation component to display the live count of unique items in the cart, using Laravel collection methods.

For future-proofing, we add a computed property so other parts of the component can easily access the cart's contents count. Now, when you add more items to the cart (we do this manually for now), the navigation updates to reflect the correct count—no page refresh needed!

There's a bit of a cliffhanger at the end: right now, we're hitting the database more than we like. Next episode, we'll tackle caching to improve performance before moving forward.

Episode discussion

No comments, yet. Be the first!