pagination

The pagination macro is used to render a pagination for a list of items, for example products list or articles list.

Definition

{% pagination(list, options) %}

Input parameters

list

A list that a pagination renders for. It can have any list type, for example ProductsList or BlogArticlesList. Usually we get this data from Object API.

options

object type parameter that consists of following fields:

Option key	Type	Default	Required	Description
options.id	string	""	yes	Unique id of the pagination input
options.name	string	""	yes	Name of the pagination input
options.hasFirstPageButton	boolean	false	no	If set to true, a button directing to a first page will be rendered
options.prevPageButtonOptions	object	null	no	Object of configuration options for the previous page button
options.nextPageButtonOptions	object	null	no	Object of configuration options for the next page button
options.hasLastPageButton	boolean	false	no	If set to true, a button directing to a last page will be rendered
options.classNames	boolean	false	no	List of classes that will be added to the main pagination element

options.prevPageButtonOptions

object represents an object of configuration options for the previous page button

Option key	Type	Default	Required	Description
options.prevPageButtonOptions.hasPrevPageButton	boolean	false	no	If set to true the previous page button will be rendered
options.prevPageButtonOptions.prevButtonText	string	""	no	Additional text visible on a previous page button

options.nextPageButtonOptions

object represents an object of configuration options for the next page button

Option key	Type	Default	Required	Description
options.nextPageButtonOptions.hasNextPageButton	boolean	false	no	If set to true the next page button will be rendered
options.nextPageButtonOptions.nextButtonText	string	""	no	Additional text visible on a next page button

Example

In this example we render a basic pagination for the articles list with previous and next page buttons. To get the articles list we use a method from Object Api getBlogArticles().

{% from "@macros/pagination.twig" import pagination %}

{% set blogArticlesList = ObjectApi.getBlogArticles() %}

{{ pagination(blogArticlesList, {
    prevPageButtonOptions: {
        hasPrevPageButton: true
    },
    nextPageButtonOptions: {
        hasNextPageButton: true
    }
}) }}

Example

In this example we render a pagination for the products list with all the buttons. To get the products list we use a method from Object Api getProducts().

{% from "@macros/pagination.twig" import pagination %}

{% set productList = ObjectApi.getProducts() %}

{{ pagination(productList, {
    hasFirstPageButton: true,
    prevPageButtonOptions: {
        hasPrevPageButton: true
    },
    nextPageButtonOptions: {
        hasNextPageButton: true
    },
    hasLastPageButton: true
}) }}

Example

In this example we render a pagination for the products list with only next and previous page buttons with additional custom texts. To get the products list we use a method from Object Api getProducts().

{% from "@macros/pagination.twig" import pagination %}

{% set productList = ObjectApi.getProducts() %}

{{ pagination(productList, {
    prevPageButtonOptions: {
        hasPrevPageButton: true,
        prevButtonText: 'Previous page'
    },
    nextPageButtonOptions: {
        hasNextPageButton: true,
        nextButtonText: 'Next page'
    }
}) }}

Macro source code

{% macro pagination(list, options) %}
    {% from "@macros/pagination_button.twig" import pagination_button %}
    {% from "@macros/input.twig" import input %}

    <div class="pagination {{ options.classNames|join(' ') }}">
        {% if options.hasFirstPageButton %}
            {{
                pagination_button(
                    {
                        href: ObjectApi.getUrl().forPage(1),
                        isPrev: true,
                        isBoundaried: true
                    },
                    {
                        iconName: 'icon-chevrons-left'
                    }
                )
            }}
        {% endif %}


        {% if options.prevPageButtonOptions.hasPrevPageButton %}
            {{
                pagination_button(
                    {
                        href: ObjectApi.getUrl().forPage(list.page - 1),
                        isPrev: true,
                        buttonTextRight: options.prevPageButtonOptions.prevButtonText
                    },
                    {
                        iconName: 'icon-chevron-left'
                    }
                )
            }}
        {% endif %}

        <div class="pagination__page-selector">
            <label class="pagination__page-selector-text" for="pagination-page-number-{{ options.id }}">
                {{ translate('Page') }}
            </label>
            <pagination-page-number pagination-url="{{ ObjectApi.getUrl().forPage(1) }}" current-page="{{ list.page }}" on-interaction>
                <div class="control">
                    <div class="control__content">
                        <div class="control__element">
                            {{
                                input({
                                    type: 'number',
                                    name: "pagination-page-number-#{options.name}",
                                    id: "pagination-page-number-#{options.id}",
                                    value: list.page,
                                    classList: ['input_xs', 'input_text-center', 'input_no-arrows']
                                })
                            }}
                        </div>
                    </div>
                </div>
            </pagination-page-number>
            <span class="pagination__page-selector-text">{{ translate('out of') }} {{ list.pages }}</span>
        </div>

        {% if options.nextPageButtonOptions.hasNextPageButton %}
            {{
                pagination_button(
                    {
                        href: ObjectApi.getUrl().forPage(list.page + 1),
                        isNext: true,
                        buttonTextLeft: options.nextPageButtonOptions.nextButtonText
                    },
                    {
                        iconName: 'icon-chevron-right'
                    }
                )
            }}
        {% endif %}

        {% if options.hasLastPageButton %}
            {{
                pagination_button(
                    {
                        href: ObjectApi.getUrl().forPage(list.pages),
                        isNext: true,
                        isBoundaried: true
                    },
                    {
                        iconName: 'icon-chevrons-right'
                    }
                )
            }}
        {% endif %}
    </div>
{% endmacro %}

Webcomponents reference

• pagination-page-number

Object Api methods reference

• getUrl()
• getBlogArticles()
• getProducts()

Object Api objects reference

• ProductsList
• BlogArticlesList