1
00:00:09,120 --> 00:00:10,860
Hi there and welcome back.

2
00:00:10,860 --> 00:00:16,920
In the previous video, we already made some progress here, we were able to get all the selected values

3
00:00:16,920 --> 00:00:17,940
from the filters.

4
00:00:18,120 --> 00:00:25,290
And now in the next few videos, we are going to update the product image, the order details and the

5
00:00:25,290 --> 00:00:26,490
final price.

6
00:00:26,700 --> 00:00:29,640
So let's get started with the order details.

7
00:00:29,650 --> 00:00:32,910
Let's inspect these elements to see how they are.

8
00:00:33,100 --> 00:00:38,960
If you go inside here, you will see that I already laughed a span with some ideas for you.

9
00:00:39,240 --> 00:00:43,100
So the first one is result dash style.

10
00:00:43,620 --> 00:00:46,200
I already got the IDs of these elements.

11
00:00:46,200 --> 00:00:50,640
You can go inside each of them to see or go to the HTML file.

12
00:00:50,940 --> 00:00:54,120
I already got them and I have them right here.

13
00:00:54,450 --> 00:01:00,630
So I need to send those values to these elements so I can fill the order details.

14
00:01:01,170 --> 00:01:08,190
So for this, we are also going to create a function so we can we use it later, because when we change

15
00:01:08,190 --> 00:01:12,590
any of the filters, we are going to update the order details.

16
00:01:12,630 --> 00:01:15,960
So let's create another function called update.

17
00:01:17,510 --> 00:01:18,170
Order.

18
00:01:20,630 --> 00:01:21,500
Details.

19
00:01:23,880 --> 00:01:27,900
So what we need to do here when we go inside this function.

20
00:01:29,150 --> 00:01:32,510
It's just selecting each of these elements and.

21
00:01:33,820 --> 00:01:39,340
Just putting some value inside their HDMI out, so using Jay Quarrie.

22
00:01:40,740 --> 00:01:42,110
We can do it like this.

23
00:01:43,750 --> 00:01:46,660
Dot h dumble.

24
00:01:51,460 --> 00:01:55,570
And then we can do the same thing for the others, so for the quality.

25
00:02:02,410 --> 00:02:04,900
For the quantity and for the color.

26
00:02:07,720 --> 00:02:14,400
All right, so every time we update the parameters, it is a good idea to update the order details.

27
00:02:14,920 --> 00:02:20,980
So instead of sending the value to the console or if you want to keep it and delete it later, that's

28
00:02:20,980 --> 00:02:21,390
fine.

29
00:02:21,940 --> 00:02:28,120
But besides sending the values to the console, every time we update the parameters, we can also update

30
00:02:28,120 --> 00:02:32,470
the order details right after so we can do it like this.

31
00:02:33,380 --> 00:02:39,670
So every time we run this function at the end, we are also going to update the details pretty good.

32
00:02:39,700 --> 00:02:46,270
Now, let's just before we send the actual values, because we are going to need to do a little trick

33
00:02:46,270 --> 00:02:47,430
to get these values.

34
00:02:47,440 --> 00:02:50,790
So before we do this, let's just do some tests.

35
00:02:51,340 --> 00:02:57,280
So I'm just going to write like test one, two, three, four, just so we can see if the functions

36
00:02:57,280 --> 00:02:58,120
are working.

37
00:02:58,420 --> 00:03:00,730
I think this is a very good practice.

38
00:03:00,940 --> 00:03:08,800
So you don't get lost if you write a lot of code and when you test it doesn't work, it's harder for

39
00:03:08,800 --> 00:03:11,280
you to spot where you made the mistake.

40
00:03:11,650 --> 00:03:14,120
So let's do this step by step.

41
00:03:14,650 --> 00:03:16,990
So what's going to happen when we load the page?

42
00:03:17,170 --> 00:03:20,500
We are going to run this function, update programs.

43
00:03:21,010 --> 00:03:27,460
So we are going to update the parameters based on the filters, send this to the console so we can see.

44
00:03:27,740 --> 00:03:31,370
And at the end, we are going to update the order details.

45
00:03:31,930 --> 00:03:37,390
So if everything is right here, we are going to see these text.

46
00:03:38,480 --> 00:03:41,420
In the order details, so let's save this.

47
00:03:42,590 --> 00:03:43,910
Refresh the page.

