1
00:00:02,220 --> 00:00:06,440
For the add to cart feature, we'll need to work on two things - 

2
00:00:06,450 --> 00:00:09,850
one is of course that we can have a cart screen, that we have an

3
00:00:09,880 --> 00:00:17,250
icon here in our header that takes us to the cart screen where we can see like the total sum and the

4
00:00:17,250 --> 00:00:20,640
cart items and where we have that order now button

5
00:00:20,640 --> 00:00:26,580
but I'd say that's the second step because the more important first step is that we add the logic

6
00:00:26,910 --> 00:00:33,030
to manage cart items and that involves Redux. For this,

7
00:00:33,040 --> 00:00:40,620
I'll add a brand new reducer, a second reducer which I'll name cart, cart.js and also an actions file

8
00:00:40,750 --> 00:00:43,280
and this is now actually an action file we will populate.

9
00:00:43,330 --> 00:00:45,270
We'll do that with the products file later too

10
00:00:45,280 --> 00:00:52,250
once we dive into adding products and so on but for now, let's start with the cart feature. So here in

11
00:00:52,250 --> 00:00:55,010
the cart.js file in the reducers folder,

12
00:00:55,250 --> 00:01:00,350
I'll set up my initial state for that cart slice and again, it's all these separate reducers and the

13
00:01:00,350 --> 00:01:05,390
states they manage to make up that total Redux store because in the end, that's what you then combine

14
00:01:05,390 --> 00:01:11,420
here with combined reduces into one root reducer and one big state in the end.

15
00:01:11,520 --> 00:01:16,150
We just have these individual sub-states to make managing the data easier.

16
00:01:16,230 --> 00:01:22,100
So here in the cart reducer, how should the state for our cart look like?

17
00:01:22,500 --> 00:01:31,000
Well our cart will have a bunch of items, could be an array and a sum which initially is zero, so a total

18
00:01:31,360 --> 00:01:35,680
amount you could say, you could of course also name this total amount maybe to make it really clear what

19
00:01:35,680 --> 00:01:36,720
this is.

20
00:01:36,730 --> 00:01:39,160
So these are the two things that make up my cart here

21
00:01:39,160 --> 00:01:45,460
and as always, I can't emphasize this enough, there is more than one way of implementing this. So if you want

22
00:01:45,460 --> 00:01:47,350
to manage some other data here as well,

23
00:01:47,380 --> 00:01:48,480
definitely do so,

24
00:01:48,490 --> 00:01:50,920
there is no single right or wrong approach,

25
00:01:50,920 --> 00:01:53,330
this is just my approach of building this app.

26
00:01:53,410 --> 00:01:58,480
Now it's important that for this cart here, I want to make sure that if we have an item in the cart already,

27
00:01:58,590 --> 00:02:02,120
let's say the red shirt and I click to cart a second time,

28
00:02:02,440 --> 00:02:09,340
I don't add two items to this array but I still only have one item in there and instead every item in

29
00:02:09,340 --> 00:02:15,850
that items array should be an object where I manage like the ID of the product maybe, where I have

30
00:02:15,850 --> 00:02:18,940
the title and the quantity of the item in the cart,

31
00:02:18,970 --> 00:02:22,630
so that would then change to 2 if I click on it a second time.

32
00:02:22,720 --> 00:02:31,960
Therefore you could actually also argue that items maybe shouldn't be an array but maybe a Javascript object

33
00:02:32,170 --> 00:02:37,930
because that allows us to store the ID of the product as a key and the value could be an object with

34
00:02:38,220 --> 00:02:42,420
the title, with the quantity, with the price and

35
00:02:42,470 --> 00:02:43,840
that's just an alternative,

36
00:02:43,840 --> 00:02:48,830
you could also do this all with an array but that's actually the approach I will use.

37
00:02:49,180 --> 00:02:54,190
Now the reducer I export therefore is a reducer which of course gets a state which has our initial state

38
00:02:54,190 --> 00:03:00,700
as a default value and an action as an argument which in the end needs to return some data.

39
00:03:01,150 --> 00:03:04,890
So in the end, it needs to return a new state which is then used by Redux.

40
00:03:04,900 --> 00:03:07,210
Now we need an action to continue.

41
00:03:07,660 --> 00:03:15,610
So here I'll export a constant, an action identifier and I'll name this add to cart, the identifier is

42
00:03:15,610 --> 00:03:22,790
up to you, I'll go with add to cart like this and in the actions file, I will create such an action

