Skip to content

Commit

Permalink
Merge pull request #565 from tswfi/pager_scroll_to_top_of_products
Browse files Browse the repository at this point in the history
Change pager scrolling behaviour, Fixes #562
  • Loading branch information
nicosomb authored Jan 30, 2024
2 parents ec089f5 + 4a29900 commit 8412f7a
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/js/constants/selectors-map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
13 changes: 12 additions & 1 deletion src/js/modules/facetedsearch/update.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -99,6 +111,5 @@ export default () => {
prestashop.on(events.updateProductList, (data: Record<string, never>) => {
updateProductListDOM(data);
useQuantityInput();
window.scrollTo(0, 0);
});
};
4 changes: 4 additions & 0 deletions src/scss/custom/components/category/_product-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

.layout-left-column,
.layout-full-width {
#js-product-list-top {
scroll-margin: 120px;
}

.products-selection {
margin-bottom: 1.25rem;

Expand Down
2 changes: 1 addition & 1 deletion templates/_partials/pagination.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions types/selectors.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ declare type listing = {
listHeader: string,
searchFiltersClearAll: string,
searchLink: string,
pagerLink: string,
};

declare type cart = {
Expand Down

0 comments on commit 8412f7a

Please sign in to comment.