Adding items to the cart: Build an E-Commerce Platform

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

Sign up to access "Build an E-Commerce Platform" right now.

Episodes

Transcript

Episode summary

Episode discussion