wc-bootstrap/templates/components/pagination.html.twig

{#
 # Pagination Component (Bootstrap 5)
 #
 # Renders pagination navigation for search/archive pages.
 #
 # Expected context:
 #   current_page - Current page number (1-based)
 #   max_pages    - Total number of pages
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% if max_pages is defined and max_pages > 1 %}
    <nav aria-label="{{ __('Page navigation') }}" class="mt-4">
        <ul class="pagination justify-content-center">
            {# Previous button #}
            <li class="page-item{% if current_page <= 1 %} disabled{% endif %}">
                <a class="page-link" href="{{ fn('get_pagenum_link', current_page > 1 ? current_page - 1 : 1)|esc_url }}" aria-label="{{ __('Previous') }}">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            {# Page numbers #}
            {% for i in 1..max_pages %}
                {% if i == current_page %}
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">{{ i }}</span>
                    </li>
                {% elseif i == 1 or i == max_pages or (i >= current_page - 2 and i <= current_page + 2) %}
                    <li class="page-item">
                        <a class="page-link" href="{{ fn('get_pagenum_link', i)|esc_url }}">{{ i }}</a>
                    </li>
                {% elseif i == current_page - 3 or i == current_page + 3 %}
                    <li class="page-item disabled">
                        <span class="page-link">&hellip;</span>
                    </li>
                {% endif %}
            {% endfor %}

            {# Next button #}
            <li class="page-item{% if current_page >= max_pages %} disabled{% endif %}">
                <a class="page-link" href="{{ fn('get_pagenum_link', current_page + 1)|esc_url }}" aria-label="{{ __('Next') }}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
{% endif %}