Hey, just a few more things that we still need to take care of, another one that we wanted to make
sure that we have done is whenever we're adding to the cart, the cart malfunction and then also constructing
the cart itself that we're adding items into.
And this is we're going to have the same functionality or similar functionality to what we had earlier.
So right now we have Cartney and whenever it gets clicked, we track the mouse event.
So we won't actually pick up the target that initiated the event.
So when we click it, we see that we get the element that triggered it.
So if we had more than one and maybe you want to buy a bear or something like that, so if we had more
than one, it's going to trigger that element.
So that gives us the ability to pick up the element and get content from that element and then deposit
that information into our main cart.
So that's what we're going to do right now, is we're going to add it into the cart from the cart object.
So we've got cart here and we need to create a function within the cart itself in order to add that
item as well as output it and a bunch of other things as well.
So let's create this and we're going to create a list.
So this is going to be basically where we're going to hold all the information contained within this
cart.
We're going to deposit all that information that the user is selecting.
And it's going to be all held within my list, which is sitting into the cart object, which gets constructed
every time we do new cart.
And in this case, we're already using cart.
So we need it to have another function here within the cart itself in order to add it into the cart.
And we already saw that we had this before where we've got Adir and we're going to have a method for
this where we're getting the item and then the cost of that item and we're adding it into the list and
the same as what we saw earlier, where we bring it to the lower case.
So we're going to use the nice thing about objects where we can take the item and to lower case.
And of course, this only really works if you have only one word items.
If they have more than one word, then you've got to do a little bit more clean up of that.
But for the purposes of the demonstration, all of them are going to just be one word.
So those are going to be the object names and then we're going to have values associated with it.
And that's where we're able to get that and make it unique.
So just as we did before, where we had the my list and we were using the square brackets and checking
to see if it exists and if it doesn't exist, then we know we need to create it.
And if it does exist, then we would know that we have a quantity in this object and we can just update
the quantity by updating the value there.
So adding to that quantity and because this is going to be the list that's contained within the cart
and this is where the object is going to sit, we don't have to relist or anything like that.
We're going to create functions in order to do the listing because we want all of this contained within
the one object.
And of course, this is object oriented programming.
So that's where we want to contain everything within the same place.
So if we don't have this particular element, we want to list that out.
And the way that we're going to list it out is will equal it to an object.
And then we need to just simply construct that object.
So each one of them is going to have a name.
And this is going to be getting that item information that's being passed in.
Also, there's going to be a price for it.
So this is whatever the cost is of that item and quantity by default, we're setting that to one.
And then you can also add in things like subtotal if you want.
So we had that last time as well.
So it's the subtotal.
And so this is going to be a method within here where what we're going to do is we're going to take
and return back whatever this price is, and multiply it by this quantity.
And so these values are going to be actually changing.
So just as we saw before with our other shopping cart, which wasn't object oriented programming, but
was based on objects that we're able to return back subtitles.
And before we continue, we can actually clean this up where we can remove out that cart because we
don't necessarily need that as we can utilize the object directly as we're adding in the item.
So we've got all of these values here.
Instead of cart me, let's add an anonymous function here so we don't have to posehn that object.
And we can here we can add in cart atter using that one that we just created.
And we've already got the temp name as well as the temp value at this point.
And we also need to have a way to list out from the cart.
So a crate and we can just call this one cart Lyster and then going back into our cart object, let's
add in that method or we've got one Lyster.
And this is going to be equal to a function.
And we'll output whatever is contained within my list, so ecocide, so refresh and try that.
So now whenever we click it, we can see that we can list out the contents of the cart.
We've got two in there.
Let's add in a test item here.
So if I add that one, we can see that now.
We've got within there, we've got three test items.
We've got two milks.
We can keep clicking the milks and listed out again.
So everything is adding in properly, just as we saw before, where we've got the quantity, we've got
the price.
We can calculate subtotal if we want.
We can get the test one as well.
So all of these objects are behaving the same way.
So there's a few final steps in order to complete our project where we need to output the information
visibly for the user.
So that's some additional methods that we're going to add in to the cart.
And then we'll also add in a button so the user can simply list that out whenever they want to.
So all of that is still yet to come in the upcoming lesson.
So go ahead and add in the ability to add to your cart object.