Excellent.
Once we have set up our products context which allow us to access products in the products page as well
as the homepage on the single product page.
Next one up.
We have the cart and first thing we're gonna do is set up our cart context and since it is not our first
rodeo.
We already set up the product context together and since there is gonna be quite a few repetition I'm
going to try to move a bit faster and we're going to head over back to our project then we're going
to look for the car J.S. within the context folder and of course we're going to start by importing deer
react.
We're going to go with import import react and we're looking from react and I'm gonna also close the
sidebar.
Then we're going to import the local cart because initially I would want to use some kind of dummy data
for my cart.
Why would I want to do that.
Well because it's just gonna be easier to set up our methods that way.
So we're going to import.
Then we have a local cart.
Again variables really up to you.
Because I'm importing it as a default.
Essentially I'm also exporting of course as a default.
So you can name this cart.
You can name just wherever you'd want and it is coming from the utilise folder.
So we're going to look in a utility folder and then the file that we're looking for.
He is local card.
So those are gonna be our to import.
Then we're going to set up our context.
So we're gonna go with cart context that is equal to react.
Then we have a create context create context.
Then again we get back our provider our consumer as well as the option of using used context hook.
And now they want to set up a function that again is just gonna use a cart context provider as a return.
And then we're gonna wrap.
Again our application in our component that we're creating right now.
So let's set up a function then let's call this part cart provider.
Now it is going to get a children right away.
So children from since we are going to be wrapping our whole application and then of course we would
want to return then we are returning the cart context then provider.
It has a value for the time being I'm just going to set this equal to Hello.
And then I'm also want to render the children of course.
Otherwise I'm not going to display my application and then eventually I would want to export to things
and export we're going to export cart context as well as cart provider notice are previously we use
the default one and then the name one.
So now in this case both of them are going to be named exports and that's why when we import them we're
also gonna have used to proper name.
Now I'm gonna head over back to my index Jess and then the same way how we work with product provider
we're gonna work with a card provider.
And once I'm in index jury us we're going to copy and paste our import and then instead of looking for
a cart or I'm sorry instead of looking for the product we're gonna be looking for carp provider that
is coming from the cart but of course since I didn't use the default one order so I need to use the
named import in this case again just to show the differences that we can have and then we have a product
provider.
And in this case sequence doesn't matter I just need to make sure that my card provider wraps around
the app which you could wrap.
Also not only the app but also the product provider and in my case I'm going to place it within the
product provider.
Just please remember the most important thing that is you need to make sure that you essentially wrap
your app in the car provider.
I'm gonna save that and then we're gonna head over back to country now we're going to set up some variables
some state variables and we're going to do that again by using the use state.
OK so what variables are we're gonna set up we're going to have cart de total.
So what would be the total value of our cart.
Money wise as well as how many items just to show you where we're gonna use that the card items we're
going to use within the link so organs play how many items we have in a cart as well as the total we're
going to display within the cartridge.
That's the reason why we're setting up three state variables one for card one for total and one for
card items and let's set it up again we're going to use you state so I know I'm gonna get back array
I'm gonna get the card as well as set card since that's going to be the function that controls it and
then we're gonna have a react then use state use state and then like I said before as my initial value
I'm going to pass the local card later on we're going to change this because we're gonna be looking
for the local storage again we're going to cover that later but for the time being let's just passing
the local card if you are interested what is within the local card can just head over there and you
can see that I'm exporting as a default the array and then I just have some dummy items that are going
to help me to set up my methods in the card.
Essentially I'm just going to have some data so that way we can delete we can increase amount decrease
amount as well as added to the card and let's head over again back to card yes because we're not done
let's copy and paste we have two more state values to go one is gonna be total and the method name or
the function name is gonna be total so we're going to be setting total as well as we're going to have
card items some write card items and then we're gonna have set card items set card items for both of
them the initial value is just gonna be zero.
So initially the total for the card is gonna be zero as well as the card items.
So the amount of items I haven't a card is gonna be zero and now I'd like to change my value prop to
in fact have it as a object somewhere said equal to an object and then within the object I would like
to set up three properties card total and card items and again since I know that the value is gonna
be equal to some kind of variable nine which is exactly the same as my property name I can just use
the E6 shorthand where I say cards total and card items.
And lastly just so we can check that everything works we're gonna head over to card page so within the
pages we're looking for card areas then we need to import card context and start using at least use
context.
So let's import again.
This is a named import.
So card context coming from our contacts folder.
So context then we look for the card and then remember in order to access it we need it to use the use
context.
And in this case what values I would like to get out.
Well I'm going to get a total as well as actual card.
So let's see what we're gonna have as a response.
So cost.
I know I'm gonna get back the object I know I would want to get card and total not is gonna be equal
to react use context and we just need to pass in our card context so card context.
And for the time being legit console log.
Let's just say that I would want to console log card as well as total.
Now we're gonna head over to a card page and then in our console we should have an object which we do
and then as far as card items we have three dummy items and then also have a total that is equal to
zero.
So now I can clearly see that our functionally work and now we can expand in the card context.
So add more functionality as well as work on displaying it properly within the cartridge.