083 Collection Item.en_US Subtitles

At 00:00:00,730, Character said: OK, so now that we have our collection preview, we need to start looking at building our menu item

2
At 00:00:07,870, Character said: component so we know that our menu item component is going to consist of a image as well as a title,

3
At 00:00:19,120, Character said: a price, and this button that allows us to add it to the cart.

4
At 00:00:24,710, Character said: Now, we're not going to actually add any of the functionality in just yet.

5
At 00:00:29,890, Character said: We haven't really considered how to handle our cart yet.

6
At 00:00:33,730, Character said: But let's just build out this component first.

7
At 00:00:37,900, Character said: So let's add in a collection item into our components.

8
At 00:00:44,660, Character said: And in our folder, we're going to do the same thing we've been doing our collection item components

9
At 00:00:51,830, Character said: and then our collection item dot styles that asks us, the more you type this, the better you'll get

10
At 00:01:02,600, Character said: at it.

11
At 00:01:03,650, Character said: Which is always what's really interesting is that at first it always seems a little repetitive, but

12
At 00:01:10,460, Character said: you actually find that you really do end up remembering everything and what their purpose is the more

13
At 00:01:17,570, Character said: you practice typing the same folder structure for your components and what to do with them.

14
At 00:01:23,380, Character said: OK, so now for our collection item.

15
At 00:01:26,540, Character said: We know that we need certain things to come in in order to popular our menu item, but we don't need

16
At 00:01:32,660, Character said: any state.

17
At 00:01:33,620, Character said: So let's make another functional component.

18
At 00:01:37,670, Character said: So CONSED collection item is equal to this functional component.

19
At 00:01:45,520, Character said: Returns this Divx with our class name.

20
At 00:01:50,210, Character said: Collection item, and then we're going to give it a div.

21
At 00:01:57,190, Character said: And now that Divx is going to hold our image, so let's just give it the class name of image for now.

22
At 00:02:06,020, Character said: And let's.

23
At 00:02:08,250, Character said: Do the same thing we did before with our directory items, so instead we know that what we're going

24
At 00:02:15,630, Character said: to pass in will be an.

25
At 00:02:18,600, Character said: We will also get our name.

26
At 00:02:21,700, Character said: We will get our price and our image URL, and we have all these.

27
At 00:02:26,820, Character said: When we brought in that data earlier in our collection or sorry, in our shop page, right in our shop

28
At 00:02:34,920, Character said: data specifically, so we need an ID name, image and price.

29
At 00:02:41,880, Character said: Now we are going to.

30
At 00:02:46,740, Character said: Put in what we did before with our style and we are going to do background image goes to our string

31
At 00:02:54,510, Character said: interpolation value of.

32
At 00:02:58,470, Character said: Image you, Earl.

33
At 00:03:01,590, Character said: So nothing new here just yet, and then we're going to add another d'Hiv and here we're going to add

34
At 00:03:08,940, Character said: our collection for.

35
At 00:03:11,500, Character said: Now.

36
At 00:03:13,020, Character said: Inside of our Futter.

37
At 00:03:15,630, Character said: We have is this a double repeat, actually, we don't even need this closing tag, we are going to bring

38
At 00:03:22,710, Character said: in our span, which will be our name.

39
At 00:03:29,100, Character said: As well as our.

40
At 00:03:35,430, Character said: Awesome.

41
At 00:03:36,070, Character said: OK, now let's export this out.

42
At 00:03:41,740, Character said: And let's bring in the stars that we have for this component, so I've written them already for us,

43
At 00:03:47,140, Character said: but we can take a quick look at what they are.

44
At 00:03:53,200, Character said: Inside of our collection item, we are styling our image so that its height is ninety five percent.

45
At 00:03:59,950, Character said: Now that means that our collection for photos height will be five percent of the total height of our

46
At 00:04:05,980, Character said: collection item, which will be 350 pixels.

47
At 00:04:09,470, Character said: So this is pretty much going to be the layout for our actual component, what we see here.

48
At 00:04:16,050, Character said: So one important thing to note is that this Fleck's column on our collection item will essentially allow

49
At 00:04:23,760, Character said: our Futter and our image to sit in a vertical alignment.

50
At 00:04:27,700, Character said: Right.

51
At 00:04:29,130, Character said: And then our collection, Futter, is just our regular display flex, and then we have some space between

52
At 00:04:35,250, Character said: them so that our content gets pushed apart, our title takes up 90 percent of the space in our total

53
At 00:04:43,530, Character said: footer and then the price is going to be 10 percent.

