All language subtitles for 016 Outputting Cart Items_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.