48
00:03:45,170 --> 00:03:51,530
So as you can see, this seems to be working well, so now what we need to do is instead of sending

49
00:03:51,530 --> 00:03:56,490
these test values, we send the actual values inside.

50
00:03:56,750 --> 00:04:05,210
So now, based on what we have inside the search forums, variable, how do we go to this, to the actual

51
00:04:05,210 --> 00:04:06,550
text inside?

52
00:04:06,890 --> 00:04:08,840
So let's start with the quality.

53
00:04:08,870 --> 00:04:16,610
This is a better example to get started, because in the quality, we we don't have this basic 150 G's.

54
00:04:17,210 --> 00:04:21,860
We just have this value, this Q 150.

55
00:04:21,860 --> 00:04:24,890
So how do we turn this into the text?

56
00:04:25,130 --> 00:04:28,480
Because here this is the order details for the customer.

57
00:04:28,640 --> 00:04:31,100
We can't send a code here.

58
00:04:31,100 --> 00:04:33,490
We can't send you one fifty.

59
00:04:34,100 --> 00:04:40,880
We need to send the actual text for the quality, the same text that's inside the filter.

60
00:04:40,890 --> 00:04:47,480
So if you want, you can use that selected thing that we just did in the previous video.

61
00:04:47,660 --> 00:04:56,510
But I think it's better to use what's actually inside our search parameter because this way, this variable

62
00:04:56,750 --> 00:04:59,440
is always going to be the source.

63
00:04:59,450 --> 00:05:03,460
So we calculate the price and update the details.

64
00:05:03,470 --> 00:05:03,830
All right.

65
00:05:03,840 --> 00:05:06,800
So how do we go from this into the text?

66
00:05:07,070 --> 00:05:15,890
If we inspect this element, you will see that I already used those values as the ID of the elements.

67
00:05:15,890 --> 00:05:25,130
So here I have an element with an idea of Q one fifty and one with Q one ninety, which is good because

68
00:05:25,130 --> 00:05:27,140
if I use J Querrey.

69
00:05:28,020 --> 00:05:34,260
And I select an element with an idea of Q one 50.

70
00:05:35,870 --> 00:05:37,550
And I get its text.

71
00:05:39,250 --> 00:05:46,180
You can see that this is exactly what we need to send to the order details, so we are going to use

72
00:05:46,180 --> 00:05:51,930
this value as a selector to get the text from the element.

73
00:05:52,270 --> 00:05:55,360
But how do we do this if we don't have the hash tag?

74
00:05:55,570 --> 00:06:00,600
Well, this is pretty simple because we know that we can concatenate strings.

75
00:06:00,820 --> 00:06:04,750
So if I create a variable, so let's say quality.

76
00:06:07,330 --> 00:06:14,500
Heidi, and this ferryboat is going to concatenate a hash tag with that string.

77
00:06:18,920 --> 00:06:22,420
Right, if we do this, what do we have inside here?

78
00:06:24,030 --> 00:06:27,300
It's exactly the selecter we want, so here.

79
00:06:28,280 --> 00:06:37,730
Instead of typing the selector ourselves, we can just use the quality ID because if we do this, if

80
00:06:37,730 --> 00:06:41,390
it changes to Q one 90, this is going to be dynamic.

81
00:06:41,700 --> 00:06:46,000
Instead of getting you one 50, it's just going to get you one 90.

82
00:06:46,400 --> 00:06:52,430
And as you can see, by doing this, we're able to get the exact text we want.

83
00:06:52,550 --> 00:06:57,830
So these are the little tricks that I told you that we haven't talked about yet.

84
00:06:58,010 --> 00:07:02,180
This is why it was going to be a bit hard for you to do this on your own.

85
00:07:02,180 --> 00:07:07,250
But still, this is something that it's very easy to research and find a way of doing this.

86
00:07:07,250 --> 00:07:10,570
And this is actually not the only way of solving this problem.

87
00:07:10,580 --> 00:07:17,780
Like I said, if you just want to go directly to the element and just get the one that has the selected

88
00:07:17,780 --> 00:07:20,780
class and get the text, that's fine as well.

89
00:07:20,960 --> 00:07:26,620
I just think it's better to use this variable as our source of information.

90
00:07:27,650 --> 00:07:30,140
So now that we know we can do this.

