And once we have our page buttons Next we would want to set up next and brief page buttons.
So there are gonna be displayed on each side of the page buttons.
And then if we want to navigate through a next page course we're going to click on The Next Page button.
It would want to navigate to a brief Page button.
Then of course you guessed it.
We're gonna have to click on preview page button.
Since I was lazy I use the same functionality and the way it's gonna work.
We're gonna head back to our project then we're going to look for the page product.
Notice so we have the product list.
Then I'm checking for certain length.
And then within a certain length I have my article.
And then within the article.
Course I have my expression where I'm looping over my array and then for each and every page that I
have I am displaying the page.
So before the expression after the expression we're going to set up our preview and next button.
And notice how we already have the comments for that and the way it's going to work is first we're going
to have to import some icons from the font awesome and go with import.
Now the icon names are going to be F A then angle double the left and then the same thing just double
right.
So F.A. angle double.
Right.
And then that is coming from reactor icons and then forward slash F.A..
Once we have import both of the icons then we're going to set up our buttons where we have the preview.
Okay that's good.
Then let's look for our button so button then on the button we're gonna go with the class name class
name is gonna be prefab Page button so prefab hyphen page hyphen beat in and then we're gonna place
our angled double left.
So let's go with FAA angle.
Double left that is of course for a previous page.
And also we're gonna do the same thing for the next one.
So this is gonna be our previous page and we're going to do the same thing for the next one.
Cause the icon is gonna be a bit different.
That is going to be double.
All right.
So what do we have the comment as on proof Page button.
He is going to become next page button and double left.
He is going to become double.
All right.
And like I said I wanted to save on the functionality where within the product context we already have
the change page.
Correct.
Where we're just grabbing the index and then we're using a set page function to change the index.
And that is of course how we're accessing the different item in our array of arrays.
And that's why we're displaying the next page.
And what I would want right now is where we have the page buttons.
Again we're going to set up on click or we're going to go with on click vine.
We're going to pass in our function.
So let's set up the expression VLAN function.
And again we're gonna go with set page function or I'm sorry change bridge.
That was the name.
So we had changed branch but instead of passing the index since I would want to show the previous page
what I'm going to do where I'm going to go with page so wherever the page number is right now minus
one that's gonna be for my previous page and you can probably already tell that the functionality is
gonna be almost the same for the next page button.
The difference of course is gonna be I'm going to check whatever page I have.
And then we're gonna add one.
So let's grab our on click.
And I didn't copy and paste correctly.
Let me grab on click again the same button copy and paste the difference of course is gonna be that
we're not going to be subtracting one we're gonna be adding 1.
And once we save our functionality is going to work or there's gonna be one.
Gotcha.
So if we had a bigger screen I can start clicking You can say nicely our items are displayed I can press
on next button of course I'm showing the next page I can press on preview button and then I'm displaying
the previous page.
But what happens if I get to the beginning of the array or at the end of the array let's check it out
if I'm going to try to access the page that is before 1 notice is gonna say Well unfortunately your
search did not return any product why that is happening because essentially we're gonna have page zero.
All right we're gonna go with minus one.
So what happens within the product context then we're passing in the index that is actually below whatever
index is I have in my right or it is gonna be bigger where I'm checking for the index number three and
then in fact I'm getting like index number I don't know four or five or whatever.
And in order to fix that we could technically set up the functionality here where I'm checking for the
index or we can just display the button when in fact the functionality is gonna work out is that going
to look like well if I'm gonna head back to page products.
Notice how we can set up the condition.
So I'm already displaying the buttons only if there's more than one page.
So if there's one page while I'm not displaying the buttons at all.
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
to say if page value is bigger than zero only display the priest button if in fact the page value is
gonna be equal to zero.
She's gonna be page number one then we simply are not going to display the button.
Let me grab my button.
Cut it out and then I'm going to set up.
And so if I'm on the first page because for the first page of course the value would be zero then I'm
not going to display the previous button a mulligan displayed once I have my value for a page is bigger
than zero.
That would be of course patient and brutal two or three and four and so on.
And same thing we're gonna do for our next button because of course once we get to the end of the array.
Well I wouldn't want to just keep on adding the indexes correct.
I wouldn't want to say all right.
So page plus one because I'm gonna be trying to access index that does not exist and we're gonna do
very similar condition where again we're gonna have a button and then this time condition is gonna be
if Page is a less than sorted length minus one.
So we know that the length is gonna be in our case for us then minus one is gonna give it a three.
And in this case what I'm saying is if page value which by the way is eventually going to be three.
So once we reached the last page in our case one we have four pages then this value is of course not
going to be small and sought in length minus one.
And of course we're not going to display the button.
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
and paste and then of course once we reach the last page.
Notice how our button is not going to be displayed again if you don't like this kind of functionality
where essentially we're just hiding the buttons.
Of course you can head back to products context and setup the functionality where you're checking.
OK.
So if the index value that I'm getting is bigger than the biggest index or smaller than the actual zero
index then of course I'm going to do something else.
You can definitely do it this way but I just decided to in fact hide the buttons when in fact the functionality
wouldn't work.
So if I let's say I reached the last page I'm going to say all right.
So let's head to the next page.
In fact we're just gonna hide the button.
I'm going to say right.
So hide the button.
Then we can navigate back.
And then if we are on the page number one course there is no previous page.
So we just hide the button.
That's all we're doing.