app/template/default/Block/_pagination.twig line 1

Open in your IDE?
  1. {% if pages.pageCount > 1 %}
  2.   <div class="pagination-btn-group">
  3.     {# Go to previous page #}
  4.     {% if pages.current > 1 %}
  5.         <a class="pagination-btn pagination-btn--prev" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'pageno': pages.startPage})) }}" aria-label="First">
  6.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  7.             <path d="M5.74659 8.0006L11.4034 13.6575L13.2891 11.7718L9.51783 8.0006L13.2891 4.22937L11.4034 2.34375L5.74659 8.0006Z" fill="#00A854"/>
  8.             <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  9.         </svg>
  10.         </a>
  11.     {% else %}
  12.         <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  13.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  14.             <path d="M5.74659 8.0006L11.4034 13.6575L13.2891 11.7718L9.51783 8.0006L13.2891 4.22937L11.4034 2.34375L5.74659 8.0006Z" fill="#00A854"/>
  15.             <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  16.         </svg>
  17.         </span>
  18.     {% endif %}
  19.     {% if pages.previous is defined %}
  20.       <a class="pagination-btn pagination-btn--prev" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'pageno': pages.previous})) }}" aria-label="Previous">
  21.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  22.           <path d="M3.44581 8.0006L9.10266 13.6575L10.9883 11.7718L7.21705 8.0006L10.9883 4.22937L9.10266 2.34375L3.44581 8.0006Z" fill="#00A854"/>
  23.         </svg>
  24.       </a>
  25.     {% else %}
  26.       <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  27.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  28.           <path d="M3.44581 8.0006L9.10266 13.6575L10.9883 11.7718L7.21705 8.0006L10.9883 4.22937L9.10266 2.34375L3.44581 8.0006Z" fill="#00A854"/>
  29.         </svg>
  30.       </span>
  31.     {% endif %}
  32.   </div>
  34.   {# Page numbers - desktop #}
  35.   <div class="pagination-numbers container-desktop-flex">
  36.     {% for page in pages.pagesInRange %}
  37.       {% set href = path(app.request.attributes.get('_route'), app.request.query.all|merge({'pageno': page})) %}
  38.       {% if page == pages.current %}
  39.         <span class="pagination-number pagination-number--active">{{ page }}</span>
  40.       {% else %}
  41.         <a class="pagination-number" href="{{ href }}">{{ page }}</a>
  42.       {% endif %}
  43.     {% endfor %}
  44.   </div>
  46.   {# Mobile current/total #}
  47.   <div class="pagination-page-number container-mobile">
  48.     {{ pages.current }}／{{ pages.pageCount }}
  49.   </div>
  51.   <div class="pagination-btn-group">
  52.     {# Go to next page #}
  53.     {% if pages.next is defined %}
  54.       <a class="pagination-btn pagination-btn--next" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'pageno': pages.next})) }}" aria-label="Next">
  55.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  56.           <path d="M12.5542 8.0006L6.89734 13.6575L5.01172 11.7718L8.78295 8.0006L5.01172 4.22937L6.89734 2.34375L12.5542 8.0006Z" fill="#00A854"/>
  57.         </svg>
  58.       </a>
  59.     {% else %}
  60.       <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  61.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  62.           <path d="M12.5542 8.0006L6.89734 13.6575L5.01172 11.7718L8.78295 8.0006L5.01172 4.22937L6.89734 2.34375L12.5542 8.0006Z" fill="#00A854"/>
  63.         </svg>
  64.       </span>
  65.     {% endif %}
  66.     {# Last page button (double arrow) #}
  67.     {% if pages.current < pages.pageCount %}
  68.         <a class="pagination-btn pagination-btn--next" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'pageno': pages.pageCount})) }}" aria-label="Last">
  69.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  70.             <path d="M10.2534 8.0006L4.59656 13.6575L2.71094 11.7718L6.48217 8.0006L2.71094 4.22937L4.59656 2.34375L10.2534 8.0006Z" fill="#00A854"/>
  71.             <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  72.         </svg>
  73.         </a>
  74.     {% else %}
  75.         <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  76.         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  77.             <path d="M10.2534 8.0006L4.59656 13.6575L2.71094 11.7718L6.48217 8.0006L2.71094 4.22937L4.59656 2.34375L10.2534 8.0006Z" fill="#00A854"/>
  78.             <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  79.         </svg>
  80.         </span>
  81.     {% endif %}
  82.   </div>
  83. {% endif %}