1
00:00:00,610 --> 00:00:06,120
And once we have our page buttons Next we would want to set up next and brief page buttons.

2
00:00:06,230 --> 00:00:10,100
So there are gonna be displayed on each side of the page buttons.

3
00:00:10,250 --> 00:00:15,250
And then if we want to navigate through a next page course we're going to click on The Next Page button.

4
00:00:15,380 --> 00:00:17,910
It would want to navigate to a brief Page button.

5
00:00:18,020 --> 00:00:19,660
Then of course you guessed it.

6
00:00:19,670 --> 00:00:22,900
We're gonna have to click on preview page button.

7
00:00:22,970 --> 00:00:26,970
Since I was lazy I use the same functionality and the way it's gonna work.

8
00:00:26,970 --> 00:00:32,120
We're gonna head back to our project then we're going to look for the page product.

9
00:00:32,280 --> 00:00:34,720
Notice so we have the product list.

10
00:00:34,910 --> 00:00:37,600
Then I'm checking for certain length.

11
00:00:37,700 --> 00:00:41,010
And then within a certain length I have my article.

12
00:00:41,150 --> 00:00:42,860
And then within the article.

13
00:00:42,860 --> 00:00:48,230
Course I have my expression where I'm looping over my array and then for each and every page that I

14
00:00:48,230 --> 00:00:50,430
have I am displaying the page.

15
00:00:50,480 --> 00:00:56,370
So before the expression after the expression we're going to set up our preview and next button.

16
00:00:56,480 --> 00:01:01,270
And notice how we already have the comments for that and the way it's going to work is first we're going

17
00:01:01,260 --> 00:01:06,160
to have to import some icons from the font awesome and go with import.

18
00:01:06,170 --> 00:01:15,250
Now the icon names are going to be F A then angle double the left and then the same thing just double

19
00:01:15,260 --> 00:01:16,020
right.

20
00:01:16,040 --> 00:01:19,350
So F.A. angle double.

21
00:01:19,660 --> 00:01:20,340
Right.

22
00:01:20,790 --> 00:01:25,250
And then that is coming from reactor icons and then forward slash F.A..

23
00:01:25,610 --> 00:01:30,840
Once we have import both of the icons then we're going to set up our buttons where we have the preview.

24
00:01:30,900 --> 00:01:32,300
Okay that's good.

25
00:01:32,330 --> 00:01:38,780
Then let's look for our button so button then on the button we're gonna go with the class name class

26
00:01:38,780 --> 00:01:48,540
name is gonna be prefab Page button so prefab hyphen page hyphen beat in and then we're gonna place

27
00:01:48,600 --> 00:01:50,810
our angled double left.

28
00:01:50,880 --> 00:01:53,670
So let's go with FAA angle.

29
00:01:53,670 --> 00:01:57,060
Double left that is of course for a previous page.

30
00:01:57,060 --> 00:01:59,460
And also we're gonna do the same thing for the next one.

31
00:01:59,730 --> 00:02:04,490
So this is gonna be our previous page and we're going to do the same thing for the next one.

32
00:02:04,650 --> 00:02:06,680
Cause the icon is gonna be a bit different.

33
00:02:06,750 --> 00:02:08,550
That is going to be double.

34
00:02:08,550 --> 00:02:08,940
All right.

35
00:02:09,270 --> 00:02:12,940
So what do we have the comment as on proof Page button.

36
00:02:12,940 --> 00:02:16,680
He is going to become next page button and double left.

37
00:02:16,680 --> 00:02:18,710
He is going to become double.

38
00:02:18,710 --> 00:02:19,400
All right.

39
00:02:19,420 --> 00:02:25,740
And like I said I wanted to save on the functionality where within the product context we already have

40
00:02:25,740 --> 00:02:26,870
the change page.

41
00:02:26,910 --> 00:02:27,630
Correct.

42
00:02:27,630 --> 00:02:33,290
Where we're just grabbing the index and then we're using a set page function to change the index.

