1
00:00:02,090 --> 00:00:03,500
Now, what do we need to do here

2
00:00:03,500 --> 00:00:05,890
when it comes to updating the dom?

3
00:00:05,890 --> 00:00:08,160
Well, of course, in the cart item,

4
00:00:08,160 --> 00:00:12,820
we want to update the total price of the product here

5
00:00:12,820 --> 00:00:15,940
because that changes with the quantity.

6
00:00:15,940 --> 00:00:19,130
And on the overall cart, we want to update the total price

7
00:00:19,130 --> 00:00:21,310
that's shown at the bottom.

8
00:00:21,310 --> 00:00:24,190
In the navigation bar we also want to update this badge,

9
00:00:24,190 --> 00:00:25,023
of course.

10
00:00:27,550 --> 00:00:30,160
Now to update the total price for a single product,

11
00:00:30,160 --> 00:00:34,930
conveniently, I'll wrap this price into a span so that I can

12
00:00:34,930 --> 00:00:37,430
select this span in my JavaScript code,

13
00:00:37,430 --> 00:00:41,033
and then change the text content off it with JavaScript.

14
00:00:41,970 --> 00:00:46,970
And I'll give this a class of cart item total,

15
00:00:47,380 --> 00:00:51,830
or a cart item price, whatever you want.

16
00:00:51,830 --> 00:00:56,270
So that we can use this to identify the span,

17
00:00:56,270 --> 00:00:59,313
which we want to update with the updated price.

18
00:01:01,010 --> 00:01:04,780
If we have a look at the cart controller.

19
00:01:04,780 --> 00:01:06,230
For update cart item,

20
00:01:06,230 --> 00:01:09,720
we see that we return the updated cart data property,

21
00:01:09,720 --> 00:01:13,210
which holds a nested object with the new total quantity,

22
00:01:13,210 --> 00:01:17,000
the new you total the price, and the updated item price.

23
00:01:17,000 --> 00:01:19,490
So these are all the data pieces that we need

24
00:01:19,490 --> 00:01:20,773
for updating the dom.

25
00:01:21,610 --> 00:01:24,150
Hence, here in cart item management,

26
00:01:24,150 --> 00:01:26,520
we now need to get access to the different pieces

27
00:01:26,520 --> 00:01:27,853
that you want to update.

28
00:01:28,920 --> 00:01:30,400
And that, for example,

29
00:01:30,400 --> 00:01:34,903
starts with the cart item total price.

30
00:01:35,810 --> 00:01:37,800
Here, I'll select the element

31
00:01:37,800 --> 00:01:40,040
for this cart item total price.

32
00:01:40,040 --> 00:01:44,370
And that of course is this span, which I added a second ago.

33
00:01:44,370 --> 00:01:46,340
To get access to this span,

34
00:01:46,340 --> 00:01:48,943
we can have a look at cart item EJS again.

35
00:01:49,810 --> 00:01:52,940
And we see that it's this span, in this cart item,

36
00:01:52,940 --> 00:01:54,393
which belongs to this form.

37
00:01:55,360 --> 00:01:59,310
So what we could do is, since we got access to this form,

38
00:01:59,310 --> 00:02:02,040
in our front-end JavaScript code,

39
00:02:02,040 --> 00:02:04,510
we could go to the parent element of this form,

40
00:02:04,510 --> 00:02:09,509
which has this article, and then there search for the item

41
00:02:09,710 --> 00:02:11,723
with this cart item price class.

42
00:02:12,650 --> 00:02:15,240
This would give us access to this span.

43
00:02:15,240 --> 00:02:17,870
And whilst it is only one possible way of doing this,

44
00:02:17,870 --> 00:02:20,440
it is the way I will choose here.

45
00:02:20,440 --> 00:02:25,270
So here, I will get access to this element by using my form

46
00:02:25,270 --> 00:02:28,610
and then the parent element of that form,

47
00:02:28,610 --> 00:02:30,510
which is the article.

