pagination_button

The pagination_button macro is used to render a button for a pagination of a list, eg. a product list.

Definition

{% macro pagination_button(options, iconOptions) %}

Input parameters

options

object represents an object of button options

Option key	Type	Default	Required	Description
options.isPrev	boolean	false	no	Indicates if the button should be styled as a link to a previous page
options.isNext	boolean	false	no	Indicates if the button should be styled as a link to a next page
options.href	string	""	no	Link to a page
options.isBoundaried	boolean	false	no	Indicates if the button is boundaried i.e it is a link to the first or last page
options.buttonTextLeft	string	""	no	A text added on the left side of icon in the button content
options.buttonTextRight	string	""	no	A text added on the right side of icon in the button content
options.classNames	string	""	no	A list of classes that will be added to the main element of the macro

iconOptions

object represents an object of button icon options

Option key	Type	Default	Required	Description
iconOptions.iconName	string	""	no	The name of the icon displayed on the button
iconOptions.iconClassNames	string	""	no	A list of classes that will be added to the icon element

Example

In this example we render a simple pagination button with an icon styled as a next page button.

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

{{
    pagination_button({
        options: {
            href: 'https://example.com/example-page/2',
            isNext: true
        },
        iconOptions: {
            iconName: 'icon-chevrons-right'
        }
    })
}}

Example

In this example we render a pagination button with text and an icon styled as a previous page button.

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

{{
    pagination_button({
        options: {
            href: 'https://example.com/example-page/1',
            isPrevious: true,
            buttonTextRight: 'Previous page'
        },
        iconOptions: {
            iconName: 'icon-chevrons-left'
        }
    })
}}

Macro source code

{% macro pagination_button(options, iconOptions) %}
    {% from "@macros/icon.twig" import icon %}

    {% set prevIconClassName = options.isPrev is defined ? 'pagination__icon-prev' : '' %}
    {% set nextIconClassName = options.isNext is defined ? 'pagination__icon-next' : '' %}

    {% set iconClassNames = iconOptions.iconClassNames|default([])|merge(['pagination__icon', nextIconClassName, prevIconClassName]) %}

    <a
        href="{{ options.href }}"
        class="
            btn
            pagination__button
            {% if options.isPrev %} btn_outline {% endif %}
            {% if options.isNext %} btn_secondary {% endif %}
            {% if options.isBoundaried %} pagination__button_secondary {% endif %}
            {% if options.buttonTextLeft or options.buttonTextRight %} pagination__button_with-text {% endif %}
            {{ options.classNames|join(' ') }}
        "
    >
        {% if options.buttonTextLeft %}
            <span class="pagination__button-text"> {{ options.buttonTextLeft }}</span>
        {% endif %}

        {% if iconOptions.iconName %}
            {{
                icon(iconOptions.iconName, {
                    classNames: iconClassNames
                })
            }}
        {% endif %}

        {% if options.buttonTextRight %}
            <span class="pagination__button-text">{{ options.buttonTextRight }}</span>
        {% endif %}
    </a>
{% endmacro %}