custom/static-plugins/NdTheme/src/Resources/views/storefront/component/pagination.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/pagination.html.twig' %}
  2. {% block component_pagination %}
  3.     {% set defaultClasses = 'block text-sm w-6 h-6 flex items-center outline outline-2 outline-transparent transition justify-center rounded cursor-pointer hover:bg-grey-900 hover:text-white lg:w-10 lg:h-10 lg:text-base' %}
  4.     {% set activeClasses = 'bg-grey-900 text-white' %}
  5.     <ul class="pagination flex items-center justify-center grid-gap-2 pt-4 pb-4">
  6.         {% block component_pagination_first %}
  7.         {% endblock %}
  9.         {% block component_pagination_prev %}
  10.             <li class="page-item page-prev mr-auto{% if currentPage == 1 %} disabled{% endif %}">
  11.                 {% block component_pagination_prev_input %}
  12.                     <input type="radio"
  13.                            {% if currentPage == 1 %}disabled="disabled"{% endif %}
  14.                            name="p"
  15.                            id="p-prev{{ paginationSuffix }}"
  16.                            value="{{ currentPage - 1 }}"
  17.                            class="hidden peer"
  18.                            title="pagination">
  19.                 {% endblock %}
  21.                 {% block component_pagination_prev_label %}
  22.                     <label class="page-link btn btn-primary !p-2{% if currentPage == 1 %} disabled{% endif %}"
  23.                            for="p-prev{{ paginationSuffix }}">
  24.                         {% block component_pagination_prev_link %}
  25.                             {% block component_pagination_prev_icon %}
  26.                                 {% sw_icon 'arrow-left' style { 'pack': 'hero', 'class': ' w-5 h-5'} %}
  27.                                 <span class="hidden capitalize text-sm lg:block">
  28.                                 {{ "general.previous"|trans }}
  29.                                     </span>
  30.                             {% endblock %}
  31.                         {% endblock %}
  32.                     </label>
  33.                 {% endblock %}
  34.             </li>
  35.         {% endblock %}
  37.         {% block component_pagination_loop %}
  38.             {% set start = currentPage - 2 %}
  39.             {% if start <= 0 %}
  40.                 {% set start = currentPage - 1 %}
  41.                 {% if start <= 0 %}
  42.                     {% set start = currentPage %}
  43.                 {% endif %}
  44.             {% endif %}
  46.             {% set end = start + 4 %}
  48.             {% if end > totalPages %}
  49.                 {% set end = totalPages %}
  50.             {% endif %}
  52.             {% for page in start..end %}
  54.                 {% set isActive = (currentPage == page) %}
  56.                 {% block component_pagination_item %}
  57.                     <li class="page-item">
  58.                         {% block component_pagination_item_input %}
  59.                             <input type="radio"
  60.                                    name="p"
  61.                                    id="p{{ page }}{{ paginationSuffix }}"
  62.                                    value="{{ page }}"
  63.                                    class="hidden peer"
  64.                                    title="pagination"
  65.                                    {% if isActive %}checked="checked"{% endif %}>
  66.                         {% endblock %}
  68.                         {% block component_pagination_item_label %}
  69.                             <label class="page-link {{ defaultClasses }} {% if isActive %} active {{ activeClasses }}{% endif %}"
  70.                                    for="p{{ page }}{{ paginationSuffix }}">
  71.                                 {% block component_pagination_item_link %}
  72.                                     {% block component_pagination_item_text %}
  73.                                         {{ page }}
  74.                                     {% endblock %}
  75.                                 {% endblock %}
  76.                             </label>
  77.                         {% endblock %}
  78.                     </li>
  79.                 {% endblock %}
  81.             {% endfor %}
  82.         {% endblock %}
  84.         {% block component_pagination_next %}
  85.             <li class="page-item page-next ml-auto{% if currentPage == totalPages %} disabled{% endif %}">
  86.                 {% block component_pagination_next_input %}
  87.                     <input type="radio"
  88.                            {% if currentPage == totalPages %}disabled="disabled"{% endif %}
  89.                            name="p"
  90.                            id="p-next{{ paginationSuffix }}"
  91.                            value="{{ currentPage + 1 }}"
  92.                            class="hidden peer"
  93.                            title="pagination">
  94.                 {% endblock %}
  96.                 {% block component_pagination_next_label %}
  97.                     <label class="page-link btn btn-primary !p-2{% if currentPage == totalPages %} disabled{% endif %}"
  98.                            for="p-next{{ paginationSuffix }}">
  99.                         {% block component_pagination_next_link %}
  100.                             {% block component_pagination_next_icon %}
  101.                                 <span class="hidden capitalize text-sm lg:block">
  102.                                     {{ "general.next"|trans }}
  103.                                 </span>
  104.                                 {% sw_icon 'arrow-right' style { 'pack': 'hero', 'class': ' w-5 h-5'} %}
  105.                             {% endblock %}
  106.                         {% endblock %}
  107.                     </label>
  108.                 {% endblock %}
  109.             </li>
  110.         {% endblock %}
  112.         {% block component_pagination_last %}
  113.         {% endblock %}
  114.     </ul>
  115. {% endblock %}