54
At 00:04:46,350, Character said: So because our price is probably never going to grow that large, we've g***t to make sure to have our

55
At 00:04:52,170, Character said: name take up the majority of the space here.

56
At 00:04:56,140, Character said: OK.

57
At 00:04:57,580, Character said: Now, if we import in our collection item to our collection preview so that we can access.

58
At 00:05:08,760, Character said: The new collection item we wrote.

59
At 00:05:15,370, Character said: We can now, instead of doing the stiv, just map it through like so and because we need the properties

60
At 00:05:25,030, Character said: on the item that we had before, we're just going to do what we did earlier.

61
At 00:05:31,410, Character said: And we're going to restructure off our I.D., but we're also going to restructure the rest of our item

62
At 00:05:37,920, Character said: props and pass that through like so.

63
At 00:05:44,030, Character said: Let's do other item props.

64
At 00:05:48,280, Character said: WAPs.

65
At 00:05:49,650, Character said: And now it's no longer a div.

66
At 00:05:54,580, Character said: Well, just make sure to D structure or spread our other item props into our collection item.

67
At 00:06:03,460, Character said: Oh, we also have to start a collection preview.

68
At 00:06:08,320, Character said: So those stylings are down here.

69
At 00:06:14,610, Character said: OK, there we go.

70
At 00:06:17,310, Character said: So we have our price and we have our thing because there's no styling coming through, let's just inspect

71
At 00:06:22,800, Character said: quickly and see if we're missing something.

72
At 00:06:25,380, Character said: So while you code, you might see this happen, you just want to make sure that our naming is correct

73
At 00:06:31,260, Character said: for everything and we're getting the stylus.

74
At 00:06:33,870, Character said: So I don't see the stars that we wrote being applied here.

75
At 00:06:39,210, Character said: Although we are getting the actual image right here being rendered so.

76
At 00:06:47,700, Character said: Oh, I see our collection prevue, our collection item.

77
At 00:06:54,070, Character said: Oh, we didn't save.

78
At 00:06:58,230, Character said: Silly mistakes.

79
At 00:06:59,820, Character said: So sometimes if you just take a look inside of your dev tools, it's very easy to see where perhaps

80
At 00:07:08,100, Character said: we are going wrong because we know for sure, due to the way that react is set up, everything should

81
At 00:07:14,760, Character said: be in at a specific time.

82
At 00:07:16,470, Character said: So if it's not being loaded, then we probably messed up our import.

83
At 00:07:20,700, Character said: Right, which we checked first.

84
At 00:07:22,930, Character said: Right.

85
At 00:07:23,220, Character said: We made sure that we were importing in the right collection item, which we were.

86
At 00:07:27,720, Character said: And then we checked if we had our naming like our class names.

87
At 00:07:31,620, Character said: Correct.

88
At 00:07:32,520, Character said: Which we did.

89
At 00:07:35,580, Character said: So then it just turned out we didn't save it.

90
At 00:07:38,220, Character said: So it's a silly error, but there are tons of those.

91
At 00:07:41,580, Character said: As you become a professional developer, a lot of the times you'll find that you are just banging your

92
At 00:07:47,010, Character said: head against the wall for 30 minutes, only to find out that you had a slight typo.

93
At 00:07:52,740, Character said: It's very common, but just like that, we now have our collection component.

94
At 00:08:00,220, Character said: So the only thing we're missing is the hover effect with the add button, but we can add that in a little

95
At 00:08:06,790, Character said: later when we actually build out our cart, because that's what that feature will be tied to.

96
At 00:08:12,850, Character said: And one more thing before we commit our code, we should add a little bit of padding on our overall

97
At 00:08:19,810, Character said: project so that it aligns closer to this.

98
At 00:08:24,550, Character said: So let's go into our app, DOT success, and let's do padding 20 pixels and 80 pixels.

99
At 00:08:34,240, Character said: So I want 20 pixels on the top and bottom and then 80 pixels on the side.

100
At 00:08:38,380, Character said: And now.

101
At 00:08:40,100, Character said: It looks closer.

102
At 00:08:42,240, Character said: So this may be a little bit more than what we had, so let's actually make this 60 pixels maybe.

103
At 00:08:52,320, Character said: It's a lot better.

104
At 00:08:53,220, Character said: That's pretty good.

105
At 00:08:54,480, Character said: So now let's commit our code.

106
At 00:08:56,070, Character said: Let's go back to our terminal.

107
At 00:08:58,580, Character said: Let's do a get and all right, let's see what we first have to commit.

108
At 00:09:05,030, Character said: OK, and then let's do get commit.

109
At 00:09:10,570, Character said: Updating...