Let's work on this page that shows us the cart content.
It's a new page. So we need a new template of course.
For this, I'll go to my views
and there we have the customer cart area,
where I wanna add a cart EJS file
which is the page or which should be the page for showing us
all the cart content.
Now, as a base, I will again use the all products,
EJS content and paste that in there, but then of course,
I'll change the title
to your
cart here
And I won't include any products, CSS file.
Instead,
I actually will already add a new import to cart CSS,
which is a CSS file that we have yet to add,
but we will add it soon with cart specific styles.
I of course want to have my header, my main navigation,
but then here in the main area,
I'll say your cart
and below that,
I then want to output all these cart items.
So for that, I'll add an unordered list
with an idea of cart items
which we can use for styling later.
and below that, I then actually also want to show
aggregation data for the cart,
specifically the cart total
and for styling purposes,
I'll add a div here with an idea of let's say, cart total,
And in that div here,
I want to have a paragraph that says total,
dollar sign,
and then the total amount which we have to add dynamically.
And next to that,
I then also want to have a button
that allows me to buy these products.
For the moment I'll add a button
with a class of BTN that says buy products
we'll make the button to work and refine it later.
Now in the unordered list, of course,
I want to have all these cart items and here it's important
to keep in mind that a cart item is not a product,
but a group of products where one and the same product,
can be added multiple times.
Then it would only show up once here in that list.
And we would simply have the quantity of that product,
somewhere in that item data, which we're outputting here.
So here we want to output list items,
And specifically we want to output cart item data here.
Now let's say as before a cart item is an article,
not because it has to be,
but because you could treat it as a standalone unit,
a cart item could work on its own,
but having the article here is totally optional,
I will add it though,
and I will give this a class of cart item
for styling purposes
And then in there, in this card item article,
I want to have a div,
with a class of card item dash info,
which is only there for styling purposes
because I want to position two items next to each other.
And these two items would be the title of that card item
wrapped in age two element.
So that should be the title of the product.
And next to that, thanks to that, Div and Flexbox
we'll make it work.
I want to have a paragraph where I output the total price
for this product. So total price for this product,
and then in parentheses thereafter, the price for a single
product, because again our item can be the same product,
added multiple times.
That's why we have a total price,
and a per unit price, so to say.
so that's the first piece of information
that I want to have in there.
Next below that, below that div in the article,
I want to have another div,
with a class of cart item management.
And in there, I like to have an input of type number,
which shows me the number of cart items.
And it's an input because you want to be able to change it.
So this input is required and we'll set the value with EJS
soon, and next to that input,
I want to have a button which allows me to update this cart
and I'll give this button a class of BTN and BTN-alt,
so that when we change the number in this input and we then
click update, we update this cart item.
So that's the general structure for a cart item.
And of course that should be repeated
for every cart item we have in the cart.
As before to keep this template lean,
I'll actually cut this article and instead,
add a brand new include, in this case next to cart,
I'll add an includes folder,
with the cart dash item EJS file inside of it,
which contains this article.
And then in cart EJS, instead of this list item,
I do want to include this cart item file
in the includes folder, that sits next to the cart EJS file.
But again, here,
we want to loop through cart items and for dispute,
of course, need the cart data.
Now, thankfully, thanks to our custom cart middleware,
the cart is available on the locals property.
So we actually don't need to fetch it from a database
in some controller action, but instead in cart EJS,
we can start right away by adding a for of loop,
where we go through all the cart items
of locals dot card dot items,
accessing that cart that we store in this locals property,
in our custom middleware.
And then of course, here, we have to close this parenthesis.
And with that, we've got access to the cart item.
I now want to pass that to the cart item code snippet.
And there let's say we expect to get an item
and set this equal to the cart item
that we have here in this loop.
So that's how we pass that data into our item property
in that snippet.
And in that snippet, we can then use that for the title.
For example,
I want the product title that belongs to this cart item.
So in here I can access item.
Since I used item as a key here,
Dot product,
accessing the nested product
that's stored for every cart item, dot title.
Now for the total price for a given product,
we access item, dot total price,
And then for the per unit price,
we can access item dot product dot price,
which is the price of a single unit of that product.
We also might want to put this into a little span,
which we can also use for styling later,
to make this Italic ,or anything like this.
I'll give this span a class of cart product price,
like this.
Now I also want to output the current,
number of products for this item,
And I do this here in the input where I said
value equal to item, dot total quantity.
And of course the user will be able to change this
and then click update,
But that's the idea behind having this input.
So with that, we have the cart EJS file,
that outputs the cart items
for the total down here in cart EJS,
we can access local store cart dot total price,
which is a property that exists on the cart.
And that should be it actually.
With that,
We can now make sure that we can load cart EJS.
And for this,
we need to go to the cart controller,
and add a brand new action,
maybe here at the very top, which is named "get Cart".
And in there we got request and response,
The idea is to simply render,
this cart template, we just worked on,
which we find in the customer folder,
there in the cart folder and there it was the cart EJS file
And we don't need to pass any data to that render method
because the only data we use in cart EJS
is accessed on that locals key
which is a available anyways, in all the views.
That's the idea behind res locals.
So now we just need to go to the cart controller
and make, get cart available outside of this file,
by adding it here, to the export object.
And then we can go to the routes that we have,
to the cart routes and register a brand new route here.
Let's say router get slash
and keep in mind,
this will be slash card slash nothing because we only
reached a card routes for requests that start with slash
cart. Thanks to our app JS configuration.
And here I then point at card controller, get cart.
Now, with that, If we reload and click on cart here
we see this and this doesn't look too bad,
at least on first sight.
I actually see a couple of problems here.
And for example,
the quantity is missing here in the input field.
Of course the styling is also not final.
We'll have to work on that,
but also a big problem is that the total here doesn't match
the total per product. Even though we only have one product,
these values should be equal.
It should be the single unit price times the quantity.
And I also should have dollar signs here.
So a couple of things we need to improve.
Let's go there Step-by-step.
and let's start with cart item EJS,
by adding a dollar sign,
in front of the product total price, and the per unit price.
That's a simple quick win,
And that already looks better.
Now let's evaluate why this data is wrong here,
probably because it was stored in the cart
in an incorrect way.
For this I will actually go to the application tab here
and I just noticed I'm also getting a 4 0 1 error somehow
we'll have to look into that as well,
but I'll go into the application tab here and under cookies.
I will actually clear that cookie, which I have here,
which is my session cookie,
which therefore resets my session for this user.
Now, if I reload, I have nothing in the cart
and now let's try this again.
If I start adding this item to the cart,
the number updates correctly,
but this still is off.
And now we also see another problem here.
This is a JavaScript rounding thing,
nothing to be worried about,
We can fix this easily as I will show you in a second
but why is it never adding more than two items
as it seems here for calculating the product price
and why is it not showing the quantity here?
And why do we have this error,
this 4 0 1 error here.
Now let's start with the quantity.
The reason for that is that it's not item dot total quantity
but just item dot quantity.
If we have a look at the cart model
in add item, I'm updating card item dot quantity.
So if I save that and reload, we see the quantity,
which is wrong, now regarding that rounding error here,
which JavaScript sometimes shows for some numbers,
we can fix this by going to cart EJS and there on those
numbers where you might be getting those errors,
you can call a built in method,
which exists on all numbers in JavaScript,
And that's the to fixed number
to which you can pass an argument of two,
which will simply fix that number to two decimal places
so that it always shows two decimal places,
which is a great idea for prices anyways
because, that also ensures that we show two zero's,
for even prices.
And that we simply always show prices in the same format.
I also want to use this in a cart item
on my item, total price, and then the product price here.
If we now reload, that looks better
but now still, why is the quantity
and price for the product group incorrect,
even though it seems to be correct for the overall cart?
That has to be an error somewhere in our model,
I would assume.
And yes, it is.
Here in my cart model, I make a mistake here.
When I increase the quantity and price for an item,
that is already part of the cart,
I always increase the quantity and price of my cart item.
Now I initialize that here and I initialize it to one
and the product price,
that's wrong.
Instead I should increase the existing quantity
of that existing item. So I should use item dot quantity,
plus one here
as a formula for setting my cart item quantity.
And here it should be item dot total price,
using the currently stored total price and quantity instead.
with that, we can't fix the existing error,
but of course I can open the div tools again,
to go to the application and clear that cookie,
so that I can reload here and then actually,
add this product again.
And now we should have a working set up here.
Yeah. Now we have the correct quantity.
If I add another product here,
it's added as a brand new row here
because it's a brand new item. So that is working.
Last but not least though,
Why am I getting this 4 0 1 error here?
Where is this coming from?
looks like somewhere, I'm sending some requests
that's being blocked.
And I would assume this is simply
me requesting,
the cart CSS file here, which doesn't exist yet.
And therefore, actually
that error is not being handled correctly.
And hence, I'm seeing this strange, incorrect error message.
If I add a cart CSS file here,
because we'll need one soon anyways,
and I now reload this page, this 4 0 1 message has gone.
So that's not working. And therefore now,
since we already added the cart CSS file,
Let's now, make sure these items are properly styled,
before we then add the logic for updating the cart items.