48
00:02:30,510 --> 00:02:33,630
And then there we can call query selector.

49
00:02:33,630 --> 00:02:36,900
We can not just call this on the overall document,

50
00:02:36,900 --> 00:02:39,770
but on any dom element to search deeper

51
00:02:39,770 --> 00:02:41,990
into that dom element.

52
00:02:41,990 --> 00:02:44,900
And here I'm calling it on the article dom element to

53
00:02:44,900 --> 00:02:46,650
which our form belongs,

54
00:02:46,650 --> 00:02:48,820
to then find the first matching item

55
00:02:48,820 --> 00:02:51,653
with the cart item price, CSS class.

56
00:02:53,150 --> 00:02:56,440
And that should then be the item which I want to update.

57
00:02:56,440 --> 00:03:00,530
So I'll update this cart item total price element,

58
00:03:00,530 --> 00:03:05,530
and set its text content equal to response data.

59
00:03:05,830 --> 00:03:09,610
And then there, if we have a look at cart controller,

60
00:03:09,610 --> 00:03:12,793
it's the updated item price I'm interested in.

61
00:03:15,040 --> 00:03:17,090
So I'll set this equal here,

62
00:03:17,090 --> 00:03:19,690
and I will also call to fixed two here,

63
00:03:19,690 --> 00:03:24,403
to make sure that we always set this to two decimal places.

64
00:03:26,810 --> 00:03:29,170
Now we also need to update the cart total.

65
00:03:29,170 --> 00:03:31,880
So, the cart total price element is

66
00:03:31,880 --> 00:03:33,803
another element we're interested in.

67
00:03:34,810 --> 00:03:36,800
And we can get access to that

68
00:03:36,800 --> 00:03:40,100
if we have a look at cart EJS by simply looking

69
00:03:40,100 --> 00:03:42,860
for the id cart total on the page,

70
00:03:42,860 --> 00:03:47,350
and then the first element child in there is our paragraph,

71
00:03:47,350 --> 00:03:49,343
where we want to set a new price.

72
00:03:50,390 --> 00:03:52,740
So we can look for cart total.

73
00:03:52,740 --> 00:03:55,630
And we can also wrap this into a span here,

74
00:03:55,630 --> 00:03:59,350
so that we can easily select just the price.

75
00:03:59,350 --> 00:04:03,720
By giving this span an id of cart - total price,

76
00:04:03,720 --> 00:04:04,693
for example.

77
00:04:06,440 --> 00:04:09,570
So, that's now my total price and we can select this id,

78
00:04:09,570 --> 00:04:14,500
of course, in our cart item management JS file.

79
00:04:14,500 --> 00:04:18,880
In there, I can use document get element by id

80
00:04:19,930 --> 00:04:22,280
and select the cart total price id element,

81
00:04:22,280 --> 00:04:25,970
which is that span that wraps the cart total price.

82
00:04:25,970 --> 00:04:26,880
And we then just set

83
00:04:26,880 --> 00:04:31,592
cart total price element.text content equal to.

84
00:04:31,592 --> 00:04:33,920
And then again if we have a look at the card controller,

85
00:04:33,920 --> 00:04:35,830
it's this new total price,

86
00:04:35,830 --> 00:04:38,763
which is that new cart total price I'm interested in.

87
00:04:39,980 --> 00:04:43,680
So that's what I access on my response data like this.

88
00:04:43,680 --> 00:04:46,290
And again, I call to fixed two here

89
00:04:46,290 --> 00:04:48,553
to force two decimal places.

90
00:04:51,070 --> 00:04:51,970
Last, but not least,

91
00:04:51,970 --> 00:04:55,060
I want to update the badge here in the navigation area.

92
00:04:55,060 --> 00:04:59,640
And for this, we can get the card badge again

93
00:04:59,640 --> 00:05:03,340
by using document query selector, nav items.

94
00:05:05,400 --> 00:05:08,583
So this clause, and then the badge in there.

