1
00:00:09,210 --> 00:00:15,720
Hi there, in the previous lesson, we worked on the product details and now we just need to calculate

2
00:00:15,720 --> 00:00:19,410
the price and update the product image.

3
00:00:19,800 --> 00:00:22,320
Let's get started with the price.

4
00:00:22,650 --> 00:00:28,320
So we need to create a new function to calculate the price based on the parameters.

5
00:00:28,680 --> 00:00:33,240
Let's go back to Visual Studio Code and let's create another function here.

6
00:00:36,270 --> 00:00:38,520
And let's call it calculate.

7
00:00:40,050 --> 00:00:40,650
Price.

8
00:00:44,290 --> 00:00:54,190
And then every time we update the order details, we are also going to calculate the price to update

9
00:00:54,220 --> 00:01:00,220
that element for now, I'm just going to execute this function here.

10
00:01:02,830 --> 00:01:09,910
Just so we know if it's working and then when we make sure this is working, then we can change this

11
00:01:09,910 --> 00:01:14,620
a little bit to actually send the price to the element we want.

12
00:01:14,780 --> 00:01:22,870
But for now, as this is inside here, this is going to be executed once on page load because we know

13
00:01:22,870 --> 00:01:24,930
that we are calling this function.

14
00:01:24,940 --> 00:01:26,610
So this is good for now.

15
00:01:27,460 --> 00:01:31,940
So let's see what we need to calculate the price.

16
00:01:32,650 --> 00:01:34,130
Well, let's go up here.

17
00:01:34,270 --> 00:01:39,880
So the first thing we need to do is try to get the unit price.

18
00:01:40,060 --> 00:01:46,600
So for this, we know that we need first the color and then the style.

19
00:01:47,500 --> 00:01:52,930
So we need to go inside products and then the collar, then the style.

20
00:01:54,270 --> 00:01:57,930
So inside here, let's create a variable.

21
00:02:00,340 --> 00:02:02,290
For the unit price.

22
00:02:04,420 --> 00:02:05,560
Which is going to be.

23
00:02:06,710 --> 00:02:07,520
Products.

24
00:02:12,800 --> 00:02:21,050
And then we are going to use the Brace's notation and hear the property we are trying to access.

25
00:02:21,080 --> 00:02:24,020
So first is the color.

26
00:02:25,120 --> 00:02:31,810
So we have search Bagram's dog collar, which is going to return exactly this property.

27
00:02:35,400 --> 00:02:36,990
So we can use it here.

28
00:02:40,150 --> 00:02:45,920
And inside it, so now racist's again inside the collar.

29
00:02:45,940 --> 00:02:52,960
So let's say we are now inside this element now we have properties with the same names as the styles.

30
00:02:54,770 --> 00:03:04,790
So then we just need to use search programs, not style as the order property search programs, dot

31
00:03:05,060 --> 00:03:05,840
style.

32
00:03:07,590 --> 00:03:12,510
And then once we are inside the style we want, so here it is.

33
00:03:14,720 --> 00:03:17,270
We just need to get the unit price.

34
00:03:23,050 --> 00:03:31,640
So here we can use the dot notation, because that's not dynamic, that's the actual name of the property.

35
00:03:31,660 --> 00:03:34,780
So now we have the unit price inside the variable.

36
00:03:35,410 --> 00:03:40,590
Let's send it to the console so we can get started and see if this is working.

37
00:03:42,460 --> 00:03:45,750
So unit price, let's send it to the console.

38
00:03:46,270 --> 00:03:47,480
Let me save this.

39
00:03:48,400 --> 00:03:55,730
So now let's refresh the page and now we're getting nine point forty seven.

40
00:03:56,020 --> 00:03:57,610
Let's see if this is right.

41
00:03:57,620 --> 00:04:02,470
So we have a colored and printed style.

42
00:04:05,590 --> 00:04:13,780
So colored and printed and as you can see, we have the correct price here, which is nine point forty

43
00:04:13,780 --> 00:04:18,640
seven now, we just need to pay attention to the other rules.

44
00:04:18,640 --> 00:04:25,780
So we have a 12 percent increase in case we have a high quality shirt.

45
00:04:25,960 --> 00:04:28,090
So let's do this now.

46
00:04:30,780 --> 00:04:37,710
So now we can start an if statement and we could say that if search programs.

47
00:04:41,940 --> 00:04:50,720
Dot quality, and now let's remember that if we have the high quality, let's see the idea of this element.

48
00:04:51,150 --> 00:04:54,720
So the idea is skew one ninety.

49
00:04:54,930 --> 00:04:59,860
So this is what we are going to have as a value if the high is selected.

50
00:05:00,480 --> 00:05:02,130
So if we have.

51
00:05:05,050 --> 00:05:05,680
This.

