Merge pull request #565 from tswfi/pager_scroll_to_top_of_products

Change pager scrolling behaviour, Fixes #562

Author: nicosomb

src/js/constants/selectors-map.ts

@@ -26,6 +26,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 = {

src/js/modules/facetedsearch/update.ts

@@ -80,6 +80,18 @@ export default () => {
     );
   });
 
+  /**
+   * Pager links also scroll up
+   */
+  $('body').on('click', Theme.selectors.listing.pagerLink, (event) => {
+    event.preventDefault();
+    document.querySelector(Theme.selectors.listing.listTop)?.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 +111,5 @@ export default () => {
   prestashop.on(events.updateProductList, (data: Record<string, never>) => {
     updateProductListDOM(data);
     useQuantityInput();
-    window.scrollTo(0, 0);
   });
 };

src/scss/custom/components/category/_product-list.scss

@@ -6,6 +6,10 @@
 
 .layout-left-column,
 .layout-full-width {
+  #js-product-list-top {
+    scroll-margin: 120px;
+  }
+
   .products-selection {
     margin-bottom: 1.25rem;
 

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>

types/selectors.d.ts

@@ -26,6 +26,7 @@ declare type listing = {
   listHeader: string,
   searchFiltersClearAll: string,
   searchLink: string,
+  pagerLink: string,
 };
 
 declare type cart = {