In this video, we'll see how to build this checkout page of the products that you add to the card.
And then this proceed to checkout component.
So it's out of the net.
So first thing we have to do is we have to create a check out or just that we did in the previous video.
I didn't start off hello, but now we'll be doing the main thing that we want to do.
So firstly, the this division name should be out the class, the class name should be checked out.
The incentive, as you can see over here.
We're having two divisions.
One is the left side, which contains the shopping basket and then the lights content, the amount to
be paid and the this checkbox and the checkout button.
Be divided into two divisions wanted to do.
And that is that I do.
Let me create a two fold.
Check out.
Left.
And then not check out, right?
OK, so no, inside left water, we should have what we need to have, if you can see over here we are
having our image with this you are in and then your shopping basket edge to edge to orange, one or
three, walk your preferred and then a product component.
OK, so now first will be implementing each and everything.
So first, we need image.
Image with glass animals.
Check out AD.
Admits advertisment.
So if I created it is asking for source.
So let me use this image as the source.
Yeah, so the computer doing the image, softer the image.
There is a catch to.
It's like there is a hedge to your shopping basket that you want.
So.
I'll be creating a new diff after the image, and then we'll be using this had to do with class name
of check out Typekit.
This will be your shopping basket.
So after the actual.
We need travel after the A.V need to have products, right, so it will be different products like.
We'll be having this broader and we can have the various products that we want, but now we'll do that.
The fact purpose we'll be using the same product for everything.
So let me create a component culture code product.
So once we create any component for the Typekit project, we have to create a file in that file will
be out product dodgers.
And then we have to create a serious fight.
Product, not CSF.
So once we create them, we have to just do the basic stuff that we do every time.
Or obnoxious?
So instead, this checkered product is basically the products that we use in the gas from potential,
I'll be copying the same thing over here, the same diff I copy.
Now.
So in instead of product will be having a product, the checkout product, plus there is no need to
have this do.
So product, we check our product and, sure enough, product.
Late last night and then checkered and sheared off product info like mescaline, you have to change
the order here in the home page, as you can see who will be having title and then no rating and then
the image.
But over here, we'll be having the different thing.
The first title and then the November on the left side will be having you made it on the right and will
be having this multiple things somehow to do that.
So it's going to have to change the article instead of like, we'll do it from scratch.
OK.
So, yeah, check product of the product will have our image, so image with glasses and check our product
image.
So the source will be I'll be using the cement source, as I said before.
This from this image, let me copy the United.
So after they made, I'll be creating a demand for product and for.
So inside the bar, and for her to be having the checkered product title, I'll be adding the price
and then the checkout product rating.
So, as you can see, will be having.
Check out.
Product.
Biden.
And then inside it, for example, let us have the the in itself.
There's not a day that will be this will be the time.
Everything is done, and then the check on the.
So there's I don't know what it is, we have to close the feedback, right, so I'll be closing the
beta.
So now we have to go after the checkered product title.
Now we'll be having price.
Price will happy that.
Science enterprise, like we can use that similar thing that we used before, that is.
And then the shirt off for Dynamic will advance to the.
According, but I wasn't of 20 dollars, so once we gave the price we can now that I think we can do
the rating.
So for the rating, I'll be getting out of there.
Check our product rating.
And said this, I can use the same array format, but as of now we are creating the not the heart cutting,
but vitamine using only this only simply starting.
So that's good to go.
And then once we are done with the rating thing, we can add a button called to remove the basket.
After this death.
Offer the product and fund everything it can have the name of the botanical remove from basket.
Check out a proletarian sector, check out our guest, I'll be calling the our product.
So now if you see the page.
We're getting it, we are getting a check, our product is not definitive or today.
Basically, we have to import the check or the product from foreign.
In Project.
Product from Jaguar Bumper.
So, yeah, if you refresh, you can see like we have got the image we have about the shopping basket
title and then a project.
But as you can see, we haven't gotten the exact thing that we want, like the styling thing.
So after all, to do the styling thing and now we will do the right thing, the right component.
So the check out right.
So basically what we should have.
So now we're going to be using a package from npm that is the total package so we can do this product.
So this will be the operative component that will create here and then set us up, and it will be using
that reactive currency currency format and be a package to basically let me create a biblical subtotal
total.
OK.
So inside this up, total, I need to pick since I created the combat aftercare to get the files over
here.
Let me clear them.
Suffered a lot cheers and then suffered a lot of success.
So long as we are done, we have to be aware we have to import the snippet.
Import react.
And then we have to import the style bench.
So instead, the Super Bowl thing will be using the currency format, the currency format, to confirm
that we get from the real currency format bracket, so let us first install the package.
Let me first NBA instant react.
Currency.
Format.
So they've it's getting strong.
So here we have to import the supplies, we are using it.
Box of total from.
Yes, but it's very clear that it.
We are not getting any of them.
So now we have to check whether the packages are packages, drugs so we can use those up inside the
software that we can import the currency for Mac.
So currency, fortunately, will be pretty described component that is present in the React currency
format package that we installed recently.
Finally, was that?
So long as we imported, we can use that.
So inside their new name will be.
Class name will be Subtotal.
And then you can use the currency format.
Karen's environment.
We can't close it.
So it will be self closing.
So the beauty of the currency format is it has some like predefined attributes that we can use.
So now I'll be typing a part of the code that you have to understand that it is not difficult to understand.
You can like this self-understanding part surrender text.
Value, I'll be using anonymous functional audio.
Those are pretended to be.
Like several items.
Strong.
Let me give the value of dollars zero like this is very hard putting it, so I'll be giving these kinds
of stuff and then we'll be creating a small thing that blast names up total dud gift.
So this is the check out the check box that we have seen recently when I opened the program and inside
this had to be having a book.
Input of five will be a checkbox.
And then.
This.
Our nerve contains a gift.
It's not a complete denial, basically close the.
That's.
So once we do this like of that that we can, this is done, this is one drop that we are sending that
text, the text that we want and send the currency format and offer that we want to specify the different
attributes like decimal scale.
This scale will be around two.
And then value will be.
Let us say zero.
So as I said, when we are defining that imagery in order to give any fallen out of semicolon think.
Display type will be text.
Thousands separated.
It's true so that we can see the thousands and thousands clearly.
Prefix will be the doughnut that we use just about, so these are the.
These are the problems that I am sending.
So what this will do is this will render the.
This text that we are sending over here with this by applying these attributes.
OK, so now I want to check what your values right now candidates are like is not defined.
Let me go like this.
Let me give up.
As of now, I will not give any prefix.
So, yeah.
As you can see, you can see the React currency format over here, but there is nothing.
As we won because of that, because there are no states that are giving out as of now.
So now let us do that starting up.
We have to.
We have to fight this or not to assess the checkered product or CSIS and also the.
Subtotal Doxy.
So we have to start these three things you need to do that.
So I've done the styling part, so I'm going to have to change what it is.
Previously, I have just given this last names product underscoring social change at the checkout product
and ask for info like this.
So yeah, so I'm going to check out the.
I gave the checkout autopsy a facade display flex because I want everything side by side inside to check
on the left component and the right component.
I want side by side and then margin bottom, the title and the checkout.
So now the checkout left Flex.
That actually is column because I want every product, one below the other instead of beside.
So that's why I've given the checkout product to underscore the display.
That action this column Netflix dedication has fallen.
So basically, this is like if you don't understand Flex, that action that reflects the simple logic
is all.
For example, if you are giving the Flex two, what if that means all the child?
You will be aligned in this format.
So as you can see inside the.
Check out our jazz.
The checkout.
Left has image and I give, so they imagine that there will be a line one after the other one below
the other.
So that is what I want to do and to correct.
I want one below than that.
But that is why I will be using that since I want all natural items to get one that I'll be using that
--.
Plus the fact that this column, if you don't want, if you want one beside the other, you have to
just avoid this.
Avoid writing this line.
That is what you have to basically remember.
So after you're done with your ordered cases, I'll be going to check out product or CSIS.
So this is similar that we we added in product cases like the Checkout Product Checkout correcting for
everything.
You can go to the court basically a simple object or object that content a door to not disturb the resolution
of the image.
Perfect, dim it.
And then if you photoshop CCIs again, deflect that action with then everything the background color.
So that is the checkbox for you to be having something they input will have a margin right of five pixels
and then the button stating everything.
So once you're done with very few, open your project, you're going to see like you are getting that
shopping basket are getting a product.
And then that idea, you are adding this.
It's pretty clean, right?
The header.
And if you click on this issue up, it will go to the whole benefit, click on the basket and it will
go in there.
And if you want to add multiple products, you can basically do this thing.
Go to check out the address and set up one checkout product.
If you want multiple checkout products, you can do that simply so you are getting one below the other.
Since the Flex, that action is color.
If you did not give the Flex Direction as column, there might be very clumsy, like one in which it
will mess up the React project.
So this thing you have to remember.
So with this, we have hardcoded them.
What do you say the checkout page?
One of the most important thing is how to add this add to basket and remove from basket functionality.
So when you click on add to basket, you have to see the one item in the cart.
If you have multiple, pick you up to three items.
If you are adding three items, then if you click on this, you want the items that were added to the
basket rather than the hard part of that product.
And also basically based on the product, we have to see the total amount and the total items.
So basically, we are done with the hot wording and the next thing is a very important and difficult
step to understand that state provided that I do that and are using the status and everything so that
we can see in the next reader how to implement that to cart and remove some basket functionality.