43
00:03:22,780 --> 00:03:24,490
creator function.

44
00:03:24,610 --> 00:03:26,620
So here another constant which I'll name

45
00:03:26,650 --> 00:03:34,800
add to cart which receives let's say the full product object which I want to add, so that I can pull

46
00:03:34,800 --> 00:03:40,260
out the information I need and then in here, we have to return such an action object which has a type which

47
00:03:40,260 --> 00:03:44,730
is add to cart and then our product.

48
00:03:44,730 --> 00:03:50,010
This is just a way of creating these actions that makes it very simple for us to do that inside of our

49
00:03:50,010 --> 00:03:51,240
components.

50
00:03:51,240 --> 00:03:56,970
So in the end, in the cart reducer, in all reducers actually but in the cart reducers place where we care,

51
00:03:57,310 --> 00:03:58,010
we'll get that

52
00:03:58,020 --> 00:04:06,180
add to cart action, so here we need to switch the action type and handle the case that it's add to cart

53
00:04:06,360 --> 00:04:07,950
and therefore you should import

54
00:04:07,950 --> 00:04:14,050
add to cart from that actions folder and there, from the cart file. Now and by the way important,

55
00:04:14,070 --> 00:04:19,200
this action when it's dispatched is received on all reducers but if you don't handle it with a separate

56
00:04:19,200 --> 00:04:26,460
case, your default case will kick in which normally should just return your current state slice for this

57
00:04:26,460 --> 00:04:31,100
reducer, which means the state slice for this reducer is unchanged. Here

58
00:04:31,140 --> 00:04:34,550
however in the cart reducer, I of course want to change my state,

59
00:04:34,710 --> 00:04:36,750
hence I do handle to add to cart

60
00:04:36,750 --> 00:04:39,660
case here and now in add to cart,

61
00:04:39,660 --> 00:04:41,240
what should happen there?

62
00:04:42,280 --> 00:04:50,720
Well we get our added product, we can pull that out of the action because there in the action, we'll have

63
00:04:50,720 --> 00:04:51,750
a product key,

64
00:04:51,770 --> 00:04:56,040
that's what we just set up here in the action cart.js file,

65
00:04:56,060 --> 00:05:00,410
so then I'll get our product and I'm storing it in a constant, added product here with which we can work

66
00:05:00,430 --> 00:05:00,710
now

67
00:05:01,920 --> 00:05:08,910
and we'll have our product price here which is of course addedProduct.price and we'll have our product

68
00:05:08,940 --> 00:05:16,170
title which is addedProduct.title. Before we continue, let's define how cart item,

69
00:05:16,170 --> 00:05:21,460
so what we store here should look like, the value we have in there.

70
00:05:21,650 --> 00:05:30,550
So I'll go to my models folder and add a cart-item.js file here and then add a cart item class

71
00:05:30,580 --> 00:05:32,650
which receives a constructor

72
00:05:32,890 --> 00:05:39,370
and before I forget it again, which needs to be exported here and now in that constructor, I expect

73
00:05:39,370 --> 00:05:46,750
to get the quantity of the product we're about to add, the product price,

74
00:05:47,020 --> 00:05:56,950
the product title and the sum for this item, if we have three times the red shirt, our sum would be three

75
00:05:56,950 --> 00:05:58,980
times 29.99,

76
00:05:59,110 --> 00:06:01,690
so roughly around $90.

77
00:06:01,690 --> 00:06:10,220
Now what I don't get here is the product ID because I will use that as a key inside of my object here

78
00:06:10,220 --> 00:06:13,440
which items holds and then will become clearer once we implement it.

79
00:06:14,150 --> 00:06:17,690
So here in the cart item, I just store all the data I receive,

80
00:06:17,840 --> 00:06:22,890
quantity, product price and I have that data

81
00:06:22,900 --> 00:06:34,200
in there which I need to output later, so product title and the sum, like this

82
00:06:34,260 --> 00:06:41,520
and now back in the reducer, we can of course import this cart item class from the models folder and from

83
00:06:41,520 --> 00:06:47,880
cart item here and now back in that add to cart case down there,

84
00:06:47,980 --> 00:06:52,680
we first of all need to find out whether that product is already part of our items.

85
00:06:52,680 --> 00:06:59,370
Now as I mentioned, I'll add every new product by adding a new key to items which is the ID of that

86
00:06:59,370 --> 00:07:01,020
product, since that is unique