95
00:05:10,360 --> 00:05:11,700
In case you're not sure about this,

96
00:05:11,700 --> 00:05:14,380
you can again have a look at the header,

97
00:05:14,380 --> 00:05:15,990
I mean, at the nav items

98
00:05:15,990 --> 00:05:18,770
and there you find that we have the class nav items

99
00:05:18,770 --> 00:05:21,430
on the unordered list and in there this span with

100
00:05:21,430 --> 00:05:23,863
the class badge, which is our cart badge.

101
00:05:25,680 --> 00:05:29,130
So with that, we select this item here once we need it.

102
00:05:29,130 --> 00:05:32,260
And then I said, cart badge.text content equal

103
00:05:32,260 --> 00:05:34,183
to response data.

104
00:05:35,500 --> 00:05:37,520
And if we have a look at the cart controller,

105
00:05:37,520 --> 00:05:41,080
that's not a new total quantity we're interested in here.

106
00:05:41,080 --> 00:05:43,493
So that's the value we want to set here.

107
00:05:46,010 --> 00:05:47,170
Now, unlike earlier,

108
00:05:47,170 --> 00:05:49,830
here I'm just selecting the items when I need them,

109
00:05:49,830 --> 00:05:51,800
instead of selecting them right at the beginning

110
00:05:51,800 --> 00:05:54,310
of the script file, either way works.

111
00:05:54,310 --> 00:05:56,200
Here I'm just doing it just in time,

112
00:05:56,200 --> 00:05:59,157
because some these elements, specifically this element,

113
00:05:59,157 --> 00:06:03,870
depends on the exact form for which the event was caused.

114
00:06:03,870 --> 00:06:05,070
The other elements,

115
00:06:05,070 --> 00:06:07,400
which exist only once on the page anyways,

116
00:06:07,400 --> 00:06:09,080
could have been selected before

117
00:06:09,080 --> 00:06:11,840
at the beginning of this page. This would have been fine.

118
00:06:11,840 --> 00:06:13,233
Either approach works.

119
00:06:14,340 --> 00:06:17,330
The difference simply is that if this runs more often,

120
00:06:17,330 --> 00:06:19,720
if it's inside the function, as it's currently,

121
00:06:19,720 --> 00:06:21,410
we run this code and search

122
00:06:21,410 --> 00:06:24,690
for this element every time the function executes.

123
00:06:24,690 --> 00:06:26,340
If it's at the beginning of the file,

124
00:06:26,340 --> 00:06:29,410
we only do this once when the file loads.

125
00:06:29,410 --> 00:06:30,243
And therefor,

126
00:06:30,243 --> 00:06:33,370
I will actually move these general selectors,

127
00:06:33,370 --> 00:06:35,760
for the cart total price element,

128
00:06:35,760 --> 00:06:39,770
and for the cart badge up to the beginning of the file,

129
00:06:39,770 --> 00:06:43,840
so that we only run this once at most and not unnecessarily

130
00:06:43,840 --> 00:06:46,070
every time we update our item.

131
00:06:46,070 --> 00:06:48,820
But it wouldn't be horrible if you do it the other way.

132
00:06:51,330 --> 00:06:53,890
With that, however, we added a bunch of logic.

133
00:06:53,890 --> 00:06:56,950
Let's see whether this now works.

134
00:06:56,950 --> 00:06:58,610
For this, I'll also open a console

135
00:06:58,610 --> 00:07:01,160
to see potential error messages.

136
00:07:01,160 --> 00:07:04,080
And then here, I want to change this first cart item

137
00:07:04,080 --> 00:07:05,263
to a quantity of two.

138
00:07:06,230 --> 00:07:09,373
If I click update I get an error.

139
00:07:10,990 --> 00:07:15,900
And I get an error here because product is not defined

140
00:07:15,900 --> 00:07:19,210
inside of the update item method.

141
00:07:19,210 --> 00:07:22,410
So let's have a look at the cart model,

