1
00:00:00,320 --> 00:00:08,670
And once we've got our local storage in place now, we're going to return to our cart content and start

2
00:00:08,670 --> 00:00:09,920
setting up our return.

3
00:00:09,930 --> 00:00:13,590
Now, close all the files and I'm going to navigate through the cart.

4
00:00:13,590 --> 00:00:19,860
Arms are not card columns, card content, even the card columns is going to be one of the components

5
00:00:19,860 --> 00:00:28,680
of that we will display in the card content component and we're not going to look for any props in here.

6
00:00:29,010 --> 00:00:35,070
But I would want to invoke the use card context and I would want to get the card.

7
00:00:36,020 --> 00:00:42,890
As well as clear court function, and that is coming from a used car context as far as the return,

8
00:00:42,890 --> 00:00:50,120
we're going to go with a rapper and then let me remove the sticker and I'll add some global classes

9
00:00:50,120 --> 00:00:50,760
here as well.

10
00:00:50,930 --> 00:00:57,740
So class name section and then section hyphen center for my spelling.

11
00:00:58,160 --> 00:01:04,250
And then instead of the wrapper, let's set up our card columns component, which of course is not going

12
00:01:04,250 --> 00:01:06,230
to have any meaningful return.

13
00:01:06,650 --> 00:01:09,740
But for the time being, we should see the card columns.

14
00:01:10,100 --> 00:01:11,450
Then there's going to be a card.

15
00:01:11,480 --> 00:01:18,960
And don't worry, we'll work on the actual card item in the next 30, I believe, or maybe in two areas.

16
00:01:19,080 --> 00:01:24,980
Next one, I guess we'll set up the card columns, but I would still want to iterate over my card or

17
00:01:24,980 --> 00:01:26,300
my two items, I believe.

18
00:01:26,810 --> 00:01:35,150
And then for every item that I have in a card, I would want to return a card item and the key will

19
00:01:35,150 --> 00:01:36,850
be equal to my remedy.

20
00:01:37,280 --> 00:01:40,390
And then of course, I'll pass in my item again.

21
00:01:40,400 --> 00:01:47,980
At the moment I should just see the text of crime and crime because I have two items in the card.

22
00:01:48,530 --> 00:01:53,180
Then after that I'm going to set up my horizontal line.

23
00:01:54,560 --> 00:02:00,230
And then we're going to go with the devil, the class of link container, and inside of it we're going

24
00:02:00,230 --> 00:02:03,780
to set up your lungs and eventually there's going to be also car totals.

25
00:02:04,250 --> 00:02:10,630
So what we're setting up right now is, of course, the cut columns, then the atoms eventually.

26
00:02:10,930 --> 00:02:13,070
And now we're working on these two buttons.

27
00:02:13,670 --> 00:02:14,840
I'm setting up these two buttons.

28
00:02:14,840 --> 00:02:19,480
And eventually there's also going to be a card total component.

29
00:02:19,760 --> 00:02:24,160
So within the container, I'm going to go with a link back to the product.

30
00:02:24,170 --> 00:02:31,460
So that's why we go with React router component link and then we're navigating back to the product out

31
00:02:31,460 --> 00:02:37,250
of class name here of Lync hyphen Bita and Unman instead of the link.

32
00:02:37,250 --> 00:02:40,250
Let's just say continue on shopping.

33
00:02:42,170 --> 00:02:43,280
OK, awesome.

34
00:02:43,430 --> 00:02:50,390
We should see the link and continue shopping and then the second thing will be a button to clear the

35
00:02:50,390 --> 00:02:50,720
card.

36
00:02:50,720 --> 00:02:57,630
So Button wants and type here I guess, of button and let's add a class name.

37
00:02:57,650 --> 00:03:01,850
We're going to go link hyphen between and Clear Hyphen PDN.

38
00:03:02,390 --> 00:03:05,660
And once we click, of course, we'll invoke clear card.

39
00:03:06,140 --> 00:03:10,310
There's nothing in the function, but eventually of course we'll set up the functionality so we might

40
00:03:10,310 --> 00:03:12,830
as well set up the unclick right now.

41
00:03:12,830 --> 00:03:19,690
So clear cut once we click the button and I'll set clear shopping cart.

42
00:03:20,180 --> 00:03:20,810
Let's save.

43
00:03:21,290 --> 00:03:25,670
Should see both buttons right now and then right outside of this there.

44
00:03:25,670 --> 00:03:29,960
But still with the wrapper I would want to showcase my card totals.

45
00:03:30,470 --> 00:03:38,420
So that's going to be the component that was set up last that should it for the card content component

46
00:03:38,750 --> 00:03:45,770
and then one by one of course, will deal with the components that we render in our return.