Pagination

!This feature is only available for shops using release 3.4 and up, please contact support@myshop.com for information on how to upgrade your shop.

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/5/en/topic/product-list

<div style="myshop-has:previous-page">
        <a style="myshop-action:previous-page" class="myshp_list_navigation_button_next">
                &lt;&lt; 
                <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>
                &gt;&gt;
        </a>
</div>