43
00:02:33,380 --> 00:02:38,060
And that is of course how we're accessing the different item in our array of arrays.

44
00:02:38,130 --> 00:02:40,530
And that's why we're displaying the next page.

45
00:02:40,530 --> 00:02:44,610
And what I would want right now is where we have the page buttons.

46
00:02:44,610 --> 00:02:50,280
Again we're going to set up on click or we're going to go with on click vine.

47
00:02:50,280 --> 00:02:52,270
We're going to pass in our function.

48
00:02:52,270 --> 00:02:56,220
So let's set up the expression VLAN function.

49
00:02:56,280 --> 00:03:01,200
And again we're gonna go with set page function or I'm sorry change bridge.

50
00:03:01,290 --> 00:03:02,130
That was the name.

51
00:03:02,200 --> 00:03:08,550
So we had changed branch but instead of passing the index since I would want to show the previous page

52
00:03:08,550 --> 00:03:14,550
what I'm going to do where I'm going to go with page so wherever the page number is right now minus

53
00:03:14,550 --> 00:03:20,130
one that's gonna be for my previous page and you can probably already tell that the functionality is

54
00:03:20,130 --> 00:03:22,880
gonna be almost the same for the next page button.

55
00:03:22,920 --> 00:03:27,030
The difference of course is gonna be I'm going to check whatever page I have.

56
00:03:27,260 --> 00:03:29,300
And then we're gonna add one.

57
00:03:29,370 --> 00:03:32,730
So let's grab our on click.

58
00:03:32,740 --> 00:03:35,620
And I didn't copy and paste correctly.

59
00:03:35,670 --> 00:03:41,730
Let me grab on click again the same button copy and paste the difference of course is gonna be that

60
00:03:41,790 --> 00:03:45,280
we're not going to be subtracting one we're gonna be adding 1.

61
00:03:45,360 --> 00:03:48,660
And once we save our functionality is going to work or there's gonna be one.

62
00:03:48,660 --> 00:03:49,400
Gotcha.

63
00:03:49,440 --> 00:03:56,880
So if we had a bigger screen I can start clicking You can say nicely our items are displayed I can press

64
00:03:56,910 --> 00:04:02,610
on next button of course I'm showing the next page I can press on preview button and then I'm displaying

65
00:04:02,610 --> 00:04:03,460
the previous page.

66
00:04:03,830 --> 00:04:10,230
But what happens if I get to the beginning of the array or at the end of the array let's check it out

67
00:04:10,620 --> 00:04:16,050
if I'm going to try to access the page that is before 1 notice is gonna say Well unfortunately your

68
00:04:16,050 --> 00:04:23,160
search did not return any product why that is happening because essentially we're gonna have page zero.

69
00:04:23,390 --> 00:04:25,870
All right we're gonna go with minus one.

70
00:04:25,920 --> 00:04:32,630
So what happens within the product context then we're passing in the index that is actually below whatever

71
00:04:32,680 --> 00:04:38,160
index is I have in my right or it is gonna be bigger where I'm checking for the index number three and

72
00:04:38,160 --> 00:04:42,750
then in fact I'm getting like index number I don't know four or five or whatever.

73
00:04:42,750 --> 00:04:48,000
And in order to fix that we could technically set up the functionality here where I'm checking for the

74
00:04:48,000 --> 00:04:55,600
index or we can just display the button when in fact the functionality is gonna work out is that going

75
00:04:55,600 --> 00:04:58,290
to look like well if I'm gonna head back to page products.

76
00:04:58,500 --> 00:05:00,590
Notice how we can set up the condition.

77
00:05:00,880 --> 00:05:06,080
So I'm already displaying the buttons only if there's more than one page.

78
00:05:06,210 --> 00:05:09,700
So if there's one page while I'm not displaying the buttons at all.

79
00:05:09,720 --> 00:05:14,960
So the same thing I can do for my preview and next buttons and the way it's going to look like I'm going