87
00:07:01,020 --> 00:07:06,870
we always have each key only once and then the value will be a cart item as we just defined it in models

88
00:07:07,110 --> 00:07:12,990
and hence I know if the ID of the product I'm getting here is already a key of items, then this already

89
00:07:13,170 --> 00:07:17,050
has our item as a cart item.

90
00:07:17,070 --> 00:07:26,190
So here, we can simply check if items for addedProduct.ID exists,

91
00:07:26,200 --> 00:07:36,290
so if that returns something true-ish, so not undefined, then we already have the item in the cart which

92
00:07:36,290 --> 00:07:38,800
is okay but then we just need to change the quantity,

93
00:07:38,860 --> 00:07:41,600
otherwise we'll need to add a brand new item.

94
00:07:41,600 --> 00:07:45,920
So let's start with the else case because that's the case we'll first encounter when we add something

95
00:07:45,920 --> 00:07:47,170
for the first time,

96
00:07:47,330 --> 00:07:51,910
there we need a new cart item, I create that with the new keyword

97
00:07:51,920 --> 00:07:58,460
and the cart item class I defined and in there, we need to provide the quantity which of course is one

98
00:07:58,520 --> 00:08:00,530
if we just add a new item,

99
00:08:00,920 --> 00:08:08,840
we need to provide the product price, the product title here and the sum and the sum of course initially

100
00:08:09,050 --> 00:08:11,580
is just our product price, right?

101
00:08:11,600 --> 00:08:17,810
Because if we add one item of that price, then the sum for this cart item is our product price

102
00:08:17,810 --> 00:08:21,200
and now this new cart item has to be added to our cart items here.

103
00:08:24,100 --> 00:08:29,050
So here, we return a copy of our state

104
00:08:29,220 --> 00:08:38,290
and we set items equal to a new object where I copy all my existing state items in, so that I copy my

105
00:08:38,290 --> 00:08:39,630
existing items

106
00:08:39,640 --> 00:08:47,200
object here and then I add a new key with this dynamic syntax with the square brackets where the key

107
00:08:47,200 --> 00:08:55,280
name is addedProduct.ID, that's what I meant with the ID of the product being the key in our

108
00:08:55,340 --> 00:08:59,190
items object and the value is our new cart item.

109
00:08:59,390 --> 00:09:04,730
This is just a syntax you have to know, it's vanilla Javascript, this is how you can add or access as up

110
00:09:04,730 --> 00:09:11,570
here a dynamic property instead of hardcoding it as a string here. By the way, this up here should of course

111
00:09:11,600 --> 00:09:20,170
also be state.items, my mistake. So with this, we should add a new cart item here.

112
00:09:20,230 --> 00:09:24,790
Now if you already have an item in the cart, then of course we don't create a new cart item, instead we

113
00:09:24,790 --> 00:09:31,480
want to update the existing one. So I'll have my updated cart item here and for that, I still create a

114
00:09:31,480 --> 00:09:35,470
new cart item but I'll prepopulate it with some existing data,

115
00:09:35,800 --> 00:09:46,960
for example the quantity here. We get that from state items for the ID of the added product because

116
00:09:46,960 --> 00:09:52,150
that should already be part of the state items, we're checking this here and this will have a quantity

117
00:09:52,150 --> 00:09:57,730
key of course because such an item here in my items is just of type cart items, so it'll have a quantity

118
00:09:57,730 --> 00:09:58,480
property and

119
00:09:58,600 --> 00:10:02,020
we simply add one to that because we're adding a new cart item,

120
00:10:02,080 --> 00:10:09,560
so we have to increment this. Now cart item as a second argument takes the product price. Then of course

121
00:10:09,570 --> 00:10:14,540
since we will build the app such that the price never changes which would add a lot of complexity here,

122
00:10:14,550 --> 00:10:19,860
we would have to manage the cart in a totally different way in that case, we would have to store each cart

123
00:10:19,890 --> 00:10:25,350
item as a list of transactions for this cart item which is too much for this here.

124
00:10:25,350 --> 00:10:30,760
So since this never changes, since the price never changes, we can in the end just take the prod price we're

125
00:10:30,760 --> 00:10:36,930
getting or take the existing price we stored before because that again will never change.

126
00:10:36,930 --> 00:10:42,150
The title might change and I want to store the most recent title here, so I'll definitely take the one

127
00:10:42,150 --> 00:10:46,620
of the product we're getting here instead of my old snapshot

