Welcome back.
Now, what I'm going to do is that I'm going to work on the total of products that we have, the total
amount and the total amount of money that the user or the customer will pay.
But before I do so, let me show you how we can add more items to the card.
So here in the card attached email, you can copy this item.
As you can see, the item starts from the SDR.
From this the AR all the way to the end of this.
The AR.
You can close this tr.
This one and actually lead me up in it because I need to show you the complete guide.
So this is the guide.
If you copy this and then if you pasted the main law here one and then two times and then if you had
been over to the browser and refresh, you'll find that now we have free element of free products in
the cart.
Now let's work on the total amount.
So to what?
The total amount?
I'm going to eat another table below this table.
Below this table I'm going to use here, create a new table for the total.
I'm going to sit here table.
And this table this table is going to contain is going to be surrounded first.
So I'm going to create first.
And if I'm going to take you there and then inside that there when you remove this table.
Illini inside of that table.
So here, inside this, I'm going to be in the table here.
I'm going to say table and I'm going to first give this day of a class.
So I'm going to say, Hey, class.
Now, then I'm going to say, can't it?
This is going to be the total.
Total.
And then inside the table, I'm going to display two things.
I'm going to first display TR And for this TR I'm going to first display the the subtotal I'm going
to see and then subtotal.
So total and then below this total, we need to display the amount of money.
So I'm going to say t r, t d and then the total.
So he had a dollar sign.
And then.
Let me get this dollar sign.
And then here, let's type any number you want.
So here, let me say one, five, five and then we need to display another.
TR So I'm going to say here tr emphasize that the r I'm going to play d d with the total here, the
total amount.
And then here's the complete total.
Let me save.
Lenny had been over to the browser.
And as you can see, we have here the total, here the total and the sum total of it.
But we need to work on CCIS, so I'm going to turn over to CCIS.
And then he says, we need to work on the class that we just created, which was the cart total.
Carte.
Toto.
And then I'm going to give this car turtle a display of legs.
And justify content leaks and.
So why am I doing this?
The reason is because they want to display it on the right side.
Let me refresh and show you how it's going to look like so it's not on the right side yet.
So the problem is that let me make sure that they have given a speaker request class to tell them here,
because what they need to do in order to be displayed on the right side is that I need to fix the table
itself.
So I'm going to say here, cart, total event table.
And for this table, what I'm going to do is that I'm going to change the width and the maximum width.
So the width is going to be 100%.
There's no problem with this.
However.
The maximum width now.
The maximum width.
Then he more of this.
So the maximum with is going to be max with the maximum with is going to be, let's say 500 packs.
And also let's give it a border.
A border border stop.
I'm going to say border, top or the top?
Three peaks.
So let.
Orange.
Let me now show you what this is going to do to the table.
So the table now, as you can see, will be displayed like this.
It's not going to be thick.
It's not going to take the complete screen with, however, we need to shift this table to the right
side and to shift this table to the right side, we need to say key and then last child.
Last child and then next.
Text a line right next to the line.
This is going to display split on the right side.
Also the each.
Last.
Child.
Text.
A line, right?
Let me see.
Even let me refresh.
And as you can see now, the the the price will be displayed on the right side.
However, we still need to take this take this table and display on the right side.
To do this, we need to fix this.
Instead of saying justify sale, we need to say here, justify content, justify content, flex in the
justified content.
Flex end will take was able to the right site.
Let me show you that now.
So as you can see now, the table is has been taken and is now being displayed on the right side.
This is what I wanted to display.
And you can see it's going to display this up total.
And you can you can only display the total if you wish to display only the total.
So this is how it works.
Finally, I'm going to display a let me check first.
So the responsiveness or the responsiveness is I think it's great.
The only thing that remains is displaying the button at the take the checkout button.
So to display the check out the button, we can display it below the table so we can hear say button.
It's displayed in the first there and then button checkout.
I'm going to first give it class and then I'm going to say N and let's say check out.
In.
And then when I say, here, check out.
So the baton is being displayed on the right side.
So we need to shift it.
So here.
Here.
I'm going to say real check out.
Bottom.
And then display flex.
And just FYI content.
Felix and.
Also, I'm going to change the background color on that same background.
So the vanguard color is going to be the orange color and the color is going to be the white color.
However, we need to add we need to add the display flex content to the directive itself not to think
about it because the button is inside.
A And so here I'm going to say here I'm going to we have two options.
We can we can create another course or we can copy this complete content and paste it below the table.
But let's keep it.
Let's give you something.
I think.
You think your class is better.
I'm it in your class.
I'm going I'm going to say check out.
Shake.
Out container.
And then here I'm going to say.
Check out.
Container.
So for the check out container, I'm going to say this blank flex.
And just FYI content.
Let's end.
And as you can see, the button will be displayed on the right side.
So now it looks amazing.
And now we have this check out.
So we have this check out button, which looks amazing.