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
22. Adding items to 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
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 at a really important part where we can actually add items to the cart just before we do that i'm going to head over to our navigation template and let's just make sure we open up the right one here and we're going to go ahead and just next to where we added this settings drop down for the cart make sure we allow us to log in register because we are going to be testing this
00:22
with authenticated users and unauthenticated users so we'll go ahead and add a guest directive just here and we're pretty much just going to grab the same code for this item that we built out and let's go ahead and say login and switch that to login and we'll do the same for register as well we could make these into components they're slightly different than the
00:47
defaults we get with laravel breeze but we can always tackle that later so now you can see we've got login and register if we're not signed in which we're not at the moment so we can go ahead and log in if that's the case as we know though we have guest checkout so it doesn't matter if we are signed in or not we have a cart session in here and we can start adding items to our car
01:05
so let's just backtrack a little bit and figure out where we did this this was over in the product selector and we have this add to cart method here which we call when we get down to the last variation that has an sku at the moment that's just dying and dumping on the variation that we want to add to the cart so what we want to do is inject in our cart in here using the cart
01:28
interface and then of course call some sort of add method so we want to pass in the actual variation in here that we want to add so that's the sku variant so we're just going to go ahead and say this sku variant and we also want to pass in a quantity here which by default will be one we're going to leave this as a default here we're not going to allow this to be selected on here just
01:49
yet but you can always update that in a form and then pass in the value inside of there okay so if we just head over to our cart class we don't have a method to add in here at the moment so let's just come down to just after we create this and we'll go ahead and create out a add method and in here we're accepting in a variation so let's call that variation and of course a quantity as well which
02:14
by default we will set to one so let's just make sure that we import the namespace for variation and for now i'm just going to do the same thing die dump on that variation just so we know this is hooked up properly so let's just try this through let's go ahead and add a black size eight hit add to cart and there we go we get exactly the same variation but we're now working
02:33
inside of our cart so now all that's left to do is update the code to actually add the variation to the cart we need to be careful here because we need to take into account if the item is already in the cart in that case we're going to want to update the existing pivot the existing quantity so in the database let's just remind ourselves over in cart variation here which we added a
02:56
couple of records to manually we have got the variation id and the cart id but we've also got this quantity pivot as well so i'm actually going to delete these here and i'm also going to get rid of the cart sessions that we have and let's do this from scratch so i'm going to give the page a refresh and at the moment we get variations on null that's just because in our app at the moment
03:16
we have a session with the cart id that we've just deleted from the database so at the moment we're assuming that we're never going to delete any cart sessions from the database if you did though you're going to end up with this issue and if you were to clean them out later you're going to need a check in here to sort of refresh the car i'm just going to delete these manually
03:35
from the cookie section over in the application tab in chrome and we're back to having a cart in here just a single cart we can start adding items to it so something to bear in mind for a little bit later but we can tackle that later on okay so let's go over to our cart and let's look at adding this item so we want to go ahead and grab that instance that we created earlier that instance
03:57
method which returns the cart instance and remember that's cached we want to go ahead and access the variations relationship so if we just come over to our cart model we've got our variations relationship in there and then we want to go ahead and say sync without detaching because we don't detach existing records from this and it's this we're going to pass an array with the id of the
04:18
variation and then the pivot information inside of the array so the id for the variations very simple because we've already passed this through as an argument and then in here we just want to pass in the quantity now let's just test this out with just the quantity for now we're going to want to restrict this really really importantly because technically someone could modify the request to
04:41
add more quantity than you actually have so it's at the point that we add it and update it we want to make sure that it only hits the maximum amount of quantity that we actually have in the database so we'll leave it there naively for now and we'll update this later let's just see what happens when we do this so i'm going to go ahead and choose black eight hit add to cart and there we go now
05:02
if i give the page a refresh sure enough we have one item in our cart and if we head over to the database sure enough that's been hooked up correctly with the correct quantity so that works really nicely but what happens if we go ahead and add another one from here well let's just try that add to cart if we head over give that a refresh nothing really happens because we're syncing this
05:24
without detaching the existing record and it's just keeping the same record in here and the quantity isn't updating we would expect the quantity to update in that instance so let's tackle first of all the that issue so we're going to go ahead and make sure we update the existing variation and then we'll tackle this quantity issue here and we'll test it out with a item that
05:46
has lower stock than we're trying to add so if the item already exists within the cart all we want to do is update the quantity so we could technically do this here we could actually set quantity in here to 10 and watch what happens when we sync this with without detaching so let's go over and add another item in here and then go over to the cart and there we go we're up to 10
06:12
so when we sync that we go ahead and update the existing pivot we've just updated the quantity that's being passed in so we want some sort of if statement here to check if this product already exists and if that is the case we want to go ahead and update the quantity and again naively we want to go ahead and just increment this by one or increment it by the quantity that we have
06:34
passed in so we're going to say something like quantity and this here will be the existing quantity which we don't know at the moment because we've not been able to fetch out the existing variation that's in the car so let's just leave that for now let's look at what we need to add in here in fact i'm going to comment all of this out okay so let's just die dump on this and we're
06:52
going to call a method called get variation and we're going to pass the variation in could probably think of a better name for that but what this method is going to do if we just create it out down here get variation is extract a variation that already exists within the cart so if we just accept that variation into here we're going to go ahead and return this instance and we're going to
07:19
go ahead and grab the variations out just as a collection so we don't need a query for this and we're going to go ahead and use the find method on the laravel collection object that we get back and we're going to pass in the variation id that is as simple as it is that will return to us an existing variation that's already in the car and we'll have that pivot
07:36
information in there so if we just die dump on this get variation and this variation is already in the car let's just see what information we get back so say black remember size eight we need the same variation and you can see here sure enough we get back the size eight in here now what we also have in here is a pivot relation with that pivot information which gives us the quantity
07:58
well it doesn't actually include the quantity at the moment we're going to need to make an adjustment to get that out so if we come over to the cart model on the variations we're going to say with pivot and quantity so that's going to include the quantity in the query when we get that pivot information back let's go over to black size eight again hit add to cart and now if we look
08:20
at the pivot table we should see three attributes one being the quantity so we can extract the current quantity that we have and increment it by the quantity that is passed in so let's go ahead and take this out of die dump and let's put that into our if statement and we're going to go ahead and assign this to something like existing variation and if that exists then the quantity
08:48
is going to be the quantity that we pass in increment the existing variation pivot quantity so if we had 10 in there and we passed in a quantity of one this value would now be 11 and then that would sync it with 11 in quantity remembering that we need to take into account the maximum quantity that we actually have in stock let's test this out first of all so i'm just going
09:13
to go back and just start this from fresh and if we come over and add in that item and we come over quantity of one if we add this again come over quantity of two and so on and so forth so that is now updating a quantity for a item that already exists in our database now let's just finish up by thinking about this max quantity so just to test this out let's just go over to our stock
09:40
levels for the size eight here and that's uh two so let's just get rid of this one so we can focus so we've only got two of these black size eight nike air force ones in stock so we can't add more than that so if i try and add another one in here and bump that up oh i'm not sure what's happened there and bump that up to three and we head over to cart variation we've now got three in our cart
10:05
but we've only got two in stock not great so to get around this we know that on the variation itself we have this let's say i think it's stock count so that gives us the total stock count for this particular variation remembering taking into account any descendants which in our case doesn't really matter so what we can do is we can use the php min function to grab the lowest of the two
10:28
values that we pass into this function so if we only have say two in stock and we're trying to add five this min function will pull out two so this will return to us two so we will only be able to ever add the maximum stock that we have so this is the quantity that we are trying to add and then this is going to be the stock count for that particular variation so if this is lower that
10:55
will always pull that value out let's try it out so i'm going to go over and you can see over in our cart variation we've got three let's change that back to two and let's go over and try and add this in once again so let's add that and let's go over and there we go it's still at two so it's picked out the maximum amount we have whereas if this was one and we pass in one and two
11:17
that's going to go ahead and give us two but we're not going to be allowed to add more than that so we need to make sure we bear this in mind when the user is updating the quantity we're only ever going to show the amount of max quantity in the drop down when we get to that part but we need to make sure we take this into account as well so there we go we can add items to our car but this
11:39
car up here this number isn't getting refreshed at the moment so i'm going to go ahead and delete this variation come over and the goal is that when we add this that updates so very very simple to do with livewire because we can simply refresh the entire navigation you could swap this out to have like a small component that you refresh but at the moment our navigation is very simple so it
12:05
doesn't matter if we refresh the entire thing so this is where we want to emit an event a global event just to say that the car has been updated so we're going to say this emit and we're going to prefix this with the kind of namespace so we'll say car we'll say dot updated that's all we need to do and now we're going to hook into this in our navigation to refresh the entire navigation
12:26
component when this event is fired so if we head over to our navigation component that we created with livewire what we can do is up here go ahead and create out our listeners so protected listeners and we're going to say well for this navigation when car updated is fired and we are listening to this just go ahead and refresh this entire component with a dollar prefix to this so let's
12:52
try it out i'm going to go and delete the item that we've got in our cart here and we're going to go over and try this out so add black size eight hit add to cart and it didn't look like it did anything so let's just have a look at why that is let's go over to our product selector and we're emitting car update and we're listening for car updated so that would be why let's switch that
13:19
to updated that kind of makes a little bit more sense head over to the database delete that and let's start from fresh so black size eight add to cart and there we go our navigation is refreshed livewire is re-pulling this data in from our cart and let's just keep an eye on our queries while we're here just to make sure we're not running too many so we do have a lot of ajax requests but
13:42
i think that was over the life cycle of our session we've got 18 here which is quite a few we'll come back to this later because we kind of just want to get this done first and then once we have done this we'll go back and review our query count but that's now working we can add an item to the cart see it updated just up here and we're good to go
78 episodes8 hrs 42 mins

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!

Comments

No comments, yet. Be the first to leave a comment.