128
00:10:46,710 --> 00:10:51,480
and last but not least, the last value here, my total sum for this cart item,

129
00:10:51,480 --> 00:10:59,520
that of course is the current sum, so I access state items for the ID here, sum plus the product

130
00:10:59,520 --> 00:11:06,660
price because we add one new item here, we have to add the price times 1 to the current sum. That's the

131
00:11:06,660 --> 00:11:08,570
updated cart item.

132
00:11:08,580 --> 00:11:16,750
Now with that, we can return our new state slice here by copying the old states and setting items equal

133
00:11:16,930 --> 00:11:26,460
to and now important, to an object where we copy state.items but where we now again set addedProduct.ID

134
00:11:26,460 --> 00:11:33,310
and yes, this exists already but with that we simply override it with our updated cart item,

135
00:11:33,310 --> 00:11:37,070
so we do the same update we do down there. Now

136
00:11:37,100 --> 00:11:40,150
that however is not all we need to do,

137
00:11:40,250 --> 00:11:43,750
we need to change the total amount as well because that of course changes.

138
00:11:43,940 --> 00:11:52,420
So when we add an item for the first time, then the total amount should be basically our old total amount,

139
00:11:52,430 --> 00:11:57,530
so state total amount plus product price and it's the same

140
00:11:57,530 --> 00:12:04,910
if we add an item to an existing cart or when it already exists in there because in the end, our total

141
00:12:04,910 --> 00:12:10,130
always just is the old total plus the price, because we always add one item of that product,

142
00:12:10,130 --> 00:12:12,190
that's how this app will work.

143
00:12:12,200 --> 00:12:14,480
So our update statement here is almost the same,

144
00:12:14,480 --> 00:12:18,920
the only thing that differs is here how we create that cart item, therefore we can of course also

145
00:12:18,920 --> 00:12:24,110
reuse this code, move this out of the if else block and instead of having two different constants here,

146
00:12:24,110 --> 00:12:27,590
we can create a variable before we enter the if statement,

147
00:12:30,670 --> 00:12:33,150
updated or a new cart item

148
00:12:33,190 --> 00:12:36,990
maybe, that could be a name because we don't know what it will be in advance

149
00:12:37,090 --> 00:12:44,590
and then here in the if branch here, we set updated or new cart item to this updated cart item, here

150
00:12:44,590 --> 00:12:49,900
on the other hand we set it to this new cart item and here, we then always use the updated or new cart

151
00:12:49,930 --> 00:12:54,270
item and with that, we have some code reusage here and

152
00:12:54,400 --> 00:13:00,610
don't repeat ourselves which is always good. One other side note, copying the state here of course

153
00:13:00,610 --> 00:13:04,420
is always redundant because you always set both items and total amount.

154
00:13:04,420 --> 00:13:09,520
So if you always only have these two fields in here and you always change the both, you don't need to

155
00:13:09,520 --> 00:13:15,940
copy the existing state, if you ever introduce another piece of data to your state slice here which you

156
00:13:15,940 --> 00:13:20,680
don't change down here however, you need to copy your old state so that you don't lose that additional

157
00:13:20,680 --> 00:13:21,150
data.

158
00:13:21,190 --> 00:13:26,470
Hence here I will leave that copying functionality even though we don't technically need it here but

159
00:13:26,470 --> 00:13:30,750
if we ever should change our state where saved and we don't forget to copy it

160
00:13:31,030 --> 00:13:34,310
and we therefore lose data.

161
00:13:34,330 --> 00:13:36,190
Well, there was a lot of work, with that

162
00:13:36,190 --> 00:13:38,300
we can start dispatching this action

163
00:13:38,320 --> 00:13:42,130
and of course, I want to dispatch it from the product overview and the product detail

164
00:13:42,190 --> 00:13:45,650
because in both screens, I have add to cart buttons.

165
00:13:45,710 --> 00:13:50,890
So let's start on the products overview screen, there to dispatch Redux actions we need to include the use

166
00:13:50,890 --> 00:13:52,380
dispatch hook here,

167
00:13:52,600 --> 00:14:00,880
with that here we can simply get access to this dispatch function by calling use dispatch like this

168
00:14:00,880 --> 00:14:08,410
and now when we click on add to cart down there, we can dispatch our action here

169
00:14:08,410 --> 00:14:13,330
and of course by the way instead of using inline functions here, you could have functions stored in separate

