diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 74ddc5458..994d157f1 100644 --- 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 index 39b2278cb..10fd704f5 100644 --- a/src/js/modules/facetedsearch/update.ts +++ b/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) => { 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 index ea6404735..10ddc429b 100644 --- a/src/scss/custom/components/category/_product-list.scss +++ b/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; diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl index 022e7f13d..16bda5e95 100644 --- a/templates/_partials/pagination.tpl +++ b/templates/_partials/pagination.tpl @@ -25,7 +25,7 @@
  • + 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'} {l s='Previous' d='Shop.Theme.Actions'} diff --git a/types/selectors.d.ts b/types/selectors.d.ts index 657c47e7d..d0b1403ab 100644 --- 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 = {