Change pager scrolling behaviour, Fixes #562

PrestaShop · Nov 28, 2023 · a67ebe8 · a67ebe8
1 parent 986d1a2
commit a67ebe8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 2 deletions.
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
@@ -25,6 +25,7 @@ export const listing = {
   listHeader: '#js-product-list-header',
   searchFiltersClearAll: '.js-search-filters-clear-all',
   searchLink: '.js-search-link',
+  pagerLink: '.js-pager-link',
 };
 
 export const cart = {

diff --git a/src/js/modules/facetedsearch/update.ts b/src/js/modules/facetedsearch/update.ts
@@ -80,6 +80,19 @@ export default () => {
     );
   });
 
+  /**
+   * Pager links also scroll up
+   */
+  $('body').on('click', Theme.selectors.listing.pagerLink, (event) => {
+    event.preventDefault();
+    document.getElementById('js-product-list-top')?.scrollIntoView({block: "start", behavior: "auto"});
+    prestashop.emit(
+      events.updateFacets,
+      $(event.target)?.closest('a')?.get(0)?.getAttribute('href'),
+    );
+  });
+
+
   if ($(Theme.selectors.listing.list).length) {
     window.addEventListener('popstate', (e) => {
       const {state} = e;
@@ -99,6 +112,5 @@ export default () => {
   prestashop.on(events.updateProductList, (data: Record<string, never>) => {
     updateProductListDOM(data);
     useQuantityInput();
-    window.scrollTo(0, 0);
   });
 };
diff --git a/src/scss/custom/components/category/_product-list.scss b/src/scss/custom/components/category/_product-list.scss
@@ -6,6 +6,9 @@
 
 .layout-left-column,
 .layout-full-width {
+  #js-product-list-top {
+    scroll-margin: 120px;
+  }
   .products-selection {
     margin-bottom: 1.25rem;
 

diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl
@@ -25,7 +25,7 @@
                 <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-search-link' => true]|classnames}">
+                    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>

diff --git a/types/selectors.d.ts b/types/selectors.d.ts
@@ -26,6 +26,7 @@ declare type listing = {
   listHeader: string,
   searchFiltersClearAll: string,
   searchLink: string,
+  pagerLink: string,
 };
 
 declare type cart = {