1
00:00:06,740 --> 00:00:12,580
It hey what's going on my code brothers and code sisters we are going to set up detailed Visi so that

2
00:00:12,580 --> 00:00:19,930
when we tap on a cell in storefront B.C. It will pop up detail AVC show all the gorgeous data and put

3
00:00:19,930 --> 00:00:25,090
us one step closer to actually getting these in-app purchases in our apps so let's pull open our project.

4
00:00:25,180 --> 00:00:26,080
Here we go.

5
00:00:26,470 --> 00:00:32,560
And the inside storefront B.S. We need to add one more delegate method from you of you you a collection

6
00:00:32,560 --> 00:00:39,970
view delegate called did select a item at index path and this is called as you could see.

7
00:00:40,210 --> 00:00:43,900
Well you know what I'm going to actually retype that so you can see exactly what the description says

8
00:00:44,710 --> 00:00:49,930
it says tells the delegate that the item at the specific index path was selected.

9
00:00:49,930 --> 00:00:53,890
So in our simulator here let's pull open our project.

10
00:00:53,950 --> 00:00:57,370
This here is index 1 index to index 3 index.

11
00:00:57,400 --> 00:01:00,950
Well I guess 0 1 2 3 4 5.

12
00:01:01,060 --> 00:01:06,850
And so when I select one or select the index one it's going to say hey index one was selected and it

13
00:01:06,850 --> 00:01:12,070
calls that function and when it calls that we can basically set it up to present a certain type of information.

14
00:01:12,070 --> 00:01:17,440
So let's go ahead and call did select item and index path and what we need to do is we need to find

15
00:01:17,440 --> 00:01:22,490
a way to get the information from the cell and handed over to detail AVC.

16
00:01:22,510 --> 00:01:26,360
Now we're going to be using the storyboard in order to present this view controller.

17
00:01:26,380 --> 00:01:30,520
So we need to set up something first and it's easy to overlook so let's do it now.

18
00:01:31,030 --> 00:01:35,330
In Maine that story board we're going to go ahead and select detail visi.

19
00:01:35,380 --> 00:01:40,630
Now we're going to present this using a function that the storyboard has called instantiate View Controller

20
00:01:40,750 --> 00:01:43,630
with identifier and we need to set that identifier.

21
00:01:43,740 --> 00:01:47,240
So of course the class is detail visi.

22
00:01:47,500 --> 00:01:50,020
But we need an identifier for the storyboard.

23
00:01:50,020 --> 00:01:57,250
So we're going to create a storyboard ID of detail Visi just like that and we'll use that when instantiating

24
00:01:57,250 --> 00:01:58,370
our view controller.

25
00:01:58,390 --> 00:02:03,570
So go ahead and head back to storefront Visi and we need to create a cell here.

26
00:02:03,580 --> 00:02:04,170
OK.

27
00:02:04,390 --> 00:02:08,980
Now what we're going to do is we're going to actually use the item the very same way that we did with

28
00:02:08,980 --> 00:02:15,400
our cell we configured ourselves with our items and pulled out the right ones with index path that row.

29
00:02:15,400 --> 00:02:21,340
So when we select an item we're going to use that same selected index path to tell what data to present

30
00:02:21,340 --> 00:02:22,030
on the next screen.

31
00:02:22,030 --> 00:02:22,910
It's pretty handy.

32
00:02:23,140 --> 00:02:28,210
So first we're going to go ahead and create an instance of detail Visi and then we're going to present

33
00:02:28,210 --> 00:02:33,350
that case or whenever we tap on the cell it's going to create an instance of detail OVC and presented.

34
00:02:33,370 --> 00:02:38,140
So I'm also going to use guard lead just so we can be safe just in case we mistype something.

35
00:02:38,230 --> 00:02:48,380
So go ahead and type guard let detail Visi equals storyboard instantiate view controller with identifier.

36
00:02:48,650 --> 00:02:49,080
OK.

37
00:02:49,210 --> 00:02:53,590
And that's where the identifier we just set will go detail B.c.

38
00:02:53,710 --> 00:02:55,490
Make sure you type it correctly.

39
00:02:55,570 --> 00:02:57,970
If that doesn't work we're just gonna go ahead and call.

