vendor/shopware/storefront/Resources/views/storefront/component/pagination.html.twig line 1

Open in your IDE?
  1. {% block component_pagination_nav %}
  2. {% set currentPage = ((criteria.offset + 1) / criteria.limit)|round(0, 'ceil') %}
  3. {% set totalEntities = total ? total : entities.total %}
  4. {% set totalPages = (totalEntities / criteria.limit)|round(0, 'ceil') %}
  6. {% set paginationSuffix = '' %}
  7. {# @deprecated tag:v6.5.0 - pagination template will append `paginationSuffix` for input and label ids to avoid duplicate ids. #}
  8. {% if feature('v6.5.0.0') and paginationLocation %}
  9. {% set paginationSuffix = '-' ~ paginationLocation %}
  10. {% endif %}
  12. {% if totalPages > 1 %}
  13. <nav aria-label="pagination" class="pagination-nav">
  14. {% block component_pagination %}
  15. <ul class="pagination">
  16. {% block component_pagination_first %}
  17. <li class="page-item page-first{% if currentPage == 1 %} disabled{% endif %}">
  18. {% block component_pagination_first_input %}
  19. <input type="radio"
  20. {% if currentPage == 1 %}disabled="disabled"{% endif %}
  21. name="p"
  22. id="p-first{{ paginationSuffix }}"
  23. value="1"
  24. class="d-none"
  25. title="pagination">
  26. {% endblock %}
  28. {% block component_pagination_first_label %}
  29. <label class="page-link" for="p-first{{ paginationSuffix }}">
  30. {% block component_pagination_first_link %}
  31. {% sw_icon 'arrow-medium-double-left' style { 'size': 'fluid', 'pack': 'solid'} %}
  32. {% endblock %}
  33. </label>
  34. {% endblock %}
  35. </li>
  36. {% endblock %}
  38. {% block component_pagination_prev %}
  39. <li class="page-item page-prev{% if currentPage == 1 %} disabled{% endif %}">
  40. {% block component_pagination_prev_input %}
  41. <input type="radio"
  42. {% if currentPage == 1 %}disabled="disabled"{% endif %}
  43. name="p"
  44. id="p-prev{{ paginationSuffix }}"
  45. value="{{ currentPage - 1 }}"
  46. class="d-none"
  47. title="pagination">
  48. {% endblock %}
  50. {% block component_pagination_prev_label %}
  51. <label class="page-link" for="p-prev{{ paginationSuffix }}">
  52. {% block component_pagination_prev_link %}
  53. {% block component_pagination_prev_icon %}
  54. {% sw_icon 'arrow-medium-left' style {'size': 'fluid', 'pack': 'solid'} %}
  55. {% endblock %}
  56. {% endblock %}
  57. </label>
  58. {% endblock %}
  59. </li>
  60. {% endblock %}
  62. {% block component_pagination_loop %}
  63. {% set start = currentPage - 2 %}
  64. {% if start <= 0 %}
  65. {% set start = currentPage - 1 %}
  66. {% if start <= 0 %}
  67. {% set start = currentPage %}
  68. {% endif %}
  69. {% endif %}
  71. {% set end = start + 4 %}
  73. {% if end > totalPages %}
  74. {% set end = totalPages %}
  75. {% endif %}
  77. {% for page in start..end %}
  79. {% set isActive = (currentPage == page) %}
  81. {% block component_pagination_item %}
  82. <li class="page-item{% if isActive %} active{% endif %}">
  83. {% block component_pagination_item_input %}
  84. <input type="radio"
  85. name="p"
  86. id="p{{ page }}{{ paginationSuffix }}"
  87. value="{{ page }}"
  88. class="d-none"
  89. title="pagination"
  90. {% if isActive %}checked="checked"{% endif %}>
  91. {% endblock %}
  93. {% block component_pagination_item_label %}
  94. <label class="page-link"
  95. for="p{{ page }}{{ paginationSuffix }}">
  96. {% block component_pagination_item_link %}
  97. {% block component_pagination_item_text %}
  98. {{ page }}
  99. {% endblock %}
  100. {% endblock %}
  101. </label>
  102. {% endblock %}
  103. </li>
  104. {% endblock %}
  106. {% endfor %}
  107. {% endblock %}
  109. {% block component_pagination_next %}
  110. <li class="page-item page-next{% if currentPage == totalPages %} disabled{% endif %}">
  111. {% block component_pagination_next_input %}
  112. <input type="radio"
  113. {% if currentPage == totalPages %}disabled="disabled"{% endif %}
  114. name="p"
  115. id="p-next{{ paginationSuffix }}"
  116. value="{{ currentPage + 1 }}"
  117. class="d-none"
  118. title="pagination">
  119. {% endblock %}
  121. {% block component_pagination_next_label %}
  122. <label class="page-link" for="p-next{{ paginationSuffix }}">
  123. {% block component_pagination_next_link %}
  124. {% block component_pagination_next_icon %}
  125. {% sw_icon 'arrow-medium-right' style { 'size': 'fluid', 'pack': 'solid'} %}
  126. {% endblock %}
  127. {% endblock %}
  128. </label>
  129. {% endblock %}
  130. </li>
  131. {% endblock %}
  133. {% block component_pagination_last %}
  134. <li class="page-item page-last{% if currentPage == totalPages %} disabled{% endif %}">
  135. {% block component_pagination_last_input %}
  136. <input type="radio"
  137. {% if currentPage == totalPages %}disabled="disabled"{% endif %}
  138. name="p"
  139. id="p-last{{ paginationSuffix }}"
  140. value="{{ totalPages }}"
  141. class="d-none"
  142. title="pagination">
  143. {% endblock %}
  145. {% block component_pagination_last_label %}
  146. <label class="page-link" for="p-last{{ paginationSuffix }}">
  147. {% block component_pagination_last_link %}
  148. {% block component_pagination_last_icon %}
  149. {% sw_icon 'arrow-medium-double-right' style {
  150. 'size': 'fluid',
  151. 'pack': 'solid'
  152. } %}
  153. {% endblock %}
  154. {% endblock %}
  155. </label>
  156. {% endblock %}
  157. </li>
  158. {% endblock %}
  159. </ul>
  160. {% endblock %}
  161. </nav>
  162. {% endif %}
  163. {% endblock %}