Excellent.
And with our empty cart out of the way.
Let's focus on the rest of the items in our cart page.
So there is gonna be a list of cart items.
So we're gonna loop over our cart variable and then we're also gonna have the total as well as like
I mentioned before our links with our to a log and page or to a check out page.
So where we have a heading one on from cart page we can just get out of it and we can set it up as a
section.
Now we're gonna have to ride away some classes to our section when say class name and we're gonna have
of cart items car items and then also we're going to have a section within a section we're going to
start with a heading to where we're gonna have your cart.
Then we're gonna loop over our cart.
So I'm gonna set up right away a cart map.
So we're going to use map method because of course we're getting back the array then we have the callback
function each and every item we're going to access each and every item and for each and every item we're
going to return a cart item component that we haven't set up.
Again we're just going to have I believe three heading ones correct because our local hard had three
items then we still need to have a key.
So I'm going to have a key of item D because each and every item does have the 80 and then the same
how we did with the product.
I'm just going to spread out each and every cart item so I'm gonna pass it in the cart item and then
later I can decide which properties I would want.
And then once we have looped over our cart then we're gonna have the total.
So we're gonna go with total and total is gonna be dollar sign and then we're going to access our total
variable.
So total variable not save it.
Like I said we have our heading ones.
So we need to still work on the cart.
And then of course our total currently is zero.
And now we're going to check our user and depending on the user we're gonna display the link because
like I said eventually this is going to be our authentication where we're gonna check whether user has
logged in if the user has logged in then we're going to display one link so link is going to navigate
to a log in page 1 I'm sorry to check our page I guess if you have logged in and if not then back to
a log in page.
So right after the hearing one I'm going to check whether the user exists and if the user exists and
if the user if let's say is true then I'm going to display link to a check out page.
If not then the link is going to be to a log in page.
You know what I think it's gonna be faster for me to type it this way.
So first I'm going to set up my link to then we're gonna go to checkout checkout page and then of course
we're gonna add some classes so class name is going to be n BD and primary and Beaty and block and then
Let's type in checkout checkout page let's save it.
We'll see whether we're gonna have a link let's try to navigate okay our link works well now we're gonna
head over back and copy paste it we're just gonna change it around where the link is going to navigate
to a logon page so let's type log in as well as the text is gonna be log in so let's type a log in let's
say both of them and now I'm gonna set up my ternary operator I'm going to say user if the user does
exist then I'm going to show the checkout.
So let me cut this one out and then just copy and paste it and then however if the user doesn't exist
so I need to add after a link Oh no that's not what I want I didn't want to now get right after link
I'm gonna have a colon so if the user doesn't exist then of course I would like to display the link
that navigates to a checkout page so let me cut this out and then I can navigate back to a link and
let's save it.
And now of course we're going to have a log in just because our user is false if I'm wrong said my user
to true then of course I'm going to have a checkout now I already tried navigating to a checkout page
so let me set this back to FALSE AND LET'S JUST TRY whether we can navigate correctly to a log in page
and we do so now we can start working on the card item so that way we can display a nice looking item
instead of just one heading one.