40
00:02:57,970 --> 00:03:00,640
Else what else.

41
00:03:00,640 --> 00:03:04,930
And we're just going to return meaning if it doesn't work we're going to break out of the function and

42
00:03:04,930 --> 00:03:06,380
not do anything at all.

43
00:03:06,400 --> 00:03:13,540
So detail B C is now instantiated and we have an instance of it which is great but just like the cell

44
00:03:13,540 --> 00:03:18,180
it's not actually of type detail Visi until we optionally cast it.

45
00:03:18,200 --> 00:03:26,710
So afterwards go ahead and type as detailed Visi like so now it's of type detail AVC.

46
00:03:26,780 --> 00:03:28,070
Very very cool.

47
00:03:28,070 --> 00:03:31,740
The only thing we need to do to present it is call present.

48
00:03:32,270 --> 00:03:36,190
Select this function pass in the view controller to present.

49
00:03:36,200 --> 00:03:40,020
Which is detail Visi What's with the lowercase D.

50
00:03:40,730 --> 00:03:45,150
Animated is true and completion is nil we don't care when it completes.

51
00:03:45,260 --> 00:03:46,720
So there that.

52
00:03:46,880 --> 00:03:49,260
If I build and run you'll see that warning goes away.

53
00:03:49,490 --> 00:03:53,890
But we are not giving detailed VC any information.

54
00:03:53,900 --> 00:03:57,980
It doesn't know up from down left from right anything.

55
00:03:57,980 --> 00:04:03,130
So we need to write we need to basically create a way for detail Visi to get information.

56
00:04:03,140 --> 00:04:07,340
So what we're going to do is we're going to go ahead and go into the detail Visi subclass.

57
00:04:07,340 --> 00:04:12,830
You can click on it here and we're going to create a function that will allow us to initialize all the

58
00:04:12,830 --> 00:04:15,410
data before this view controller is even presented.

59
00:04:15,680 --> 00:04:23,320
So above you did load go ahead and call func init data for item with an internal parameter of item of

60
00:04:23,600 --> 00:04:25,010
type item.

61
00:04:25,010 --> 00:04:27,140
Kind of redundant but pretty cool.

62
00:04:27,140 --> 00:04:31,430
Now what we're going to do is we're going to use this item to set all the information that we need and

63
00:04:31,430 --> 00:04:32,330
our view controller.

64
00:04:32,330 --> 00:04:40,840
So go ahead and let's call item image view image and we're going to set that to item.

65
00:04:41,020 --> 00:04:41,520
Hello.

66
00:04:41,620 --> 00:04:44,630
I don't image.

67
00:04:44,630 --> 00:04:54,250
Go ahead an call item name label text and set it to be equal to item name.

68
00:04:54,590 --> 00:05:00,940
Then go ahead and type item price label text and set it to be equal to item price.

69
00:05:00,950 --> 00:05:01,520
OK.

70
00:05:01,940 --> 00:05:02,320
Let's think.

71
00:05:02,320 --> 00:05:04,140
Is there anything else we need to add.

72
00:05:04,170 --> 00:05:12,230
Oh of course we're getting that arrogance so we're going to use string describing describing and we

73
00:05:12,230 --> 00:05:18,700
can pass in our function here or not our function but our price double value.

74
00:05:18,710 --> 00:05:25,460
All right so that's a string now that's wonderful let's think ugly ad views fine buy items.

75
00:05:25,460 --> 00:05:27,360
Button is is fine.

76
00:05:27,380 --> 00:05:34,520
Oh you know what it's not fine because the buy items button currently has a placeholder says buy item

77
00:05:34,520 --> 00:05:35,480
for dollar amount.

78
00:05:35,480 --> 00:05:41,650
So I'm going to actually copy this and I'm going to go ahead and set the title of the buy items button

79
00:05:41,660 --> 00:05:43,530
when we when we load this.

80
00:05:43,550 --> 00:05:54,710
So go ahead and call whip's by item by item button set title and the string is by this item for dollar

81
00:05:54,710 --> 00:05:55,160
amount.

82
00:05:55,160 --> 00:05:57,270
Now where are we going to get that dollar amount.

83
00:05:57,380 --> 00:06:05,150
We can use our item price so go ahead and call item price and the price will go right and just like

