From a67ebe87a888de7177fa101888d711e832a010a0 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Tue, 28 Nov 2023 17:49:20 +0200 Subject: [PATCH 1/3] Change pager scrolling behaviour, Fixes #562 --- src/js/constants/selectors-map.ts | 1 + src/js/modules/facetedsearch/update.ts | 14 +++++++++++++- .../custom/components/category/_product-list.scss | 3 +++ templates/_partials/pagination.tpl | 2 +- types/selectors.d.ts | 1 + 5 files changed, 19 insertions(+), 2 deletions(-) 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..b88bf583f 100644 --- 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) => { 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..1bf008a50 100644 --- 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 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 = { From ead8f3bc1b8bb091f1a9587c8dd998a516acf169 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Tue, 28 Nov 2023 18:07:11 +0200 Subject: [PATCH 2/3] lint --- src/js/modules/facetedsearch/update.ts | 3 +-- src/scss/custom/components/category/_product-list.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/modules/facetedsearch/update.ts b/src/js/modules/facetedsearch/update.ts index b88bf583f..a80c97854 100644 --- a/src/js/modules/facetedsearch/update.ts +++ b/src/js/modules/facetedsearch/update.ts @@ -85,14 +85,13 @@ export default () => { */ $('body').on('click', Theme.selectors.listing.pagerLink, (event) => { event.preventDefault(); - document.getElementById('js-product-list-top')?.scrollIntoView({block: "start", behavior: "auto"}); + 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; diff --git a/src/scss/custom/components/category/_product-list.scss b/src/scss/custom/components/category/_product-list.scss index 1bf008a50..10ddc429b 100644 --- a/src/scss/custom/components/category/_product-list.scss +++ b/src/scss/custom/components/category/_product-list.scss @@ -9,6 +9,7 @@ #js-product-list-top { scroll-margin: 120px; } + .products-selection { margin-bottom: 1.25rem; From 4a299009dbe9758aa6a5da22a65f2921bc252f14 Mon Sep 17 00:00:00 2001 From: Tatu Wikman Date: Tue, 5 Dec 2023 13:11:32 +0200 Subject: [PATCH 3/3] use querySelector and listTop --- src/js/modules/facetedsearch/update.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/modules/facetedsearch/update.ts b/src/js/modules/facetedsearch/update.ts index a80c97854..10fd704f5 100644 --- a/src/js/modules/facetedsearch/update.ts +++ b/src/js/modules/facetedsearch/update.ts @@ -85,7 +85,7 @@ export default () => { */ $('body').on('click', Theme.selectors.listing.pagerLink, (event) => { event.preventDefault(); - document.getElementById('js-product-list-top')?.scrollIntoView({block: 'start', behavior: 'auto'}); + document.querySelector(Theme.selectors.listing.listTop)?.scrollIntoView({block: 'start', behavior: 'auto'}); prestashop.emit( events.updateFacets, $(event.target)?.closest('a')?.get(0)?.getAttribute('href'),