Welcome back.
Now it's time to work on extra features that we could add to our project.
And the the first feature that I'm going to add is the number of items that we have in the cart above
this cart, above this cart.
So whenever the user has something in the cart, we need to display the number of items.
So to do this, the first step is that we need to calculate the number of items.
So in the project, the first thing that I'm going to do is that I'm going to open up the cart and it's
called calculate cart.
And we can use this function to calculate also the number, the total cart we can calculate.
We can use this function to count, to calculate the number of items that we have.
So to do this, we can here, as you can see here, we have this quantity.
This quantity A is is the quantity of each single product.
And if we add the quantities of each single product up, if we add them up, we will get the total quantity.
So let's see you get your total quantity.
I'm going to say total underscore 180.
So initially it's going to be zero.
And then here's what I'm going to do, is that I'm going to say.
Total underscore quantity.
And then it's going to be equal to quantity.
Plus total quantity, plus quantity.
So we get the initial quantity and then we keep adding the quantities of each single product.
And in order to differentiate between the quantity and the price, I'm going to say you total price.
And a year, I'm going to say total.
Total rice.
And here, don't tell Rice.
So that's it to hear.
Also total rice.
And I'm going to create a new session.
Variable called total.
Quantity or quantity, let's say quantity.
Just quantity.
So the quantity here is going to be equal to the total quantity.
Granted.
Now, let me save.
And this is going to calculate the total quantity if a user adds something to the card, or even if
a user remove something from the cart, it's always going to recalculate the total price.
Any total quantity?
But this is the logic.
Now it's time to work on the design.
So we need to use the design in order to display the, the number of years.
So before I, before I what are the design?
Let's see this.
Let's continue with the logic.
So remember in the header and the header.
In the header.
We have this in the header.
We have this card icon now inside this card icon inside the I I'm going to say P, I'm going to say
a span.
Stan.
And then I'm going to display a number here just to show you where I'm going to be displaying.
Let's display any number.
Now, if I refresh.
The number will be displayed here.
Of course, I'm going to be working on the design later, but now we are going.
I'm just go.
I'm just working on the logic.
So to get the actual number of items from the cart, we do use BHP.
So here, what I'm going to do is that I'm going to add this in in a new line.
First, I'm going to add this in a new line.
And then I'm going to add also this in a new line.
And this in a new line.
And then let me show you what I'm going to do.
So what I'm going to do is that I'm going to using your app, I'm going to up in a tweet and I'm going
to say.
BHP.
And then I'm going to see if session.
A session.
Session quantity.
And.
And session.
Session.
Quantity.
Is not equal to zero.
Then I'm going to open a year actually bracket and then I'm going to here classically bracket.
And then I'm going to close it up.
And in between I'm going to explain the number.
By using this plan, I'm going to say Span.
And then in between I'm going to say BHP.
And then I'm going to say Echo.
SItIon and then.
Quantity and then semicolon.
Let me now save Lainey here, then over to the browser and refresh.
If I refresh, nothing will be displayed here.
As you can see, there's nothing here.
There's absolutely nothing here.
But if I add something to the card, let me add something to the card.
Maybe you click on by now.
Allow me click on Add to Cart.
So now if I add to Cart, as you can see here, it's going to display one.
One has been displayed.
If I increase the card, if I say here three and if I click on it, it it's going to say here three
immediately.
However, if you go to another page, it's not going to be displayed.
As you can see, it's not going to be displayed.
And the reason is because we need to initialize the session in the header here in the header.
I'm using the session, but I am not.
I didn't initialize the session at the top of the header.
We need to say B2B and then session starts and then semicolon and then click on file and then table.
Now if I refresh, the number of items in the cart will be displayed in every single page in our website.
It doesn't it doesn't matter which page, the the cart will or the number of items will be displayed
above this cart icon.