84
00:06:05,150 --> 00:06:05,880
that.

85
00:06:05,900 --> 00:06:07,660
Now the control state is not normal.

86
00:06:07,700 --> 00:06:08,930
This is just a regular button.

87
00:06:08,930 --> 00:06:10,940
We're setting it for its normal use.

88
00:06:11,220 --> 00:06:13,140
And guys this is pretty awesome.

89
00:06:13,160 --> 00:06:18,320
We have now set up all of our image views our labels our button is now set up with the price and we

90
00:06:18,320 --> 00:06:20,510
should be good to present.

91
00:06:20,510 --> 00:06:23,250
I don't know about you but I really want to try this.

92
00:06:23,270 --> 00:06:29,600
So let's go ahead and let's head back to a storefront VC and when we selected we need to be able to

93
00:06:29,600 --> 00:06:36,670
pass in an item and we use this property here item to pass in the index path for the specific items

94
00:06:36,690 --> 00:06:39,140
so copy that paste it below.

95
00:06:39,350 --> 00:06:44,390
And now whenever we select an item we're going to get the exact item we select what are we going to

96
00:06:44,390 --> 00:06:44,800
do with it.

97
00:06:44,800 --> 00:06:51,440
So we're going to call detail we see in that data for item pass in the item.

98
00:06:51,560 --> 00:06:54,640
And when we presented all that data will be initialized.

99
00:06:54,710 --> 00:06:57,240
Let's go try this build and run.

100
00:06:57,320 --> 00:06:58,450
Let's go see if this works.

101
00:06:58,450 --> 00:07:04,070
Presenting the data on the View Controller we want this is super cool guys I'm really excited about

102
00:07:04,070 --> 00:07:06,710
this to make this a bit smaller.

103
00:07:06,710 --> 00:07:07,700
There we go.

104
00:07:08,120 --> 00:07:14,540
OK here we go building and running when I select a View Controller it should instantiate the data initialized

105
00:07:14,750 --> 00:07:21,870
it on the other view controller and then present it we get an error or look at that it's crashing and

106
00:07:21,870 --> 00:07:29,100
you know what the reason is we are trying to set up these UI kit elements before they're even available

107
00:07:29,100 --> 00:07:29,920
to us.

108
00:07:29,940 --> 00:07:34,290
So you know we have to do we have to set this up in view to load when the view loads.

109
00:07:34,290 --> 00:07:41,220
So go ahead and actually we're going to cut this and paste it into view load and an initialiser function

110
00:07:41,250 --> 00:07:43,470
gets called before all of that happens.

111
00:07:43,470 --> 00:07:49,410
So what we're going to actually do is we're going to create a variable inside this class called item

112
00:07:49,860 --> 00:07:56,700
and we're going to instantiate that variable with item that we pass in and then we'll use that item

113
00:07:56,700 --> 00:08:03,420
instead to set up the values for these because we are basically asking it to fill this with data when

114
00:08:03,420 --> 00:08:04,860
this doesn't even exist yet.

115
00:08:05,100 --> 00:08:13,740
So I'm going to go ahead and follow the same pattern by making this a public private set variable.

116
00:08:13,920 --> 00:08:18,570
And it's going to be var item type item and we're definitely going to need it.

117
00:08:18,570 --> 00:08:21,280
So I'm going to go ahead and make it non-optional.

118
00:08:21,450 --> 00:08:29,130
Now when we pass this in we're going to call self item whip's self-taught item is going to be equal

119
00:08:29,130 --> 00:08:31,340
to item.

120
00:08:31,380 --> 00:08:37,020
All right so now when we instantiate this view controller it's going to initialize this item in this

121
00:08:37,020 --> 00:08:38,220
variable here.

122
00:08:38,610 --> 00:08:44,180
And you know what I can make this a constant because it's never really mutated Oh no.

123
00:08:44,180 --> 00:08:45,830
It is definitely mutated sorry.

124
00:08:45,830 --> 00:08:51,620
So we're going to go ahead and set the value of this item then we're going to go ahead and use that

125
00:08:51,710 --> 00:08:55,660
to set the values of the UI kit elements as soon as they're created.

126
00:08:55,670 --> 00:08:57,910
So go ahead and build and run.