170
00:14:13,480 --> 00:14:15,930
constants inside of your functional component here,

171
00:14:16,090 --> 00:14:24,700
as an alternative, I'll stick to inline functions for now and I will import all my actions here as cart

172
00:14:24,790 --> 00:14:32,080
actions from the store folder and there, the actions folder, the cart file.

173
00:14:32,080 --> 00:14:37,060
Now this is an import syntax which merges all exports from the file together into one object,

174
00:14:37,060 --> 00:14:40,020
we only have one export here

175
00:14:40,030 --> 00:14:42,610
therefore you could also target that specific export,

176
00:14:42,610 --> 00:14:46,630
later we'll have multiple exports and therefore I'll use this approach.

177
00:14:46,630 --> 00:14:49,750
So here, we then dispatch cart action.

178
00:14:49,930 --> 00:14:55,400
add to cart and this is a function we have to execute, this is our action creator function and this as

179
00:14:55,400 --> 00:14:57,050
an argument takes our product,

180
00:14:57,430 --> 00:15:05,270
so in the end here, we have to pass in itemData.item which is just our product here in the product

181
00:15:05,270 --> 00:15:06,330
detail screen.

182
00:15:06,410 --> 00:15:12,850
Therefore we do the exact same thing, we import use dispatch from React Redux,

183
00:15:12,890 --> 00:15:17,560
therefore here we can get access to the dispatch function by calling use dispatch

184
00:15:18,050 --> 00:15:23,990
and then for this button here in the inline function or in a separate named function if you like that,

185
00:15:24,440 --> 00:15:26,330
you can call dispatch,

186
00:15:26,360 --> 00:15:31,490
now we need to import our actions and I'll use the same syntax as before where I import everything as

187
00:15:31,490 --> 00:15:42,190
cart actions from the store folder, the actions folder, the cart file and now cart actions, call add to

188
00:15:42,190 --> 00:15:48,630
cart here and forward the selected product which is our product we want to add to the cart here.

189
00:15:48,820 --> 00:15:54,190
This hopefully dispatches actions such that the item is added to the cart but of course right now we

190
00:15:54,190 --> 00:15:56,040
can't confirm this.

191
00:15:56,110 --> 00:16:04,390
Well actually we can. You can spin up React Native debugger and I haven't used this before but in there, you

192
00:16:04,990 --> 00:16:12,010
can now hit command or control t to open a new tab, then confirm this import here,

193
00:16:15,030 --> 00:16:15,660
and then

194
00:16:19,500 --> 00:16:20,520
go to your apps

195
00:16:23,560 --> 00:16:30,470
and in there, open the debugging menu on iOS with command D, on Android with control or command

196
00:16:30,510 --> 00:16:30,790
M and

197
00:16:35,000 --> 00:16:43,990
click on debug remote Javascript. Now mine opened on Port 19003 actually, so I opened the React Native

198
00:16:43,990 --> 00:16:45,290
debugger on the wrong port,

199
00:16:45,300 --> 00:16:52,120
select me again hit command T or control T in the debugger and choose 19003, use whatever port open

200
00:16:52,120 --> 00:17:00,460
for you in Chrome, click confirm and now this connects to your running React app here in the debugger,

201
00:17:01,210 --> 00:17:05,550
make sure you close your Chrome debugger and then reload your app,

202
00:17:05,590 --> 00:17:09,630
now this should connect here and now not only can you inspect your app here

203
00:17:09,640 --> 00:17:11,310
as I explained it earlier,

204
00:17:11,410 --> 00:17:11,940
no,

205
00:17:11,980 --> 00:17:17,950
you can also have a look at the part up there and that is your Redux debugger,

206
00:17:17,950 --> 00:17:22,200
there you can see what Redux is doing for you.

207
00:17:22,280 --> 00:17:28,620
The only thing you have to do for this to make it work is install a new package with npm install

208
00:17:28,660 --> 00:17:34,160
--save dev because it's a development dependency which we only need during development and there,

209
00:17:34,160 --> 00:17:40,520
install the Redux dev tools extension,

210
00:17:40,650 --> 00:17:44,870
go to your app.js file thereafter and then import

211
00:17:47,350 --> 00:17:50,010
from this Redux

212
00:17:50,010 --> 00:17:56,280
dev tools extension. You can import compose with dev tools from there and

213
00:17:56,300 --> 00:18:00,050
that's a function you pass to create store as a second argument,

