Product page changes with each request

[BorisovskiP]

When you scroll down to a certain page (page 5), open a product, then go back to the same product listing using the browser back button.

If you click on the URL bar (current page is 5) and then click ENTER making a new request, the URL will increment and will be on page6. The view will also change to match the page being requested. This will continue with each new request.

Preconditions (*)

• PHP 7.2
• Magento version: 2.3.4
• Default theme
• No custom modules are included that would effect the product listing

Steps to reproduce

1. Scroll to a page greater then 1
2. Open a product, then go back to the product listing using the browser back button.
3. Click on the URL bar and hit ENTER to submit a new request for the current page
4. The page should now increment by 1 for each new request.

Expected result (*)

1. The matching page from the URL should be loaded each time a request is made to that specific page

[gsomoza]

Thanks for reporting this with so much detail.

I'm a bit confused about when exactly the page number is incremented. If it is as you described then it would definitely be a bug, but it would mean the request is sent to the server for page 5 but the server responds with a 301 for page 6. It would be SO weird to me if that was actually happening, because this plugin doesn't intercept controllers or events, or anything like that..

Any chance you could make a screen-cast of this bug in action?

[gsomoza]

Essentially I'm trying to understand if there's a 301 causing the redirect to page 6, or if when going back the browser URL reflects page 6 incorrectly instead of page 5.

[BorisovskiP]

I will send you a screen cast via email, is that ok?

[gsomoza]

Sure!

[gsomoza]

Oh, I see what's happening: when going back, it sends you back correctly to page 5. In your theme the products are not loaded immediately, or they're not shown immediately, which means that it takes a bit of time before they're rendered into the DOM correctly, causing the initial page load to have a smaller height than it will have after the full page load. It's like the page is empty and the product grid is "collapsed".

While the initial list of products is still about to be rendered and the page is "collapsed", the JS that listens to the window "scroll" event gets triggered (it starts after dom:ready I believe). It detects that you're at the bottom of the list of products, which for that script means "it's time to load the next page". So it changes the page number to 6 and triggers the ajax call for page 6 of products.

You can solve this issue in two ways:

1. A pull-request that improves the detection of exactly when the next page of products has been reached by scrolling. Maybe we could set a (configurable!) minimum page height required before the checks pass, as an example.
2. Fixing the structural "issue/quirk" (if you can call it that) of the page being "collapsed" when it's initially loaded. If the products are embed into the original HTML on page-load then this should be as simple as making sure their CSS gives them enough "volume" to occupy the space they will actually occupy anyways once everything renders properly. If they're loaded by AJAX then you could still "allocate" enough space for them ahead of their rendering by simply expanding their container DIV to the approximate proportions it will have once all products have been loaded into it. The actual fix will vary but these are just some ideas.

I hope this helps!

[BorisovskiP]

Closing due to inactivity.