083 Collection Item.en_US Movie Subtitles

1 00:00:00,730 --> 00:00:07,870 OK, so now that we have our collection preview, we need to start looking at building our menu item 2 00:00:07,870 --> 00:00:18,760 component so we know that our menu item component is going to consist of a image as well as a title, 3 00:00:19,120 --> 00:00:23,890 a price, and this button that allows us to add it to the cart. 4 00:00:24,710 --> 00:00:29,620 Now, we're not going to actually add any of the functionality in just yet. 5 00:00:29,890 --> 00:00:32,950 We haven't really considered how to handle our cart yet. 6 00:00:33,730 --> 00:00:37,060 But let's just build out this component first. 7 00:00:37,900 --> 00:00:43,330 So let's add in a collection item into our components. 8 00:00:44,660 --> 00:00:50,500 And in our folder, we're going to do the same thing we've been doing our collection item components 9 00:00:51,830 --> 00:01:02,600 and then our collection item dot styles that asks us, the more you type this, the better you'll get 10 00:01:02,600 --> 00:01:02,840 at it. 11 00:01:03,650 --> 00:01:10,070 Which is always what's really interesting is that at first it always seems a little repetitive, but 12 00:01:10,460 --> 00:01:17,570 you actually find that you really do end up remembering everything and what their purpose is the more 13 00:01:17,570 --> 00:01:22,730 you practice typing the same folder structure for your components and what to do with them. 14 00:01:23,380 --> 00:01:26,240 OK, so now for our collection item. 15 00:01:26,540 --> 00:01:32,660 We know that we need certain things to come in in order to popular our menu item, but we don't need 16 00:01:32,660 --> 00:01:33,260 any state. 17 00:01:33,620 --> 00:01:36,830 So let's make another functional component. 18 00:01:37,670 --> 00:01:43,970 So CONSED collection item is equal to this functional component. 19 00:01:45,520 --> 00:01:48,640 Returns this Divx with our class name. 20 00:01:50,210 --> 00:01:56,150 Collection item, and then we're going to give it a div. 21 00:01:57,190 --> 00:02:04,470 And now that Divx is going to hold our image, so let's just give it the class name of image for now. 22 00:02:06,020 --> 00:02:07,190 And let's. 23 00:02:08,250 --> 00:02:15,630 Do the same thing we did before with our directory items, so instead we know that what we're going 24 00:02:15,630 --> 00:02:17,580 to pass in will be an. 25 00:02:18,600 --> 00:02:20,550 We will also get our name. 26 00:02:21,700 --> 00:02:25,750 We will get our price and our image URL, and we have all these. 27 00:02:26,820 --> 00:02:34,920 When we brought in that data earlier in our collection or sorry, in our shop page, right in our shop 28 00:02:34,920 --> 00:02:39,960 data specifically, so we need an ID name, image and price. 29 00:02:41,880 --> 00:02:44,370 Now we are going to. 30 00:02:46,740 --> 00:02:54,510 Put in what we did before with our style and we are going to do background image goes to our string 31 00:02:54,510 --> 00:02:57,150 interpolation value of. 32 00:02:58,470 --> 00:02:59,950 Image you, Earl. 33 00:03:01,590 --> 00:03:08,930 So nothing new here just yet, and then we're going to add another d'Hiv and here we're going to add 34 00:03:08,940 --> 00:03:10,440 our collection for. 35 00:03:11,500 --> 00:03:11,920 Now. 36 00:03:13,020 --> 00:03:14,190 Inside of our Futter. 37 00:03:15,630 --> 00:03:22,710 We have is this a double repeat, actually, we don't even need this closing tag, we are going to bring 38 00:03:22,710 --> 00:03:27,960 in our span, which will be our name. 39 00:03:29,100 --> 00:03:32,040 As well as our. 40 00:03:35,430 --> 00:03:36,000 Awesome. 41 00:03:36,070 --> 00:03:39,530 OK, now let's export this out. 42 00:03:41,740 --> 00:03:47,140 And let's bring in the stars that we have for this component, so I've written them already for us, 43 00:03:47,140 --> 00:03:49,900 but we can take a quick look at what they are. 44 00:03:53,200 --> 00:03:59,150 Inside of our collection item, we are styling our image so that its height is ninety five percent. 45 00:03:59,950 --> 00:04:05,980 Now that means that our collection for photos height will be five percent of the total height of our 46 00:04:05,980 --> 00:04:08,380 collection item, which will be 350 pixels. 47 00:04:09,470 --> 00:04:14,510 So this is pretty much going to be the layout for our actual component, what we see here. 48 00:04:16,050 --> 00:04:23,760 So one important thing to note is that this Fleck's column on our collection item will essentially allow 49 00:04:23,760 --> 00:04:27,510 our Futter and our image to sit in a vertical alignment. 50 00:04:27,700 --> 00:04:28,080 Right. 51 00:04:29,130 --> 00:04:35,250 And then our collection, Futter, is just our regular display flex, and then we have some space between 52 00:04:35,250 --> 00:04:43,530 them so that our content gets pushed apart, our title takes up 90 percent of the space in our total 53 00:04:43,530 --> 00:04:46,340 footer and then the price is going to be 10 percent. 54 00:04:46,350 --> 00:04:52,170 So because our price is probably never going to grow that large, we've g***t to make sure to have our 55 00:04:52,170 --> 00:04:54,720 name take up the majority of the space here. 56 00:04:56,140 --> 00:04:56,680 OK. 57 00:04:57,580 --> 00:05:07,600 Now, if we import in our collection item to our collection preview so that we can access. 58 00:05:08,760 --> 00:05:10,950 The new collection item we wrote. 59 00:05:15,370 --> 00:05:25,030 We can now, instead of doing the stiv, just map it through like so and because we need the properties 60 00:05:25,030 --> 00:05:30,220 on the item that we had before, we're just going to do what we did earlier. 61 00:05:31,410 --> 00:05:37,920 And we're going to restructure off our I.D., but we're also going to restructure the rest of our item 62 00:05:37,920 --> 00:05:43,020 props and pass that through like so. 63 00:05:44,030 --> 00:05:46,430 Let's do other item props. 64 00:05:48,280 --> 00:05:48,670 WAPs. 65 00:05:49,650 --> 00:05:52,080 And now it's no longer a div. 66 00:05:54,580 --> 00:06:01,480 Well, just make sure to D structure or spread our other item props into our collection item. 67 00:06:03,460 --> 00:06:06,250 Oh, we also have to start a collection preview. 68 00:06:08,320 --> 00:06:11,020 So those stylings are down here. 69 00:06:14,610 --> 00:06:16,250 OK, there we go. 70 00:06:17,310 --> 00:06:22,800 So we have our price and we have our thing because there's no styling coming through, let's just inspect 71 00:06:22,800 --> 00:06:24,960 quickly and see if we're missing something. 72 00:06:25,380 --> 00:06:31,260 So while you code, you might see this happen, you just want to make sure that our naming is correct 73 00:06:31,260 --> 00:06:33,150 for everything and we're getting the stylus. 74 00:06:33,870 --> 00:06:37,470 So I don't see the stars that we wrote being applied here. 75 00:06:39,210 --> 00:06:45,450 Although we are getting the actual image right here being rendered so. 76 00:06:47,700 --> 00:06:52,550 Oh, I see our collection prevue, our collection item. 77 00:06:54,070 --> 00:06:55,390 Oh, we didn't save. 78 00:06:58,230 --> 00:06:59,130 Silly mistakes. 79 00:06:59,820 --> 00:07:08,100 So sometimes if you just take a look inside of your dev tools, it's very easy to see where perhaps 80 00:07:08,100 --> 00:07:14,760 we are going wrong because we know for sure, due to the way that react is set up, everything should 81 00:07:14,760 --> 00:07:16,460 be in at a specific time. 82 00:07:16,470 --> 00:07:20,680 So if it's not being loaded, then we probably messed up our import. 83 00:07:20,700 --> 00:07:22,920 Right, which we checked first. 84 00:07:22,930 --> 00:07:23,210 Right. 85 00:07:23,220 --> 00:07:27,060 We made sure that we were importing in the right collection item, which we were. 86 00:07:27,720 --> 00:07:31,620 And then we checked if we had our naming like our class names. 87 00:07:31,620 --> 00:07:32,070 Correct. 88 00:07:32,520 --> 00:07:34,650 Which we did. 89 00:07:35,580 --> 00:07:38,190 So then it just turned out we didn't save it. 90 00:07:38,220 --> 00:07:41,580 So it's a silly error, but there are tons of those. 91 00:07:41,580 --> 00:07:47,010 As you become a professional developer, a lot of the times you'll find that you are just banging your 92 00:07:47,010 --> 00:07:52,360 head against the wall for 30 minutes, only to find out that you had a slight typo. 93 00:07:52,740 --> 00:07:58,440 It's very common, but just like that, we now have our collection component. 94 00:08:00,220 --> 00:08:06,790 So the only thing we're missing is the hover effect with the add button, but we can add that in a little 95 00:08:06,790 --> 00:08:12,150 later when we actually build out our cart, because that's what that feature will be tied to. 96 00:08:12,850 --> 00:08:19,810 And one more thing before we commit our code, we should add a little bit of padding on our overall 97 00:08:19,810 --> 00:08:24,090 project so that it aligns closer to this. 98 00:08:24,550 --> 00:08:33,590 So let's go into our app, DOT success, and let's do padding 20 pixels and 80 pixels. 99 00:08:34,240 --> 00:08:38,230 So I want 20 pixels on the top and bottom and then 80 pixels on the side. 100 00:08:38,380 --> 00:08:39,160 And now. 101 00:08:40,100 --> 00:08:41,180 It looks closer. 102 00:08:42,240 --> 00:08:48,600 So this may be a little bit more than what we had, so let's actually make this 60 pixels maybe. 103 00:08:52,320 --> 00:08:52,860 It's a lot better. 104 00:08:53,220 --> 00:08:53,790 That's pretty good. 105 00:08:54,480 --> 00:08:55,600 So now let's commit our code. 106 00:08:56,070 --> 00:08:57,360 Let's go back to our terminal. 107 00:08:58,580 --> 00:09:04,740 Let's do a get and all right, let's see what we first have to commit. 108 00:09:05,030 --> 00:09:08,750 OK, and then let's do get commit. 109 00:09:10,570 --> 00:09:14,590 Updating...