142
00:07:22,410 --> 00:07:26,980
which is where we have this method. And there,

143
00:07:26,980 --> 00:07:31,020
the problem is that I'm somewhere accessing product

144
00:07:31,020 --> 00:07:33,783
where I don't have a product, as it seems,

145
00:07:36,330 --> 00:07:40,713
in line 40 in the cart model EJS file.

146
00:07:41,860 --> 00:07:45,090
Just JavaScript, not EJS.

147
00:07:45,090 --> 00:07:47,800
Yeah. Here, product price. That of course is wrong.

148
00:07:47,800 --> 00:07:51,370
It should be item.product.price.

149
00:07:51,370 --> 00:07:53,853
The same as true down here in line 44.

150
00:07:55,840 --> 00:08:00,380
Okay, if we save this and reload.

151
00:08:00,380 --> 00:08:04,480
If I now set this to two, now I get an error,

152
00:08:04,480 --> 00:08:08,090
cannot read property to fixed of undefined.

153
00:08:08,090 --> 00:08:10,250
If I reload, however, we see it worked.

154
00:08:10,250 --> 00:08:12,993
It just wasn't updated in the dom correctly.

155
00:08:14,510 --> 00:08:17,170
Now let's see why that failed.

156
00:08:17,170 --> 00:08:18,070
And for this, I'll go

157
00:08:18,070 --> 00:08:22,360
to my cart item management front-end JavaScript code,

158
00:08:22,360 --> 00:08:25,750
where one of these two fixed calls failed.

159
00:08:25,750 --> 00:08:28,960
And here I want to console log the response data to see

160
00:08:28,960 --> 00:08:32,039
if there is something wrong with the response data,

161
00:08:32,039 --> 00:08:34,283
or something that would explain that error.

162
00:08:35,870 --> 00:08:39,480
If I reload now and I changed this to free again,

163
00:08:39,480 --> 00:08:41,600
this is my response data here,

164
00:08:41,600 --> 00:08:46,600
and we see the updated cart data with the new quantity.

165
00:08:47,230 --> 00:08:50,010
Oh yeah. Because updated item price

166
00:08:50,010 --> 00:08:54,130
and new total price are not directly in the response data.

167
00:08:54,130 --> 00:08:56,510
Neither is new total quantity.

168
00:08:56,510 --> 00:08:59,380
They are nested in the updated cart data,

169
00:08:59,380 --> 00:09:01,053
property and object, here.

170
00:09:02,120 --> 00:09:06,090
So, we should access response data.updated cart data

171
00:09:06,090 --> 00:09:10,100
in all three places so that we dive into this nested object

172
00:09:10,100 --> 00:09:13,123
and we extract the updated data there.

173
00:09:15,570 --> 00:09:19,760
With that, if I reload and set this to two now,

174
00:09:19,760 --> 00:09:21,110
this now looks better.

175
00:09:21,110 --> 00:09:24,843
This updates, this updated, and the total price updated.

176
00:09:25,750 --> 00:09:30,750
And if I set this to zero now, then it's kind of removed

177
00:09:30,850 --> 00:09:33,320
but only really if I reload.

178
00:09:33,320 --> 00:09:36,400
Of course, we also need to add logic for this case,

179
00:09:36,400 --> 00:09:39,460
that we really remove item by setting the quantity

180
00:09:39,460 --> 00:09:41,513
to zero or a negative number.

181
00:09:42,610 --> 00:09:45,440
For this, back here in cart item management,

182
00:09:45,440 --> 00:09:48,640
instead of console logging the response data,

183
00:09:48,640 --> 00:09:52,160
I actually want to check if response data,

184
00:09:52,160 --> 00:09:57,160
updated cart data, updated item price is equal to zero.

185
00:09:58,380 --> 00:10:01,520
Which of course means that the item was removed entirely,

186
00:10:01,520 --> 00:10:05,480
because we have a price of zero for this item now.