52
00:05:07,370 --> 00:05:12,230
Inside the quality parameter, it means that the high quality is selected.

53
00:05:12,470 --> 00:05:17,750
So in this case, we need to add 12 percent to the unit price.

54
00:05:17,760 --> 00:05:19,250
So the way we do this.

55
00:05:20,400 --> 00:05:26,190
It's just I'm going to do the longer version and then let's make it shorter, so unit price is going

56
00:05:26,190 --> 00:05:27,600
to be a unit price.

57
00:05:28,780 --> 00:05:38,200
Times one point twelve, this is how we add 12 percent to something, if you want to add 20 percent,

58
00:05:38,710 --> 00:05:40,210
you can do at one point two.

59
00:05:40,480 --> 00:05:48,400
If you want to add 50 percent, one point five if you want to add five percent is one point zero five.

60
00:05:49,510 --> 00:05:53,560
We want to add 12, so it's one point twelve.

61
00:05:53,590 --> 00:05:55,360
This is just basic math.

62
00:05:55,360 --> 00:06:01,660
And now that we have this, we actually have a shorter way of writing this, just using the incremental

63
00:06:01,660 --> 00:06:04,990
operator using asterisk.

64
00:06:06,370 --> 00:06:07,030
Equal.

65
00:06:08,150 --> 00:06:11,640
And then this is exactly what we had written before.

66
00:06:11,840 --> 00:06:16,700
So if we have the high quality, we are just going to increase the price.

67
00:06:17,000 --> 00:06:17,410
All right.

68
00:06:17,420 --> 00:06:20,090
So now let's calculate the total.

69
00:06:22,100 --> 00:06:25,200
So let's create another variable so total.

70
00:06:25,340 --> 00:06:31,250
So actually, it's not calculate the price, but calculate the total.

71
00:06:38,500 --> 00:06:42,850
I think it's better like this, so now we have a variable called total.

72
00:06:44,260 --> 00:06:46,810
Which is going to be the unit price.

73
00:06:50,730 --> 00:06:58,620
Multiplied by the quantity, so we know we have the quantity inside search programs, not quantity.

74
00:07:06,320 --> 00:07:12,860
Before we go ahead and see if this is working, let's remember that the quantity we have at the moment

75
00:07:12,860 --> 00:07:18,110
is actually a string because we are getting it from an input field.

76
00:07:18,350 --> 00:07:24,530
In this case, since we are starting the operation with a number, JavaScript is going to automatically

77
00:07:24,800 --> 00:07:26,950
convert this into a number.

78
00:07:27,200 --> 00:07:35,060
But if we have the opposite so search programs, not quantity, then the asterisk unit price, this

79
00:07:35,060 --> 00:07:37,910
would result in something unexpected.

80
00:07:39,560 --> 00:07:47,640
So in order to avoid this, let's always convert the quantity to a number before we use it.

81
00:07:47,660 --> 00:07:52,900
So the best way to do this or the best place to do this is here.

82
00:07:53,240 --> 00:07:57,380
So we are getting the value and now we can use the pass.

83
00:07:58,910 --> 00:08:02,960
In this case, it's a quantity so we can use pass int.

84
00:08:06,860 --> 00:08:10,890
Which is going to convert this into an integer.

85
00:08:11,090 --> 00:08:13,490
So by doing this, let's save this.

86
00:08:14,890 --> 00:08:16,480
Let's refresh the page.

87
00:08:19,320 --> 00:08:25,640
Let me just go to the consul so as you can see now, inside a quantity, we already have a number,

88
00:08:25,980 --> 00:08:29,490
so now it's safe to use it in our calculation.

89
00:08:30,460 --> 00:08:32,530
So now we already have a total.

90
00:08:33,770 --> 00:08:37,920
We can send the total to the consul and see if this is working.

91
00:08:38,750 --> 00:08:40,830
We had nine point forty seven.

92
00:08:41,060 --> 00:08:42,710
We have 10 units.

93
00:08:43,010 --> 00:08:49,850
So if we refresh the page now, we have ninety four DOT seven, which is correct.

94
00:08:50,330 --> 00:08:56,240
We are now calculating the price time 10 and we have the total of the order.

95
00:08:56,390 --> 00:09:00,560
Now we just need to get this value and send to this element.

96
00:09:01,520 --> 00:09:11,360
Or before we do that, I think we still need to do something here, so we are already adding 12 percent

97
00:09:11,360 --> 00:09:15,220
for the high quality, but we are not applying the discounts.

98
00:09:15,620 --> 00:09:21,050
So let me just copy this and before we finish this.

99
00:09:30,210 --> 00:09:33,630
Let's create another if statement.

100
00:09:33,930 --> 00:09:38,730
So if the quantity, so search programs, not quantity.

