Hey, this is the second part to the shopping cart challenge and of course, third lesson in this part
of this exercise where we're going to add to the cart that we can select items so that the items are
visible.
So this is for all of those that don't like to use the console.
So for all of our friends that aren't programmers, if they want to check out this application as well
as we want to update and have the ability to add new items.
So update that and have the option to add in new items and then also get a total at the bottom.
They're going to do some calculations and we've got a total amount that is being offered for all the
items that the person has within their shopping cart.
So let's get to it.
So we're going to need one more function to in order to accomplish this, I'm going to call this function
relist.
And what this will do is this will go through the global cart object and it will output all of the content
visibly on the page.
And for this, we're going to need somewhere to drop that information.
So right on the route, we're going to create an area called output.
And this is document create elements of the same thing that we did before, where we're going to create
a div.
And then within this div, we're going to simply just take that div because right now it's going to
be blank and append it to the body.
So using the append child, append the div object that we just created, or it should be output.
So saving that.
So now we've got somewhere to dump the information that we're relisting and as we loop through and we
recreate the cart.
So every time that there's items added to the cart, that's when we call relist and that's when this
is going to run.
And then taking that output object that we just created, updating its inner HTML.
So just setting that to be empty, to be blank.
We can also console log out the cart so that every time we can see the cart.
So now when we click it, you can see that the cart is being output.
So the objective here is to output the information that's contained within the cart and then also make
all of the calculations as needed.
So let's go down a little bit more and let's make some more space here within the relist function.
And we also did want to get a total.
So I'm going to create a placeholder there and set total to zero so that as we loop through the items
within the object and this is how we can loop through the items within the object.
So this is just whatever the product is in cart.
And I'll show you as we loop through, we can console logout those products.
So every time I click it, you're going to see it's going to loop through all the items that are in
the cart.
So we've got all these products here.
So we've got a number of different products.
We've got milk, we've got apple all sitting within the cart.
And that's all being output here from the console.
And then, of course, we've got the cart being output as well.
So we can take that product that's being contained within the cart and we can use something with it.
So we've got milk, we've got apples there.
So we've got all of these names here.
And let's take outputs and update its inner HTML and we're just going to simply add to it because we
cleared it all out, we blanked it.
So let's add into it.
And as we loop through in order to get the cart information like this cart product.
And so now every time we output, you see we're getting access to the object.
So originally we were just getting the name and then this is the value.
So if we want to get the value, then we can reference it within this format where we're getting the
product.
So now we're ready to use that and we can output that into the HTML and we're almost there.
We're almost ready to go where we've got the cart product using the bracket notation and now we've got
access to the objects so we can get the name if we want.
So we've got milk, we've got apple and let's continue to build this out.
And so for this one, we're also going to have cart products.
There should be square bracket, product and price.
Then we're going to take this and multiply it.
And I'm going to add to this.
I don't have to have another line there.
So we're multiplying it by whatever the product quantity is.
And then we're also going to output a subtotal here.
So let's create that subtotal value.
There's just another variable that we're going to output.
And right now we don't have a subtotal.
So let's create that subtotal.
And we saw when we were constructing it, we can use Kaat so we can use the subtotal from the object
in order to return back that subtotal amount.
So that's a really easy one that we can get back there.
So let's see what happens.
And we're outputting.
So we still need to update and make a few other tweaks and adjustments, doing a new line break.
So we see we're getting all of the subtable is being subtotal there.
So whatever products.
So we've got the apple, how much it costs, how many there are so multiplied so that.
It's a multiplication and you can make it look better, of course, some multiplied by seven is seven
dollars, three times six is 18.
This is a really simple way to kind of get this cart going here.
And other thing we needed to add in and output is the total.
So we're to set a placeholder for the total.
So taking total and we're going to add to the total.
And because we've got that subtotal so easy with the object, we can add it in.
And then lastly, we just need to add in the total there at the end.
So after we've finished looping through, I'm going to add in whatever the total is and add that as
a new line that maybe we can be more specific or we can say total equals.
So now it's taking all of these values that we're getting from the subtotal and it's adding it in as
a total.
And maybe you want to make this darker as well.
So bolded.
So it stands out.
So however you want to format it, that's up to you.
But we've got all of the functionality that we set out.
And now because it's within this nice object format, if, for instance, all of a sudden we get a whole
bunch of new things that we're selling, like maybe we want to extend it, we want to have a book.
And this book is twelve bucks.
So we have the flexibility to add in new products all the time into our cart.
And the user can just go in.
And because the structure of the object, it's just taking this bit of information and it's creating
all of this functionality, all with JavaScript and have some fun with it, try it out and add in additional
products as well, additional items within your store and really get familiar with what you can do with
objects.