Maintain the state/position of the page upon returning from the product details page

[anoopkundal]

Describe the bug
When using the endless scroll option, if a user clicks on a product after scrolling to page 3 or 4 and then clicks the back button, the page does not maintain its position and always returns to page 2. To improve user experience, the page should be able to maintain its position so that the user doesn't have to scroll to the same spot again.

To Reproduce
Steps to reproduce the behavior:

1. Open the page in endless scroll option
2. Keep scrolling down to page 3 or 4
3. Click on any product to open the Product Detail Page
4. Click the browser back to go back to the PLP page
5. The page will not maintain it's state and go back to Page 2

Expected behavior
The page should maintain the position so that the user doesn't have to scroll to that position again.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MAC
• Browser: Chrome
• Version: 109.0.5414.87 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[trenkwill]

I'm also having this issue which is preventing me from using this solution.

[anoopkundal]

@trenkwill, did you find any other library or solution that does this job?

[cam]

@trenkwill & @anoopkundal the behavior you are seeing is not actually an issue with Ajaxinate. There are a number of factors that affect the way pages are cached. You can override the way browsers handle caching (or rather, don't in most cases now days). But that's not something that this library should handle, as it is a page loading concept, not an endless scroll concept.

[anoopkundal]

@cam, thanks for the clarification.
The library works very well to load the collections both as Endless Scroll and Endless Click. Thanks for putting it out for the community.

In your experience what is the best way I can handle the back from the PDP page, so that the user doesn't have to start scrolling again from the beginning of the list? Any suggestions would be appreciated.

There is one more thing I found curious in this implementation is that when I look at the network calls, when I do a back from the PDP, the page always comes back to the 2nd page as the page has a ?page=2 call and the page always opens on the same row. Am I misreading something? I wondering if there is a way to store the page number and load it based on that.

[davidfranks]

@anoopkundal did you manage to find a solution, we are in the same boat. Can't find a solution to remember the users position on the previous page.

[bansavage]

@cam
Why does your demo work, but all other implementations fail?

[darrenhizon]

Hello,

Forked this repo and fixed this ajaxinate issue here

[bansavage]

@darrenhizon
How is performance when on page 5 or so with your function loadPreviousContent() ?

cc @MatthewRCrigger

[darrenhizon]

Tested it till page 3 and it doesn't seem to be slow for me. If you have any suggestions let me know.

[cam]

@darrenhizon how did you go about resolving this? We've been working on a total rewrite of Ajaxinate that will probably be released under another project. However I'd like to get this repo undated for all the current users. I'd like to look at testing your version and seeing how we can update the project and cleaning things up a little while at it.

[darrenhizon]

Hi @cam,

loadPreviousContent() to load in previous content.