1
00:00:09,120 --> 00:00:10,750
Hey, everyone, welcome back.

2
00:00:10,830 --> 00:00:17,400
We are almost done with the award, the tail section, the only thing we need to do now is just updating

3
00:00:17,820 --> 00:00:19,280
the product image.

4
00:00:19,410 --> 00:00:24,390
So if we inspect this element, we will see that we already have an image tag.

5
00:00:24,400 --> 00:00:25,910
So we have this ID.

6
00:00:25,920 --> 00:00:28,740
Let's copy this so we can use in the code.

7
00:00:28,980 --> 00:00:33,840
And there's the source of this image, which is just using a blank image.

8
00:00:34,140 --> 00:00:39,270
So all we need to do is just updating this attribute.

9
00:00:39,450 --> 00:00:41,130
So let's go back to the code.

10
00:00:41,490 --> 00:00:50,190
And I think updating the photo could be inside the update or the details function, because after all,

11
00:00:50,190 --> 00:00:51,420
this is what we are doing.

12
00:00:51,540 --> 00:00:54,930
I don't think we need a function just for the photo.

13
00:00:55,230 --> 00:00:58,500
So in this case, we just need to.

14
00:01:03,910 --> 00:01:11,770
Select this element and now we are going to use the attribute method or the 8R.

15
00:01:13,520 --> 00:01:20,690
If we pass just one argument, what we are going to be doing here is just getting it, but if we passed

16
00:01:20,690 --> 00:01:24,050
two arguments, we actually change it.

17
00:01:24,510 --> 00:01:27,290
So let's pass a second argument.

18
00:01:27,560 --> 00:01:32,480
And now what we need to do is just let me go back to the page.

19
00:01:32,660 --> 00:01:36,830
So as you can see, we have a much slash something.

20
00:01:37,100 --> 00:01:38,000
So let's use.

21
00:01:38,880 --> 00:01:47,340
IMG slash something, and for now, let's see what we have inside our images folder, so I'm just going

22
00:01:47,340 --> 00:01:48,360
to open it here.

23
00:01:50,510 --> 00:01:55,700
So here we have the IMG folder, so we have some photos inside here.

24
00:01:57,980 --> 00:02:03,040
Let's try to get the V color dot j p g.

25
00:02:05,390 --> 00:02:15,110
So as you can see, we have this photo here, so vivid color that GPG, let's just use this to see what

26
00:02:15,110 --> 00:02:15,820
happens.

27
00:02:16,890 --> 00:02:24,360
Now refreshing the page, we can see that now we were able to send this image here, which is good.

28
00:02:24,840 --> 00:02:29,020
So now what we need to do is just getting the image dynamically.

29
00:02:29,130 --> 00:02:32,580
So this is going to be a bit similar to what we've done with the price.

30
00:02:32,760 --> 00:02:34,830
So let me just copy this.

31
00:02:42,020 --> 00:02:49,130
So now we need to get inside products and using the search programs and then instead of going into the

32
00:02:49,160 --> 00:02:55,220
let me just close this here to the left now, just instead of getting the unit price, we need to get

33
00:02:55,370 --> 00:02:57,650
a property called photo.

34
00:03:04,610 --> 00:03:10,400
So here, instead of the unit price, we need to get the photo, so now we already have a string with

35
00:03:10,400 --> 00:03:11,720
the name of the photo.

36
00:03:12,770 --> 00:03:20,420
The name of the variable is not unit price, let's use photo you, Lorelle, and now we can concatenate

37
00:03:20,420 --> 00:03:24,730
it down here or we can concatenate it when we create the variable.

38
00:03:24,740 --> 00:03:26,090
I prefer to do it here.

39
00:03:26,450 --> 00:03:28,100
So we are going to.

40
00:03:29,250 --> 00:03:30,180
Get this.

41
00:03:31,530 --> 00:03:32,430
Prefix.

42
00:03:33,880 --> 00:03:42,490
Which is the images folder, then we're going to concatenate with the filename that we have inside our

43
00:03:42,490 --> 00:03:43,160
object.

44
00:03:43,390 --> 00:03:45,340
So here we have the file names.

45
00:03:46,350 --> 00:03:53,320
And now we already have what we need inside this variable, so we just need to use it here.

46
00:03:53,370 --> 00:03:54,370
Let's save this.

47
00:03:54,600 --> 00:03:55,820
Let's see what happens.

48
00:03:56,860 --> 00:04:05,200
All right, so now we are showing the correct photo because the filters are set to colored and printed,

49
00:04:05,650 --> 00:04:08,180
which is exactly what we are showing here.

50
00:04:08,230 --> 00:04:10,270
So this part is also done.

51
00:04:10,510 --> 00:04:16,930
And now our job is going to be really easy because we just need to set some events to these filters,

52
00:04:16,930 --> 00:04:24,220
because every time they change, we just have to update the search parameters and then update the information

53
00:04:24,220 --> 00:04:24,830
again.

54
00:04:25,090 --> 00:04:30,560
So since we created functions for everything, this is going to be pretty easy to do.

55
00:04:30,610 --> 00:04:32,500
We don't need to repeat any code.

56
00:04:32,500 --> 00:04:34,930
We just need to call the functions again.

57
00:04:35,200 --> 00:04:38,170
So this is what we are going to start doing in the next video.

58
00:04:38,380 --> 00:04:39,190
I'll see you then.