Jump to content
taotoo

Reorder pagination

Recommended Posts

Is it possible to change the pagination order, from:

< 123456 >

to:

< 561234 >

The exact number which the pagination would start on would need to be the current pagination page (pageNum, I believe).

It's actually the 'next page' arrow at the end that I need to modify, but it's easier to show what I'm getting at with the page numbers.

Longer version:

I have product pages which show a single product. Beneath the single product, I want to show a grid of other products.

I want to show all products that follow the current product first, then maybe have a horizontal line and show all the products previous to the current one. This is so that the visitor doesn't have to scroll past a bunch of products that they've probably already scrolled past shortly before, while still allowing them to see all the products if they want to. 

The grid will use infinite scroll, which does it's thing based on the link on the 'next page' pagination item.

edit: the products are manually sorted in the backend.

Share this post


Link to post
Share on other sites
1 hour ago, taotoo said:

561234

To take the last element of a WireArray and put it at the beginning, you can do this:

$products->prepend($products->pop());

To get only pages after the current product, you can do this:

$products = $pages->find("sort>{$page->sort}")

Maybe post some of your code?

Share this post


Link to post
Share on other sites
2 hours ago, Jan Romero said:

To take the last element of a WireArray and put it at the beginning, you can do this:


$products->prepend($products->pop());

To get only pages after the current product, you can do this:


$products = $pages->find("sort>{$page->sort}")

Maybe post some of your code?

Thank you. I'd like to apply your first line of code to the pagination links, but not sure how.

Here are (hopefully) the relevant parts of the code:

<?php $posts = $pages->find("parent.template=adopt, limit=4, sort=sort"); ?>



<?php $pagination = $posts->renderPager(array(
	'nextLinkMarkup' => "<a class='page-link next' href='{url}#more-dogs'><span>{out}</span></a>"
	));?>
	
	

<div class="row infinite-container" data-infinite-scroll='{ "path": ".next"}'>

	<?php foreach ($posts as $post): ?>

		<div class="col-lg-3 infinite-post">
			
			[ ]
			
		</div>
			
	<?php endforeach; ?>
		
		
		
<?php echo $pagination; ?>

 

Share this post


Link to post
Share on other sites
On 4/14/2020 at 3:16 PM, taotoo said:

< 123456 >

to:

< 561234 >

This is what it should look like on page 4, I assume? I’m not sure this will be possible with a single call to renderPager(). MAYBE you’ll be better off just rolling the pagination markup yourself.

For example you could do this:

$totalPages = ceil($posts->getTotal() / $posts->getLimit());

for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}
for ($i = 1; $i <= $input->pageNum; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}

Mostly you’ll need to look out for the href attribute, i.e. my code throws away any GET variables and uses the default pagination prefix “page”. Also you don’t get any of the niceties ProcessWire gives you by default. If you rely on those, maybe use renderPager() and rearrange the generated Markup. Both options are pretty hackish. You’ll have to choose which one is the least pain in the butt for your system…

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)
8 hours ago, Jan Romero said:

This is what it should look like on page 4, I assume?

 I think ideally the current pagination page would appear first, so while on page 4 it would look like < 456123 >, with "4" being non-clickable.

8 hours ago, Jan Romero said:

 


$totalPages = ceil($posts->getTotal() / $posts->getLimit());

for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}
for ($i = 1; $i <= $input->pageNum; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}

Mostly you’ll need to look out for the href attribute, i.e. my code throws away any GET variables and uses the default pagination prefix “page”. Also you don’t get any of the niceties ProcessWire gives you by default. If you rely on those, maybe use renderPager() and rearrange the generated Markup. Both options are pretty hackish. You’ll have to choose which one is the least pain in the butt for your system…

This code looks great, thank you!

The infinite scroll that I'm using gets the next page from the ">" link rather than from the page number links themselves. How would I create a next page link that reflects the new order? I'm looking at your code but I don't have any experience of for loops, and limited experience of the ++ thing!

Edit: I added this line before the first for loop to add in the current page:

echo "<li>{$input->pageNum}</li>";

And added "- 1" into the below to end it one page earlier:

for ($i = 1; $i
<=
$input->pageNum - 1; $i++)

But I'm struggling to create the next page link that infinite scroll needs.

Edited by taotoo

Share this post


Link to post
Share on other sites

Unfortunately it appears that reordering the pagination pages won't work as the infinite scroll script only ever reads the initial link, and assumes that all further page numbers will increase sequentially.

So I'm trying to slice the actual pages instead:

<!--Get all dogs-->
<?php $data = $pages->find("parent.template=adopt, sort=sort"); ?>

<!--Get current pagination page dogs and all later pagination page(s) dogs-->
<?php $data1 = $data->slice((($input->pageNum * 4) - 4),100); ?>

<!--Get previous pagination page(s) dogs-->
<?php $data2 = $data->slice(0, (($input->pageNum * 4) - 4)); ?>

<!--Merge and set limit for pagination-->
<?php $posts = $pages->find("id=$data1|$data2, limit=4"); ?>

This seems to work, however while the two groups come in the order that I want, the manual order of individual items isn't respected (it's using date created or similar instead), e.g:

23 21 24 22    4 1 3 2

If I add "sort=sort" to the last line, the manual order of individual items is respected, but the two groups unfortunately also respect that order, e.g.

1 2 3 4   21 22 23 24

What I actually want is:

21 22 23 24   1 2 3 4

Share this post


Link to post
Share on other sites

In the end I went back to trying to reorder the pagination pages, and I only needed to add Jan's code like this:

<?php $totalPages = ceil($posts->getTotal() / $posts->getLimit()); ?>

	<script>
		var nextPages = [<?php
				for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
				{
					echo "'page{$i}',";
				}
				for ($i = 1; $i <= $input->pageNum -1; $i++)
				{
					echo "'page{$i}',";}?>];

	</script>

And then set infinite scroll's options like this:

	<script>
		$('.infinite-container').infiniteScroll({
			path: function() {
				if (this.loadCount < <?php echo $totalPages; ?>) {
					return nextPages[this.loadCount];
				}
			}
		});
	</script>

So thank you Jan!

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...