80
00:05:14,960 --> 00:05:23,370
to say if page value is bigger than zero only display the priest button if in fact the page value is

81
00:05:23,370 --> 00:05:24,690
gonna be equal to zero.

82
00:05:24,750 --> 00:05:28,770
She's gonna be page number one then we simply are not going to display the button.

83
00:05:28,800 --> 00:05:30,480
Let me grab my button.

84
00:05:30,480 --> 00:05:32,820
Cut it out and then I'm going to set up.

85
00:05:32,820 --> 00:05:38,940
And so if I'm on the first page because for the first page of course the value would be zero then I'm

86
00:05:38,940 --> 00:05:45,570
not going to display the previous button a mulligan displayed once I have my value for a page is bigger

87
00:05:45,570 --> 00:05:46,370
than zero.

88
00:05:46,460 --> 00:05:51,690
That would be of course patient and brutal two or three and four and so on.

89
00:05:51,690 --> 00:05:58,260
And same thing we're gonna do for our next button because of course once we get to the end of the array.

90
00:05:58,320 --> 00:06:01,920
Well I wouldn't want to just keep on adding the indexes correct.

91
00:06:01,920 --> 00:06:02,990
I wouldn't want to say all right.

92
00:06:03,000 --> 00:06:08,790
So page plus one because I'm gonna be trying to access index that does not exist and we're gonna do

93
00:06:08,790 --> 00:06:14,100
very similar condition where again we're gonna have a button and then this time condition is gonna be

94
00:06:14,100 --> 00:06:19,750
if Page is a less than sorted length minus one.

95
00:06:19,800 --> 00:06:25,490
So we know that the length is gonna be in our case for us then minus one is gonna give it a three.

96
00:06:25,560 --> 00:06:32,000
And in this case what I'm saying is if page value which by the way is eventually going to be three.

97
00:06:32,010 --> 00:06:39,570
So once we reached the last page in our case one we have four pages then this value is of course not

98
00:06:39,570 --> 00:06:42,940
going to be small and sought in length minus one.

99
00:06:43,050 --> 00:06:45,460
And of course we're not going to display the button.

100
00:06:45,460 --> 00:06:52,490
So I'm going to use the end operator then I'm going to grab my button let's cut it out and let's copy

101
00:06:52,490 --> 00:06:56,230
and paste and then of course once we reach the last page.

102
00:06:56,440 --> 00:07:01,600
Notice how our button is not going to be displayed again if you don't like this kind of functionality

103
00:07:01,960 --> 00:07:04,420
where essentially we're just hiding the buttons.

104
00:07:04,540 --> 00:07:09,520
Of course you can head back to products context and setup the functionality where you're checking.

105
00:07:09,520 --> 00:07:10,090
OK.

106
00:07:10,240 --> 00:07:17,680
So if the index value that I'm getting is bigger than the biggest index or smaller than the actual zero

107
00:07:17,680 --> 00:07:19,840
index then of course I'm going to do something else.

108
00:07:19,840 --> 00:07:26,950
You can definitely do it this way but I just decided to in fact hide the buttons when in fact the functionality

109
00:07:26,950 --> 00:07:27,790
wouldn't work.

110
00:07:27,850 --> 00:07:31,510
So if I let's say I reached the last page I'm going to say all right.

111
00:07:31,540 --> 00:07:33,380
So let's head to the next page.

112
00:07:33,400 --> 00:07:34,690
In fact we're just gonna hide the button.

113
00:07:34,720 --> 00:07:35,370
I'm going to say right.

114
00:07:35,410 --> 00:07:36,370
So hide the button.

115
00:07:36,550 --> 00:07:38,080
Then we can navigate back.

116
00:07:38,200 --> 00:07:43,060
And then if we are on the page number one course there is no previous page.

117
00:07:43,150 --> 00:07:44,550
So we just hide the button.

118
00:07:44,570 --> 00:07:45,460
That's all we're doing.