214
00:18:00,090 --> 00:18:03,260
you can simply execute it there like this. Now by the way,

215
00:18:03,260 --> 00:18:04,530
this is code, this

216
00:18:04,560 --> 00:18:10,020
import and this usage you should remove before you deploy your app because this is only something that

217
00:18:10,020 --> 00:18:14,160
should be running during development, not in your production app, you need to remove that before you

218
00:18:14,160 --> 00:18:20,580
deploy your app but during development, that is fine. And with that added, if you now save this, you'll actually see

219
00:18:20,580 --> 00:18:26,940
that here in this Redux Inspector, you see an init action being dispatched, you didn't see that before.

220
00:18:26,940 --> 00:18:30,560
That's an action which automatically is dispatched when your app starts.

221
00:18:30,570 --> 00:18:35,670
If I now click on to cart here, you'll also see the add to cart action and

222
00:18:35,670 --> 00:18:41,990
now here, you can view details about that action like the data that was attached to it and about your

223
00:18:41,990 --> 00:18:48,120
state here and there you see for example this is my product state and

224
00:18:48,590 --> 00:18:50,380
where is my cart state?

225
00:18:50,670 --> 00:18:54,840
Well that's of course missing because whilst we have the reducer in the action set up, in the app.js

226
00:18:54,840 --> 00:18:58,660
file, in combined reducers, we're not including the cart state.

227
00:18:58,740 --> 00:19:07,110
So there, let's import the cart reducer from ./StoreReducers/cart and now with that imported,

228
00:19:07,440 --> 00:19:13,890
we can add it to our combined reducers object and now there, we add a cart slice for example, point at

229
00:19:13,890 --> 00:19:20,560
the cart reducer and therefore now this gets included into our Redux store. With that if you now wait for

230
00:19:20,560 --> 00:19:25,830
this to reload and you click on to cart again, now in this add to cart action, under state,

231
00:19:25,830 --> 00:19:30,960
you'll see that now there is a cart slice and now you see there is a total amount, you see there is an

232
00:19:30,990 --> 00:19:35,700
item with the key P1 which is our product with a quantity of 1, that price, the

233
00:19:35,710 --> 00:19:43,900
sum of this and if I now click on to cart a second time here, there is another action dispatched and if

234
00:19:43,900 --> 00:19:48,790
we have a look at the state after this action, we now see, cool

235
00:19:48,790 --> 00:19:52,620
only one item but now with quantity two, product price per item is this

236
00:19:52,630 --> 00:19:54,030
but the sum is this.

237
00:19:54,190 --> 00:19:55,120
This is the shirt,

238
00:19:55,120 --> 00:19:57,760
if I now dispatch the blue carpet as well,

239
00:19:57,760 --> 00:20:02,590
we got to add to cart one more time and there in the state, we now indeed see there are two items

240
00:20:02,590 --> 00:20:04,190
in there, P1 and P2,

241
00:20:04,270 --> 00:20:09,930
P1 is unchanged but P2 was now added and the total amount also looks good to me.

242
00:20:09,940 --> 00:20:16,150
So this seems to work and this is how you can look into your Redux state whilst your app is running without

243
00:20:16,240 --> 00:20:17,140
outputting it here.

244
00:20:17,140 --> 00:20:21,610
Now of course, we also want to output it visually but this is a nice way of looking into your state

245
00:20:21,610 --> 00:20:25,120
behind the scenes with the help of the React Native debugger.

246
00:20:25,120 --> 00:20:30,010
Now we'll close it here because it slows down the app a bit and therefore here in the debug menu, I'll also

247
00:20:30,010 --> 00:20:35,230
stop my remote debugging and close the inspector here entirely.

248
00:20:35,260 --> 00:20:40,660
Also back in the app.js file, I will get rid of the compose with dev tools thing here so

249
00:20:40,660 --> 00:20:42,000
that I don't forget it later

250
00:20:42,070 --> 00:20:47,020
but you can always add this here or leave it here whilst you are developing so that you can look into

251
00:20:47,020 --> 00:20:48,380
your store.

252
00:20:48,460 --> 00:20:51,010
The main takeaway for us here is that this seems to work

253
00:20:51,010 --> 00:20:57,280
and with that working, of course we can now work on adding an action button here to the header and make

254
00:20:57,280 --> 00:21:03,430
sure we can go to the cart page from that or with the help of that action button so that on the cart

255
00:21:03,430 --> 00:21:06,220
page, we can output our cart information.