Jump to content

Pagination on default template need redesign for optimization and efficiency.


leonrak
 Share

Recommended Posts

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.

page1.JPG.f5f9a18b29fc7a0ed2c84a2ba39e6f62.JPG

 

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

gotopage.JPG.98085874bd73ab7eb74c002def823d52.JPG

 

Middle Pages

middlepage.JPG.9f56a0d8c424dbe106aaaa43fc233428.JPG

 

Last Page

lastpage.JPG.6132184b52529c5d0710ea62fa87d7ed.JPG

 

 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...