91
00:07:31,590 --> 00:07:38,910
Let's go back to Visual Studio Code and let's get started with the quality so we can see if we.

92
00:07:40,050 --> 00:07:41,120
Can make it right.

93
00:07:42,930 --> 00:07:50,570
So let's create a variable called exactly what we just did, so quality ID is just going to be a hash

94
00:07:50,580 --> 00:07:52,320
tag plus.

95
00:07:53,440 --> 00:07:56,800
What's inside the search programs that quality?

96
00:08:00,530 --> 00:08:05,600
And now what we're going to send to this element, it's just going to be.

97
00:08:07,340 --> 00:08:11,360
That exact selecter that we just formed here.

98
00:08:12,540 --> 00:08:15,450
And we are going to get its text.

99
00:08:16,460 --> 00:08:20,170
So let's do this, let's see if this part is working.

100
00:08:21,550 --> 00:08:27,820
So as you can see, the quality is already done, so we can do the same thing for the color.

101
00:08:29,220 --> 00:08:30,420
So let's go back there.

102
00:08:31,610 --> 00:08:36,710
Split the collar here, we can actually copy all this instead.

103
00:08:38,390 --> 00:08:46,040
And now it's going to be search programs that color, then we're going to do the same thing and the

104
00:08:46,040 --> 00:08:48,200
element is result color.

105
00:08:51,930 --> 00:08:57,060
Here is caller ID, so it's a new variable.

106
00:08:58,010 --> 00:09:00,650
And we are going to use it as a selecter.

107
00:09:05,240 --> 00:09:07,670
All right, let's see if this is working.

108
00:09:07,820 --> 00:09:13,820
I'm going to refresh the page and now, as you can see, we have colored and why is this working?

109
00:09:14,000 --> 00:09:18,350
Again, this is because I use those IDs for the element.

110
00:09:18,530 --> 00:09:20,380
So I have colored here.

111
00:09:20,540 --> 00:09:26,490
And if you go inside this element, you will see that the ID is also colored.

112
00:09:26,510 --> 00:09:28,480
So this is why this works.

113
00:09:28,970 --> 00:09:33,020
So now we just need to update style and quantity.

114
00:09:33,350 --> 00:09:37,810
The quantity is actually very simple because we already have the value.

115
00:09:37,820 --> 00:09:39,770
We don't need to get any text.

116
00:09:39,770 --> 00:09:43,440
We just need to send the value to this element.

117
00:09:43,730 --> 00:09:46,450
So this is really easy to do.

118
00:09:46,640 --> 00:09:48,320
Let's just get the quantity here.

119
00:09:51,170 --> 00:09:53,420
And instead of sending test.

120
00:09:54,620 --> 00:09:57,680
We can just send Serge Bram's.

121
00:09:59,280 --> 00:09:59,970
Dot.

122
00:10:02,050 --> 00:10:02,590
Quantity.

123
00:10:03,660 --> 00:10:10,800
Let's save this, let's refresh the page and see what happens, and now we already have the quantity

124
00:10:10,800 --> 00:10:14,220
done, so we just need to do the style.

125
00:10:15,460 --> 00:10:18,760
So this is going to be a bit different because we have.

126
00:10:19,750 --> 00:10:25,970
A select box here, so let me get the idea of this element, which is style.

127
00:10:26,320 --> 00:10:28,270
Now going back to the console.

128
00:10:28,540 --> 00:10:36,370
So let's start by selecting the parent element, which is the select box that has the idea of style.

129
00:10:36,790 --> 00:10:39,490
And inside it, we have option elements.

130
00:10:39,760 --> 00:10:45,190
So option, you know, how do we get just the option we want?

131
00:10:45,520 --> 00:10:52,360
So if we go inside it, we can see that we have an option with a value of printed.

132
00:10:52,810 --> 00:10:56,830
So inside this option, there is the text that we want.

133
00:10:57,160 --> 00:11:04,870
You might be thinking, wow, it's much easier to just get the value we already have and maybe just

134
00:11:04,870 --> 00:11:07,540
capitalize it so we can use it.

135
00:11:07,540 --> 00:11:14,860
But let's think about a website that has many languages like French, German, Chinese and so on.

136
00:11:15,160 --> 00:11:23,320
Probably we will always have the same value, but the text inside here is going to change so better

137
00:11:23,320 --> 00:11:27,600
than just getting the value and just capitalizing the first letter.

