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

28. Removing an item from the cart

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 hook up this Remove button, so when we click on it, it just simply removes an item from our cart.

00:06

So if we just head over to cartItem.blade.php, come down to where that Remove button is, and let's just say wire click Remove. And that's all we need, because within this specific cart item

00:19

component, we've already got the variation that we want to remove. So over to cartItem.blade, oh no, cartItem.php, the actual LiveWire component,

00:29

let's go and implement a Remove method in here to go ahead and remove this from our cart. So we're going to need to inject in the cart instance into this, or the cart interface,

00:41

and then we're just going to say something like, let's just make it up, cartRemove, and then this variation. That's all we need to pass through to that,

00:49

because of course, we don't need to update any quantities. So over to cart.php, let's go ahead and add in the ability to remove an item. So let's say Remove, and again,

01:00

except in the variation itself that we want to remove, and then we just want to get rid of that. So for this, we just want to say this instance and variations, so that relationship on our cart model,

01:16

and then we just want to detach this. That's pretty much all we want to do, and that will go ahead and just get rid of that from the pivot table that we have in there.

01:24

So let's just try this out. Let's go over, let's hit Remove, and if we come over to the database, sure enough, that's gone.

01:30

When we give this a refresh, we don't see anything. Great, so that's how easy it is to actually remove an item from the cart. Unfortunately, though,

01:38

this doesn't look great at the moment, so let's tackle this kind of state that we have here if there are no items in our cart. So let's come over to our template.

01:49

We'll just get rid of everything for now, cart.blade.php. This is where we want this if statement in here. We want to show all of this,

01:56

including the cart summary, if the cart isn't empty, but if the cart is empty, we want to show some sort of empty state just down here. So let's just design this out really quickly.

02:06

It doesn't need to be too good, so let's just add some padding, background of white, and we'll add a border on the bottom. We'll pretty much just replicate what we have up there,

02:16

and we'll say your cart is empty, and of course, I'm sure you can do a better job. So let's just go over and just see what this looks like. That's what we're gonna see instead of this top part

02:25

if we don't have any items in the cart. Now, over in our cart, we don't have an is empty method, so let's go ahead and create one of them. So let's create is empty just to check if this is empty.

02:39

Let's just mock this out for now and just return true, and over in cart.blade.php, let's wrap this in an if statement. So if cart is empty, or in our case, not empty,

02:50

then we want to show all of our contents and our cart summary. Otherwise, we wanna go ahead and show the cart is empty placeholder.

02:59

Great, okay, let's go over, give that a refresh. There we go. If we come over to cart again and switch this over to false, we see our cart summary.

03:07

So all that's left to do is just implement this is empty method, and we can go on and show this properly. So very simply, just go ahead and access the contents

03:17

or the instance directly, it doesn't really matter, and check if the count is equal to zero. So if we come over, our cart's empty. Let's head over to our product just to add an item in there.

03:29

And there we go. We see our items in our cart and our summary. Let's just finish off our cart removal by going ahead and admitting that the cart has been updated

03:40

and also showing a notification as well. So the first thing that we're gonna do is just admit the fact that the cart has been updated. And if we just come over here and add another product,

03:52

so products, Nike Air Force 1, again, just go through and add this. If we come over here and remove that, at the moment, nothing happens until we refresh the page.

04:03

That is just because over on our cart livewire component, we're not refreshing this when we get this action. Now, at the moment, we might be making a few too many requests.

04:14

We're gonna have to keep an eye on this, that we're not refreshing too much data, but let's just check this out for now. Listeners, and in here, cart updated.

04:25

And we'll just do exactly the same thing that we did within our navigation a little bit earlier. Let's just keep an eye on this because we may be making too many requests

04:34

and we can always figure that out later. So let's just add that in and let's just open up debug bar just to keep an eye on this and hit remove. And let's have a look at some of these.

04:45

Yeah, so we're making quite a few requests with quite a few queries here because that's having to relook up all of the details of our cart from the database,

04:56

but with the rest of them, that's absolutely fine. So once we get that other issue figured out, which we're gonna be looking at later, then we'll be good. But at least now when we remove our item from our cart,

05:05

this is being refreshed. Now let's just test this with two different variations. So let's add black in size eight and then let's add white in size eight as well.

05:16

And then let's just go up to our cart and let's remove one of these, great. And remove the other one and we're back to your cart is empty.

05:23

Last thing we wanna do just over in cart item is just show a notification. So again, we'll use dispatch browser event. We'll dispatch that notification event here

05:33

and we'll just pass through a body in here. And we may as well grab out the variation product title and just say removed from cart like we did when we added an item.

05:49

Okay, so let's just test this out one more time and we're good with deleting. So I'm gonna go ahead and choose this, head over to the cart, hit remove and there we go, great.

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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!