127
00:08:57,920 --> 00:08:59,210
Let's try this one more time.

128
00:08:59,210 --> 00:09:03,800
That should solve our problem properly initializing the data.

129
00:09:03,860 --> 00:09:05,390
That's kind of a big one.

130
00:09:05,390 --> 00:09:15,450
So let's see how we did select an item and boom there is our our project that's really really cool.

131
00:09:15,490 --> 00:09:17,000
I'm noticing some issues here.

132
00:09:17,000 --> 00:09:21,770
Everything kind of got squished down and you know what I'm going to say that that is due to the fact

133
00:09:21,770 --> 00:09:23,810
that we remove that bottom constraint.

134
00:09:23,990 --> 00:09:26,990
Let's add that back by selecting our stack view.

135
00:09:27,200 --> 00:09:30,290
And let's pin this 8 from the bottom.

136
00:09:31,450 --> 00:09:33,440
No that's good.

137
00:09:33,490 --> 00:09:33,810
All right.

138
00:09:33,840 --> 00:09:34,620
Yep that's good.

139
00:09:34,690 --> 00:09:36,180
Let's build and run.

140
00:09:36,470 --> 00:09:38,380
And let's see if that fixed our issue.

141
00:09:38,380 --> 00:09:39,850
But guys we're passing the right data.

142
00:09:39,850 --> 00:09:45,210
You saw it all there the picture the name the price the View Controller is good to go it looks awesome.

143
00:09:45,670 --> 00:09:49,900
This is great guy so in the next video we're going to actually start setting up some of our in-app purchase

144
00:09:49,900 --> 00:09:50,540
fun.

145
00:09:50,580 --> 00:09:54,650
So Selecta maybe pizza there's pizza 999.

146
00:09:54,830 --> 00:09:59,830
There's our ad and buy this item for 999 hide ads for 99 cents.

147
00:10:00,070 --> 00:10:01,710
So cool.

148
00:10:01,960 --> 00:10:09,400
Oh my goodness I can't even handle this but I'm a little perplexed as to why this view is not properly

149
00:10:09,400 --> 00:10:13,340
showing up like it should be.

150
00:10:13,990 --> 00:10:19,330
Yeah I mean I don't even see it at all unless this is a simulator bug which I don't believe it is

151
00:10:22,240 --> 00:10:23,410
very weird.

152
00:10:23,800 --> 00:10:24,700
I changed the color.

153
00:10:24,700 --> 00:10:28,660
I mean that probably will not have an effect that's even uglier.

154
00:10:28,840 --> 00:10:30,350
Maybe it just needs to be extra ugly.

155
00:10:38,720 --> 00:10:40,590
Ha now it's still going OK.

156
00:10:40,650 --> 00:10:46,350
So what I'm going to do is I'm going to look at my stack here and it is being aligned centered.

157
00:10:46,350 --> 00:10:52,980
So let's go ahead and set it to fill and then I need to change my labels here to be center aligned and

158
00:10:52,980 --> 00:10:58,260
let's build and run it again maybe since I don't have an explicit with it was getting squished in with

159
00:10:58,260 --> 00:10:59,270
the constraints there.

160
00:11:00,730 --> 00:11:01,820
Could be part of the problem.

161
00:11:01,810 --> 00:11:03,490
Let's see if that fixed it.

162
00:11:04,000 --> 00:11:04,540
And there it is.

163
00:11:04,540 --> 00:11:07,070
There's our ad super super cool.

164
00:11:07,240 --> 00:11:08,060
That was the problem.

165
00:11:08,080 --> 00:11:12,760
It was center aligned and it was getting squished into an infinitely small cell going to change it back

166
00:11:12,760 --> 00:11:15,980
to yellow because that's that's even too ugly for what I was intending.

167
00:11:16,180 --> 00:11:18,760
GROSS But anyways guys amazing amazing work.

168
00:11:18,760 --> 00:11:23,420
We are now properly passing values to detail Visi in the next video.

169
00:11:23,440 --> 00:11:26,460
We're going to start by creating our in-app purchase service.

170
00:11:26,480 --> 00:11:30,450
It's a singleton class that's going to handle all of our handy dandy in app purchased stuff.

171
00:11:30,580 --> 00:11:31,550
Let's head over there now.