138
00:11:27,910 --> 00:11:34,210
The best thing is to get the actual text that we have inside the option.

139
00:11:34,600 --> 00:11:37,210
So how do we select the option by its value?

140
00:11:37,450 --> 00:11:39,610
Well, that's very easy to do.

141
00:11:40,390 --> 00:11:43,800
It's just a basic success selector.

142
00:11:43,930 --> 00:11:52,450
We can just use Brace's and when we use Brace's, we can select an element using any attribute we want.

143
00:11:52,600 --> 00:11:55,530
In this case, the attribute is value.

144
00:11:55,960 --> 00:12:00,640
So let's try to select an option that has a value of printed.

145
00:12:05,140 --> 00:12:12,160
Let's see if we can find something, as you can see, we found an element here now instead of just getting

146
00:12:12,160 --> 00:12:14,470
it, let's try to get its text.

147
00:12:14,980 --> 00:12:21,660
So as you can see, by doing this, we are able to get the exact text for that option.

148
00:12:21,850 --> 00:12:27,980
So let's just copy this, because this is the selector that we are going to have to form.

149
00:12:28,000 --> 00:12:33,490
Now, going back to Visual Studio Code now, the last one is the style.

150
00:12:35,100 --> 00:12:42,990
So, again, I'm going to create a variable for the style this time is not just the ID but the selector,

151
00:12:43,320 --> 00:12:46,650
so I'm going to name it style selector.

152
00:12:50,270 --> 00:12:57,560
This is what we need to have, so I'm just going to put it inside quotation marks, so this is like

153
00:12:57,560 --> 00:13:04,900
the end result, but instead of typing printed, we just want to get the value dynamically.

154
00:13:05,240 --> 00:13:08,590
So I'm going to close this string here.

155
00:13:09,200 --> 00:13:15,190
I'm going to concatenate with something and then I'm going to concatenate with the end of it.

156
00:13:15,200 --> 00:13:21,230
So in the middle here, what we are going to do is just get search parameters.

157
00:13:25,100 --> 00:13:25,730
That.

158
00:13:27,960 --> 00:13:28,650
Style.

159
00:13:31,280 --> 00:13:37,670
So before going ahead, just so you don't get confused, let's see why are we doing this?

160
00:13:37,850 --> 00:13:39,750
Let's send this to the council.

161
00:13:39,950 --> 00:13:44,390
So what are exactly we doing with this selecter?

162
00:13:46,970 --> 00:13:49,540
Let's send this to the council and check it out.

163
00:13:51,360 --> 00:13:59,440
So this is what we did, we are just forming that CSF selecter that we need to pass to Jake Wari.

164
00:13:59,610 --> 00:14:05,610
So by doing this, if printed is selected, then we get the value of printed here.

165
00:14:05,880 --> 00:14:10,170
But if plane is selected, then we are going to have the exact same thing.

166
00:14:10,410 --> 00:14:12,200
But with plane here.

167
00:14:12,510 --> 00:14:16,200
So this is how we select elements dynamically.

168
00:14:16,530 --> 00:14:23,160
And when we change these values, you will see why it's very important to do this, because everything

169
00:14:23,160 --> 00:14:27,240
is going to be working without us having to do anything else.

170
00:14:28,200 --> 00:14:31,440
So going back there, now that we know what we have here.

171
00:14:38,310 --> 00:14:41,670
We can just do the same thing we did up there.

172
00:14:43,010 --> 00:14:45,410
But instead of using the caller ID.

173
00:14:47,410 --> 00:14:51,010
We can use The Selecter we just created.

174
00:14:57,990 --> 00:15:05,520
So refreshing the page now we can see that the order details are done, so when we first load the page,

175
00:15:05,850 --> 00:15:12,820
we get all the information from the filters and we update the order details.

176
00:15:12,830 --> 00:15:18,990
So here we have the right style, quality, color and quantity.

177
00:15:20,290 --> 00:15:21,850
So far, so good.

178
00:15:21,880 --> 00:15:30,460
Now, to finish with the order details, we need to get these values and use it to calculate the price

179
00:15:30,460 --> 00:15:33,330
and then show the price down here.

180
00:15:33,730 --> 00:15:36,460
This is what we are going to do in the next video.

181
00:15:36,710 --> 00:15:37,530
I'll see you then.