Pagination
It is possible to include custom pagination in order to show the amount of available pages, and enable direct navigation to those pagenumbers.
The image below shows how such a pagination might look:
How it works
- The pagination works based on the following principles:
- It shows all pages up till a max of five, so: 1 | 2 | 3 | 4 | 5
- When there are more then five pages, it shows first 5 and last: 1 | 2 | 3 | 4 | 5 … 10
- When the current page is higher then five, it shows the first page and a middle section with three pages: 1 … 5 | 6 | 7 … 15
- When showing the last page, it shows the last five and first page: 1 … | 6 | 7 | 8 | 9 | 10
- When the current page is not the first page, the previous button is available.
- When the current page is not the last page, the next button is available.
Available extensions
The pagination exists of the following set of myshop extensions which can be used to show the navigational buttons (previous/next) and show the individual page numbers appropriate for the current page:
- myshop-has:pagina
This extension allows to evaluates if this pagination is active in the shop. - myshop-repeat:page-links
This extension repeats the element and its content, in accordance with the available pages corresponding to the productlist selection active at the moment. By default a max of 5 page’s numbers are visible. - myshop-is:page-link-separator
There is a default ammount of page’s numbers visible. It is possible to add a separator in order to indicate that there are more pages. This extension evaluates if the content corresponds to the separator. - myshop-not-is:page-link-separator
This extension evaluates if the content corresponds to a page, this is, not the separator. - myshop-is:page-link-active
This extension allows to identify the active page. - myshop-action:page-link
This extension loads dynamically the link to the corresponding page. - myshop-label:page-link-number
This extension loads the dynamic number of the corresponding page. - myshop-not-is:page-link-active
This extension allows to identify the non active pages.
Example
The following code can be used to show the pagination in the” productlist template.”:https://www.manula.com/manuals/myshop/platform/1/en/topic/product-list
<div style="myshop-has:previous-page">
<a style="myshop-action:previous-page" class="myshp_list_navigation_button_next">
<<
<span style="myshop-resource:prev">
Vorige
</span>
</a>
</div>
<span style="myshop-has:pagina">
<div class="myshp_list_pagination">
<ul>
<li style="myshop-repeat:page-links">
<span style="myshop-is:page-link-separator"> <span class="myshp_list_pagination_item_separator">...</span> </span>
<span style="myshop-not-is:page-link-separator">
<span style="myshop-is:page-link-active">
<a style="myshop-action:page-link" class="myshp_list_pagination_item_active">
<span>
<span style="myshop-label:page-link-number"></span>
</span>
</a>
</span>
<span style="myshop-not-is:page-link-active">
<a style="myshop-action:page-link" >
<span style="myshop-label:page-link-number"></span>
</a>
</span>
</span>
</li>
</ul>
</div>
</span>
<div style="myshop-has:next-page">
<a style="myshop-action:next-page" class="myshp_list_navigation_button_prev">
<span style="myshop-resource:next">
Volgende
</span>
>>
</a>
</div>
Post your comment on this topic.