Page position on products list page

Ivan Marijanović

Posted on 07/10/2020 13:41:53

Hi people!

We have two issues I cannot solve.

First onproduct list - when user clicks on Load 10 more the new products are reloaded but page stays at the position of button meaning that products are displayed above so user have to scroll up and remember where he was to check new loaded products. How can we change this so that user stays at position where he was and that products and button are moved down so he can just continue to look at next products.

Also when user clicks on product and goes to product page and then if he click back page is reloaded and he is moved to top of page. How can we make that he goes back at last position he was when viewing products? You can see this behaviour on farfetch web site.

Ivan

Replies

Nuno Aguiar

Posted on 07/10/2020 16:30:28

This post has been marked as an answer

Hi Ivan

Here's the solution for item 1. We used this JS for a customer

let productListScrollPos = window.scrollY;

RapidoHook.loadMore(function (e) {
    let loaderHeight = 30;
    productListScrollPos = window.scrollY - loaderHeight;
});

RapidoHook.productListUpdated(function (e) {
    window.scrollTo(0, productListScrollPos);
});

For #2 we've never done it but should be "simple" if you add the new position (productListScrollPos value) in the queryString whenever the user clicks "Load 10 more" and then making sure you have a document eventlistener on document ready to read that querystring value and trigger the window.scrollTop.

Hope that makes sense.

Nuno Aguiar

Votes for this answer: 1

Ivan Marijanović

Posted on 15/10/2020 11:48:02

Thank you Nuno

Ivan

Karsten Thuen

Posted on 19/10/2020 11:24:30

This post has been marked as an answer

Thank you for the solution, Nuno.

I have fixed the bug too. And it will be in the next Rapido hotfix release.

Best regards
Karsten Thuen

Votes for this answer: 1

Nuno Aguiar

Posted on 19/10/2020 12:03:29

You are welcome Karsten :)

You must be logged in to post in the forum

Developer forum

Page position on products list page

Replies