187
00:10:05,480 --> 00:10:09,840
You can see this, if I update this to zero,

188
00:10:09,840 --> 00:10:13,210
in the response data we have updated item price

189
00:10:13,210 --> 00:10:14,653
of zero in this case.

190
00:10:15,590 --> 00:10:19,360
In that case, I want to get the parent element of my form,

191
00:10:19,360 --> 00:10:22,570
which is this article that wraps the form

192
00:10:22,570 --> 00:10:25,010
and get the parent element of that,

193
00:10:25,010 --> 00:10:27,730
which is to list item that wraps the article,

194
00:10:27,730 --> 00:10:30,990
so now I'm talking about this list item,

195
00:10:30,990 --> 00:10:33,780
which wraps to single cart item.

196
00:10:33,780 --> 00:10:37,200
I get access to that by using parent element twice.

197
00:10:37,200 --> 00:10:39,253
And I simply want to remove that now.

198
00:10:41,330 --> 00:10:45,083
Therefor we also only want to update the price

199
00:10:45,083 --> 00:10:47,090
for the item if it's still there

200
00:10:47,090 --> 00:10:50,650
and that will then happen in this else block therefore.

201
00:10:50,650 --> 00:10:53,130
If we removed it, this would fail

202
00:10:53,130 --> 00:10:55,600
and updating what fail most importantly.

203
00:10:55,600 --> 00:10:58,070
So therefor, I moved these two steps into the else block

204
00:10:58,070 --> 00:10:59,710
so that we only performed them

205
00:10:59,710 --> 00:11:02,350
if the cart item is still there.

206
00:11:02,350 --> 00:11:04,960
Otherwise we remove it and we then just continue

207
00:11:04,960 --> 00:11:08,283
by updating the cart total and the new total quantity.

208
00:11:09,350 --> 00:11:11,370
With that, if we go back

209
00:11:11,370 --> 00:11:14,683
and we start adding more products to the cart.

210
00:11:17,530 --> 00:11:21,830
Here we are. If I now update this, this works,

211
00:11:21,830 --> 00:11:25,223
but if I set this to zero, this now was removed.

212
00:11:27,280 --> 00:11:30,410
And now with that, we can now update the cart correctly.

213
00:11:30,410 --> 00:11:34,140
We can add items to the cart, as many as we want.

214
00:11:34,140 --> 00:11:37,690
And of course, then as soon as we did add items to the cart,

215
00:11:37,690 --> 00:11:39,940
we can also manage to cart here.

216
00:11:39,940 --> 00:11:44,120
And add more cart items by increasing the number of here,

217
00:11:44,120 --> 00:11:46,530
or of course remove items if you want to,

218
00:11:46,530 --> 00:11:50,980
or just reduce the amount of items. That is all possible.

219
00:11:50,980 --> 00:11:54,410
And that's the finished cart logic for now.

220
00:11:54,410 --> 00:11:57,750
Now I want to make sure that this buy products button is

221
00:11:57,750 --> 00:12:00,380
only visible if we can buy products.

222
00:12:00,380 --> 00:12:02,640
So if we are logged in,

223
00:12:02,640 --> 00:12:06,550
because whilst a cart should be accessible to all visitors,

224
00:12:06,550 --> 00:12:09,110
buying products and checking out the cart

225
00:12:09,110 --> 00:12:12,520
should only be possible for logged in visitors.

226
00:12:12,520 --> 00:12:15,090
And then once we did buy the products,

227
00:12:15,090 --> 00:12:17,690
I, of course, want to have an orders page

228
00:12:17,690 --> 00:12:20,370
where we can view all the past orders

229
00:12:20,370 --> 00:12:22,610
and their current status.

230
00:12:22,610 --> 00:12:24,580
And then the administration area.

231
00:12:24,580 --> 00:12:28,110
We want an area where we can administrate these orders,

232
00:12:28,110 --> 00:12:30,653
where we can see them and change their status.