Not bad.
We're done setting up car context as well as initial cart page.
Now let's work on the empty cart component.
If you're wondering well what is an empty cart component.
I'm going to head over back to finished project and if we're going to remove our only item we're going
to have the empty cart and we're going to have a suggestion to fill it.
Now the suggestion is of course a link we'll just navigate back to the product.
You're probably wondering well why do we have it as a component.
Because we're going to use the same component in our checkout.
So if the cart is going to be empty there's no point of showing the checkout form.
All right.
Now let's head over back to cart.
I'm first going to finish with my imports so I'm gonna type here.
Import.
Then we're gonna get our empty cart.
So the component we're gonna work on this video then this is coming from the cart folder.
So first we're gonna head over to components and we're going to look for the cart folder and then we're
looking for the empty cart.
Then also we're gonna get right away the cart item.
So let's copy and pasted because path is gonna be somewhat similar.
We closed the sidebar and in this case we're looking for the cart item not car item is gonna be each
and every product in our cart.
So we're gonna have a specific component for that.
And of course this is coming from a different file.
So this is gonna be a cart item cart item.
Yes.
Then we're also gonna need a link because in the bottom we're going to have a link.
So let me add a item and I'm going to show you.
Sorry formatting item to the cart in a bottom.
I'm either going to have a log in if the user has logged in or we're gonna have a link to our checkout
so essentially the same button but just depending if the user has logged in then we're gonna guide them
to a check out page.
If not then the link is gonna be to a log in page.
So that's the reason why we're importing.
Also a link.
So let's get a link from and you guessed it react.
Wrote her down and then eventually we're also gonna get a user context so I can just place here comma
or you know what let's import import user context user context and we're just gonna have it as a comment.
So from and then we're going to look for context and that is gonna be coming from the user but currently
of course we haven't set that up so that's the reason why I'm coming out so temporary I'm just going
to set a user to false so temporary I'm just gonna use some kind of variable here and later on in fact
we're gonna use our actual user.
So just for the time being above the react use context from the court context I'm going to say let user
and I'm just gonna set this false and if you would want to consider it true in that way you're gonna
see depending on what is the value for the user.
While that link.
We're gonna be displaying.
And like I said we're gonna start by empty cart and the way we're going to do that is we're gonna head
on down and we can just get her off the console logs for now.
We already saw that we're getting the cart as well as the total and now let's set up a if statement
and the condition is gonna be the following.
I'm gonna say if car length length is equal to zero then I would like to display the empty cart so return.
And we're gonna look for empty cart.
Now of course our cart is not empty.
That's the reason why we're still gonna have the hello from the cartridge.
So if we would want to make our cart empty we can just head over back to our cart context get rid of
the local cart and set it as an empty.
All right.
And then of course I have a hello from empty cart and I'll gonna start working on that component.
Let's head over to all the components.
Let's look for the cart holder and then we're gonna start working in the empty cart and it's going to
be someone simple where again we're gonna get a link from reactor number down.
Let me close the sidebar so link from react rotor down.
And then as my return it's not gonna be a simple hiring one.
Instead it's gonna be a section we're gonna add a class name and the class name is gonna be empty cart
and also a section and then within the section let's have a drink too with a text of empty cart readouts
and.
Why don't we set up our link.
So we're gonna have the link component link come on and on that link component is going to navigate
to a product.
Now of course you can guide your user wherever you would like but I think product is just gonna make
more sense if you would want to their users to add more items in the cart and let's add some classes
let's say BD n beat and primary and then let's just type fill it not fill out our card and the moment
we separate.
This is what we should see within our cart page.
Now I'm gonna head over back to my context the cart one once we see that of course our empty cart is
working then we can just press commands Z and go back to the local cart and that's how we can set up
a empty cart component in our cart page.