Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,660 --> 00:00:04,800
So for outputting cart items,
2
00:00:04,800 --> 00:00:08,090
we of course need to go to the cart component
3
00:00:08,090 --> 00:00:11,280
and there we again need to use context now.
4
00:00:11,280 --> 00:00:16,070
So we should import, useContext from React
5
00:00:17,140 --> 00:00:20,330
and of course imports the context object
6
00:00:20,330 --> 00:00:25,100
Cart Context from going up to the store folder
7
00:00:25,100 --> 00:00:27,253
and then cart dash context,
8
00:00:28,220 --> 00:00:29,460
and then in the cart components
9
00:00:29,460 --> 00:00:33,160
we now call useContext and pass cart Context to it
10
00:00:33,160 --> 00:00:35,533
to get access to that cart Context.
11
00:00:37,650 --> 00:00:42,650
Now here, we no longer want this dummy array of cart items,
12
00:00:43,120 --> 00:00:47,460
instead now here we can access cart Ctx dot items
13
00:00:47,460 --> 00:00:50,343
to transform these items to items in the cart.
14
00:00:51,520 --> 00:00:54,730
And before we continue working on the cart logic
15
00:00:54,730 --> 00:00:58,490
or anything like that, let's actually work
16
00:00:58,490 --> 00:01:01,620
on these cart items that they have to correct look
17
00:01:01,620 --> 00:01:03,850
and let's always make sure we outputs
18
00:01:03,850 --> 00:01:05,910
the total amount and so on.
19
00:01:05,910 --> 00:01:08,633
And I'll start with the total amount actually.
20
00:01:09,560 --> 00:01:13,150
For dad here, I'll add a total amount constant
21
00:01:14,158 --> 00:01:18,817
and then I'll simply access cart Ctx dot total amount,
22
00:01:19,720 --> 00:01:22,580
however I'll call to fixed two here
23
00:01:22,580 --> 00:01:25,930
to make sure that we always have two decimal places
24
00:01:25,930 --> 00:01:29,270
and I'll put this into a template literal
25
00:01:29,270 --> 00:01:33,440
to output a dollar sign in front of this now dynamically
26
00:01:33,440 --> 00:01:37,163
injected and derived Java Script expression.
27
00:01:38,280 --> 00:01:42,480
And that's not a total amount which should be output here
28
00:01:42,480 --> 00:01:46,793
instead of just hard coded value like this.
29
00:01:47,640 --> 00:01:51,370
So that's now the real total amount for this cart.
30
00:01:51,370 --> 00:01:53,030
I know also wanna make sure
31
00:01:53,030 --> 00:01:56,750
that this order button is only showing up
32
00:01:56,750 --> 00:01:59,340
if we have items in the cart.
33
00:01:59,340 --> 00:02:01,800
So for dad, we can add a number of constants here
34
00:02:01,800 --> 00:02:06,450
right below total amount maybe which will name has items
35
00:02:06,450 --> 00:02:07,630
and here I'll simply check
36
00:02:07,630 --> 00:02:12,240
if cart context items has a length greater than zero.
37
00:02:12,240 --> 00:02:14,010
So if there are items in the cart
38
00:02:15,410 --> 00:02:18,090
and now we can use has items down there to check
39
00:02:18,090 --> 00:02:21,310
if has items is true and only rendered a button
40
00:02:21,310 --> 00:02:22,393
if that's the case.
41
00:02:24,130 --> 00:02:27,990
And with that already, if I reload
42
00:02:27,990 --> 00:02:30,110
you see if I opened the cart with no items
43
00:02:30,110 --> 00:02:33,830
we have no order button and a total amount of zero.
44
00:02:33,830 --> 00:02:38,530
But if you start adding a couple of items, we see them here
45
00:02:38,530 --> 00:02:40,020
we see the update a total amount
46
00:02:40,020 --> 00:02:41,520
and we've got an order button.
47
00:02:42,370 --> 00:02:43,330
Now at the moment
48
00:02:43,330 --> 00:02:45,900
items are still added incorrectly to the cart.
49
00:02:45,900 --> 00:02:47,620
We're going to work on that soon.
50
00:02:47,620 --> 00:02:49,400
But before we do that, I wanna work
51
00:02:49,400 --> 00:02:52,193
on how these cart items are being displayed.
52
00:02:53,850 --> 00:02:56,590
Now for dad, I prepared a component
53
00:02:56,590 --> 00:03:01,150
for you attached to find a cart item file, which contains
54
00:03:01,150 --> 00:03:06,150
both a cart item JS file and a cart item module CSS file.
55
00:03:06,730 --> 00:03:10,870
Simply copy both files into that cart folder.
56
00:03:10,870 --> 00:03:12,650
That's simply a cart item component,
57
00:03:12,650 --> 00:03:14,460
which is not too fancy
58
00:03:14,460 --> 00:03:15,850
which is why I'm just providing
59
00:03:15,850 --> 00:03:18,200
the finished component to you.
60
00:03:18,200 --> 00:03:22,410
In the end, this will just output price, the amount
61
00:03:22,410 --> 00:03:25,050
and then buttons for adding or removing more
62
00:03:25,050 --> 00:03:29,440
of debt cart item and in cart JS
63
00:03:29,440 --> 00:03:31,640
we can now use that cart item.
64
00:03:31,640 --> 00:03:36,370
So here you can simply import cart item
65
00:03:36,370 --> 00:03:41,370
from that just added cart item file, and then render instead
66
00:03:43,990 --> 00:03:47,060
of that list item here, a cart item,
67
00:03:47,060 --> 00:03:52,060
whoops cart item like this, and two cart item.
68
00:03:53,710 --> 00:03:57,010
We now need to pass a key, of course since it's a list
69
00:03:57,010 --> 00:03:59,793
and that can be, or should be item dot ID.
70
00:04:01,150 --> 00:04:03,850
We also wanna display the name.
71
00:04:03,850 --> 00:04:06,760
So that's item dot name.
72
00:04:06,760 --> 00:04:10,550
We wanna display the amount, which is item dot amount
73
00:04:10,550 --> 00:04:14,880
and pass the price, which is item dot price.
74
00:04:14,880 --> 00:04:17,450
And then also pass functions
75
00:04:17,450 --> 00:04:20,790
for adding or removing items from the cart.
76
00:04:20,790 --> 00:04:23,350
So I will add these functions here now
77
00:04:23,350 --> 00:04:28,170
and add my cart item, remove handler
78
00:04:30,580 --> 00:04:33,670
where I get to the idea of the to be removed item
79
00:04:33,670 --> 00:04:38,670
and my cart item add handler where I get the item itself.
80
00:04:39,110 --> 00:04:42,313
And we'll add the logic to dysfunctions in a second.
81
00:04:43,420 --> 00:04:46,800
And now here on the cart item, which we output in the list
82
00:04:46,800 --> 00:04:50,100
we should add up on remove prop coz that's
83
00:04:50,100 --> 00:04:53,363
the name I'm expecting in that provided component.
84
00:04:55,100 --> 00:04:58,650
And two on remove, we pass a pointer to cart item
85
00:04:58,650 --> 00:05:03,650
remove handler, and we add on add prop and number
86
00:05:04,950 --> 00:05:08,380
prop I'm using indebt provided cart item component
87
00:05:08,380 --> 00:05:11,523
where we point at the cart item, add handler.
88
00:05:13,040 --> 00:05:16,730
Now on both these functions
89
00:05:16,730 --> 00:05:20,890
you should call bind and bind no item ID.
90
00:05:20,890 --> 00:05:23,900
This ensures that the idea of the to be added
91
00:05:23,900 --> 00:05:28,640
or removed item is passed here to remove handler
92
00:05:28,640 --> 00:05:30,870
and on end you should also call bind
93
00:05:30,870 --> 00:05:33,633
and bind null and pass the overall item.
94
00:05:34,610 --> 00:05:37,130
You'll learn that bind pre-configure
95
00:05:37,130 --> 00:05:40,000
as a function for future execution
96
00:05:40,000 --> 00:05:43,660
and basically allows you to pre-configure the argument
97
00:05:43,660 --> 00:05:47,143
that function will receive when it's being executed.
98
00:05:48,070 --> 00:05:49,870
And that's something we need here to ensure
99
00:05:49,870 --> 00:05:53,120
that both these functions do receive the ID
100
00:05:53,120 --> 00:05:54,913
or the item respectively.
101
00:05:56,930 --> 00:05:59,950
Now with that, your cart should look something like this
102
00:06:01,420 --> 00:06:04,130
here I'm assumed in which is why it's a bit cut off.
103
00:06:04,130 --> 00:06:07,180
It should look something like this now to make sure
104
00:06:07,180 --> 00:06:08,440
that this has never cut off
105
00:06:08,440 --> 00:06:12,550
I'll all the quickly go to the cart module CSS file.
106
00:06:12,550 --> 00:06:15,938
And here I'll go to cart items
107
00:06:15,938 --> 00:06:20,938
and give us a max height of let's say 20 rem
108
00:06:21,360 --> 00:06:23,893
and then add overflow scroll.
109
00:06:25,300 --> 00:06:28,790
By doing this, I make sure that this can't get too big
110
00:06:28,790 --> 00:06:30,900
but that instead it becomes scrollable
111
00:06:32,080 --> 00:06:34,720
but your cart should now look like this.
112
00:06:34,720 --> 00:06:37,610
And of course, the problem we have here is not just
113
00:06:37,610 --> 00:06:40,530
that these buttons won't work, but that, for example, here
114
00:06:40,530 --> 00:06:43,120
we also have sushi free times
115
00:06:43,120 --> 00:06:46,083
which is absolutely not what we want here.
116
00:06:47,860 --> 00:06:49,840
I also want to go to cart item
117
00:06:49,840 --> 00:06:54,150
and quickly make sure that on the price here for props price
118
00:06:54,150 --> 00:06:58,170
in the cart item component, I also call to fixed to,
119
00:06:58,170 --> 00:07:01,390
to force this to all these have two decimal places
120
00:07:01,390 --> 00:07:03,390
for example, here for addition it's now.
121
00:07:04,332 --> 00:07:06,350
So now as a next step, I wanna make sure
122
00:07:06,350 --> 00:07:10,300
that the logic for adding items to the cart is different.
123
00:07:10,300 --> 00:07:13,400
And if we add sushi a second or third time
124
00:07:13,400 --> 00:07:16,420
it's aggregated together into one item
125
00:07:16,420 --> 00:07:18,810
where this amount changes instead
126
00:07:18,810 --> 00:07:21,263
of more items being added to disarray.
10254
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.