Pagination on default template need redesign for optimization and efficiency.

[leonrak]

Many people use default template, Its a good idea and in benefit of many people to update and make the default template efficient.

Ok here is the standard behavior for an optimized pagination both for mobile and desktop that bring better user experience.

 

 

First Page.

 

When you click on ... , It will let you to go to the page you enter

 

Middle Pages

 

Last Page

 

 

[Tech Support]

Hmmm, why do you ever need to go to page #87 for example?

[Epic]

A good example of why you may want to go to page #87 is if there is an accidental or unexpected browser/tab closure. You can go back exactly where you left off. Or if you're going page by page and come back a day or two later you can start where you left off and go from there. Even if the site added more items since you last visited being able to go back to your last page for reference is useful. 

[leonrak]

7 hours ago, Tech Support said:

Hmmm, why do you ever need to go to page #87 for example?

To see whats on page 87 :D

[Tech Support]

OK guys, we added this feature in theme JS file, you can update it from here: https://www.kvs-demo.com/static/js/main.min.js

Then you can add this code into pagination template to render the needed control:

<li class="page"><input type="number" min="1" max="{{$nav.page_total}}" name="page" size="3" data-action="inputpage" data-pagination-var="{{$pagination_variable|default:"from"}}" data-container-id="{{$block_uid}}_pagination" data-block-id="{{$block_uid}}" data-parameters="{{if $pagination_custom_parameters!=''}}{{$pagination_custom_parameters}};{{/if}}sort_by:{{$sort_by}}"/></li>

The control will update list to the entered page after pressing "Enter" key.

[leonrak]

2 hours ago, Tech Support said:

OK guys, we added this feature in theme JS file, you can update it from here: https://www.kvs-demo.com/static/js/main.min.js

Then you can add this code into pagination template to render the needed control:

<li class="page"><input type="number" min="1" max="{{$nav.page_total}}" name="page" size="3" data-action="inputpage" data-pagination-var="{{$pagination_variable|default:"from"}}" data-container-id="{{$block_uid}}_pagination" data-block-id="{{$block_uid}}" data-parameters="{{if $pagination_custom_parameters!=''}}{{$pagination_custom_parameters}};{{/if}}sort_by:{{$sort_by}}"/></li>

The control will update list to the entered page after pressing "Enter" key.

nice work, But how about mobile devices?

I hope you will include this in next update and your team fix its css issues as well.

[Tech Support]

Mobile devices should also work.

Themes are not updated with KVS updates. We won't put this into initial theme design, as we don't see much use for majority of customers.