feat: improve pagination

Enhanced pagination and added mobile optimizations.
PrestaShop · May 17, 2024 · 5ede008 · 5ede008
1 parent 479f98e
commit 5ede008
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 14 deletions.
diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss
@@ -7,4 +7,58 @@ $component-name: pagination;
     font-size: 1rem;
     color: var(--bs-gray-600);
   }
+
+  @include media-breakpoint-down(sm) {
+    position: relative;
+    margin-bottom: 3.5rem;
+
+    .page-item {
+      &:nth-child(2) {
+        .page-link {
+          border-top-left-radius: var(--bs-pagination-border-radius);
+          border-bottom-left-radius: var(--bs-pagination-border-radius);
+        }
+      }
+
+      &:nth-last-child(2) {
+        .page-link {
+          border-top-right-radius: var(--bs-pagination-border-radius);
+          border-bottom-right-radius: var(--bs-pagination-border-radius);
+        }
+      }
+
+      &.disabled {
+        .page-link {
+          padding-inline: 0.375rem;
+        }
+      }
+
+      &:has(.previous),
+      &:has(.next) {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        transform-origin: center;
+      }
+
+      &:has(.previous) {
+        left: 50%;
+        transform: translateX(calc(-100% - 0.25rem));
+      }
+
+      &:has(.next) {
+        right: 50%;
+        transform: translateX(calc(100% + 0.25rem));
+      }
+    }
+
+    .page-link {
+      padding-inline: 0.625rem;
+
+      &.previous,
+      &.next {
+        padding: 0.5rem;
+        border-radius: 50%;
+      }
+    }
+  }
 }
diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl
@@ -16,25 +16,40 @@
       <nav aria-label="{l s='Products pagination' d='Shop.Theme.Catalog'}">
         {if $pagination.should_be_displayed}
           <ul class="pagination">
-            {foreach from=$pagination.pages item="page"}
+            {foreach from=$pagination.pages item="page" name="paginationLoop"}
+              {if $page@iteration === 1}
+                <li class="page-item">
+                  <a rel="prev" href="{$page.url}"
+                    class="page-link btn-with-icon previous {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    <i class="material-icons rtl-flip" aria-hidden="true">&#xE314;</i>
+                    <span class="d-none d-xl-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                  </a>
+                </li>
+
+                {if $page.type === 'previous'}
+                  {continue}
+                {/if}
+              {/if}
+
               {if $page.type === 'spacer'}
                 <li class="page-item disabled">
                   <span class="page-link">&hellip;</span>
                 </li>
-              {else}
+              {else if $page.type != "prev" && $page.type != "next"}
                 <li class="page-item{if $page.current} active{/if}" {if $page.current}aria-current="page" {/if}>
-                  <a rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                    href="{$page.url}"
-                    class="page-link btn-with-icon {if $page.type === 'previous'}previous {elseif $page.type === 'next'}next {/if}{['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
-                    {if $page.type === 'previous'}
-                      <i class="material-icons rtl-flip" aria-hidden="true">&#xE314;</i>
-                      <span class="d-none d-md-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
-                    {elseif $page.type === 'next'}
-                      <span class="d-none d-md-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
-                      <i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
-                    {else}
-                      {$page.page}
-                    {/if}
+                  <a rel="nofollow" href="{$page.url}"
+                    class="page-link btn-with-icon {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    {$page.page}
+                  </a>
+                </li>
+              {/if}
+
+              {if $smarty.foreach.paginationLoop.last}
+                <li class="page-item">
+                  <a rel="next" href="{$page.url}"
+                    class="page-link btn-with-icon next {['disabled' => !$page.clickable, 'js-pager-link' => true]|classnames}">
+                    <span class="d-none d-xl-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
+                    <i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
                   </a>
                 </li>
               {/if}