101
00:09:42,430 --> 00:09:44,080
Is higher than or.

102
00:09:45,380 --> 00:09:47,930
Equal to a thousand.

103
00:09:49,210 --> 00:09:50,500
Then the total.

104
00:09:51,590 --> 00:10:00,200
It's going to have a 20 percent discount and again, this is just basic math, how do we reduce a number

105
00:10:00,200 --> 00:10:01,420
by 20 percent?

106
00:10:01,610 --> 00:10:06,620
We just multiply it by zero point eight.

107
00:10:10,920 --> 00:10:11,580
So.

108
00:10:13,200 --> 00:10:15,090
We need to do this or.

109
00:10:16,270 --> 00:10:20,650
Just use the shorter, incremental operator.

110
00:10:22,790 --> 00:10:25,070
Now, let's start in Alice, if.

111
00:10:30,330 --> 00:10:32,400
And now instead of a thousand.

112
00:10:35,450 --> 00:10:37,610
We can do 500.

113
00:10:39,320 --> 00:10:41,600
So in this case, the discount.

114
00:10:45,210 --> 00:10:48,480
It's going to be 12 percent, so.

115
00:10:49,590 --> 00:10:50,390
Eighty eight.

116
00:10:52,300 --> 00:10:54,100
Now, another else, if.

117
00:10:55,490 --> 00:11:03,590
And we also have a discount for greater than 100 in this case, we have a five percent discount, so

118
00:11:03,590 --> 00:11:06,770
we just multiply it by point ninety nine.

119
00:11:06,980 --> 00:11:13,580
So if we have a number greater than one thousand, does it mean that we are going to apply three discount?

120
00:11:13,580 --> 00:11:20,090
Actually, not, because let's remember that when we have if and if statements.

121
00:11:21,140 --> 00:11:27,890
When we have a true value, so let's say it's greater than a thousand, we are going to stop here,

122
00:11:28,010 --> 00:11:33,800
we are going to execute this code and we are not going to continue inside this structure.

123
00:11:33,950 --> 00:11:40,070
If we didn't have the house here, then this would be problematic because we are going to be making

124
00:11:40,070 --> 00:11:43,970
all these tests and applying the discount three times.

125
00:11:44,940 --> 00:11:51,780
But since we are using Aushev, if we go inside here, we are not going to continue testing, so if

126
00:11:51,780 --> 00:11:54,210
it's greater than a thousand, it's going to stop here.

127
00:11:54,600 --> 00:11:58,400
If it's between 500 and 1000, it's going to stop here.

128
00:11:58,800 --> 00:12:04,010
And if it's between a hundred and 500, it's just going to stop here.

129
00:12:04,960 --> 00:12:13,680
Otherwise, we are not going to apply any discount, so by doing this, we already apply the discount.

130
00:12:14,200 --> 00:12:18,220
So now we have the total now instead of sending it to the council.

131
00:12:18,520 --> 00:12:20,560
We can just return.

132
00:12:22,850 --> 00:12:26,000
This value, which is already a number.

133
00:12:28,700 --> 00:12:35,180
All right, so now that we are returning it, we just need to send it to that element.

134
00:12:35,180 --> 00:12:36,500
So let's go back there.

135
00:12:37,980 --> 00:12:39,880
Let's check the idea.

136
00:12:39,890 --> 00:12:45,270
So here we have price, so we have an element with the idea of total price.

137
00:12:53,920 --> 00:12:57,100
So total price, not text.

138
00:13:00,520 --> 00:13:08,950
It's just going to receive this, so let's remember that this function is returning a value so you can

139
00:13:08,950 --> 00:13:16,030
put it directly here, or if you think it's less confusing to have a variable, you can create a variable.

140
00:13:17,050 --> 00:13:19,430
Like order total.

141
00:13:20,380 --> 00:13:28,330
So you know that you are actually calling this function and storing the value here and then you can

142
00:13:28,330 --> 00:13:32,290
just send the order total to the element.

143
00:13:33,940 --> 00:13:36,390
Let's save this, let's see what happens.

144
00:13:38,020 --> 00:13:43,900
All right, so now we have finished this or the details section, we have all the details here, we

145
00:13:43,900 --> 00:13:46,900
also have the total of the order, which is really good.

146
00:13:47,260 --> 00:13:56,190
We still need to form at this price to force two decimal places and to include a thousand separator.

147
00:13:56,200 --> 00:13:59,650
But let's do it later because now we don't even see it.

148
00:13:59,980 --> 00:14:05,530
So after we put the filters to work, we can format the price.

149
00:14:06,610 --> 00:14:14,170
Now, in the next video, let's work on the products photo, which is going to be very easy, so I'll

150
00:14:14,170 --> 00:14:14,800
see you then.