Being sent to bottom of page on browser back #2

Closed
a1anm opened this Issue Aug 3, 2011 · 7 comments

Comments

Projects
None yet
3 participants

a1anm commented Aug 3, 2011

Hi,

I have installed and configuring the extension. My problem is that after scrolling down the catalog and choosing a product once I hit the browser back button I will be returned to the catalog but I will always be taked to the very bottom of the page (where all products are out of view).

You can see the behaviour here:
http://testsite.twistedtime.com/mens-watches.html

Is this normal? Is there a way of preventing this?

Thanks :)

Owner

gsomoza commented Aug 4, 2011

Hi a1anm,

Thanks for using our extension. I couldn't access your test site cause I get the message "You seem to have stumbled across (...)", but I could duplicate your issue on my local environment.

That happens because the jQuery plugin (i.e. not our extension) doesn't alter history when scrolling down a page. So when you hit the back button, it will go to the page you originally loaded. Also, the browser remembers at which vertical scrolling position you were in the page before, so once it loads the page it jumps over there. Unfortunately, InfiniteScroll hasn't loaded all other products just yet which is why what you see is the bottom of the page.

From a user experience perspective, how would you like this to be resolved? Since this has to do with the InfiniteScroll jQuery plugin I can't promise we can solve it, but it would be interested to continue this conversation and see if we can figure out a possible fix that would seem natural to the end-user. Here's my thoughts:

  1. We could have InfiniteScroll alter the history in such a way that when the user hits the "back" button he taken directly to the last 'page' of results loaded by the plugin. For example you start at page 1 (p=1) and scroll down until InfiniteScroll has loaded p=5. Then you click on a product on page 5. When you hit the 'back' button, you could be directed to p=5 instead of p=1. Which would mean that all other products from pages 1-4 won't be visible and only products from page 5 would be displayed. Downsides are that if the user scrolls to p=5 and then clicks on a product from p=4, the back button will still redirect back to page 5. Another downside is that when you're back at page 5, InfiniteScroll won't scroll backwards.

  2. The second fix involves applying the first fix and additionally modifying the Magento plugin. Its a server-side fix as well. What we could do is in addition to remembering the last page loaded (x), tell Magento to load all pages 1 through x when hitting the 'back' button. This eliminates downsides from the previous fix but it will be considerably more difficult to implement.

  3. Of course we can accept the behavior of InfiniteScroll as it is and stay tuned for new features in the future.

Hope to hearing back from you!

a1anm commented Aug 4, 2011

Hi,

Thanks for the speedy and detailed reply. I'm not much of a coder so what I
suggest may not even be possible or else too hard to implement.

Would it be possible to have a solution similar to your first suggestion
however when the user scrolled to p=5, clicked a product and then hit back
they would be returned to p=5 but could still scroll back to p=4 and the
products would be loaded back in using ajax on the way up. Kind of the way
it is now but in reverse. Also, when scrolling back up the url would change
back to p=4 so if clicking a product on that page they would also be
returned to p=4. I think this sounds like it may not be possible.

Apart from this I'm not sure other solutions are going to be great as they
all seem to have pretty big downsides when it comes to the user experience.
I had actually bought this extension:
http://ecommerce.aheadworks.com/magento-extensions/ajax-catalog.html

However, it also had the downsides of getting returned to unpredictable
sections of the page and having to wait for the entire page to load before
getting returned to your previous position.

One other thing I was thinking was to not load the entire product using ajax
but just the images. This way you could still leave out the pagination as
the pages with lots of products would still load quickly without the images
and then just load the images as the user scrolls.

I'm not sure if this would make it easier to implement a solution where the
user can easier go back to their previous position.

I had a look at a jQuery LazyLoad plugin which could have helped with this
however it is no longer maintained and apparently doesn't work with new
browsers.

Thanks again!

On 4 August 2011 10:02, gabrielsomoza <
reply@reply.github.com>wrote:

Hi a1anm,

Thanks for using our extension. I couldn't access your test site cause I
get the message "You seem to have stumbled across (...)", but I could
duplicate your issue on my local environment.

That happens because the jQuery plugin (i.e. not our extension) doesn't
alter history when scrolling down a page. So when you hit the back button,
it will go to the page you originally loaded. Also, the browser remembers at
which vertical scrolling position you were in the page before, so once it
loads the page it jumps over there. Unfortunately, InfiniteScroll hasn't
loaded all other products just yet which is why what you see is the bottom
of the page.

From a user experience perspective, how would you like this to be resolved?
Since this has to do with the InfiniteScroll jQuery plugin I can't promise
we can solve it, but it would be interested to continue this conversation
and see if we can figure out a possible fix that would seem natural to the
end-user. Here's my thoughts:

  1. We could have InfiniteScroll alter the history in such a way that when
    the user hits the "back" button he taken directly to the last 'page' of
    results loaded by the plugin. For example you start at page 1 (p=1) and
    scroll down until InfiniteScroll has loaded p=5. Then you click on a product
    on page 5. When you hit the 'back' button, you could be directed to p=5
    instead of p=1. Which would mean that all other products from pages 1-4
    won't be visible and only products from page 5 would be displayed. Downsides
    are that if the user scrolls to p=5 and then clicks on a product from p=4,
    the back button will still redirect back to page 5. Another downside is that
    when you're back at page 5, InfiniteScroll won't scroll backwards.

  2. The second fix involves applying the first fix and additionally
    modifying the Magento plugin. Its a server-side fix as well. What we could
    do is in addition to remembering the last page loaded (x), tell Magento to
    load all pages 1 through x when hitting the 'back' button. This eliminates
    downsides from the previous fix but it will be considerably more difficult
    to implement.

  3. Of course we can accept the behavior of InfiniteScroll as it is and stay
    tuned for new features in the future.

Hope to hearing back from you!

Reply to this email directly or view it on GitHub:

https://github.com/gabrielsomoza/Magento-InfiniteScroll/issues/2#issuecomment-1725495

Owner

gsomoza commented Aug 4, 2011

I definitely think InfiniteScroll is the way to go. Scrolling upwards won't work and even if attempted its downsides are huge. There's a thread in the InfiniteScroll jQuery plugin discussing the idea and its implications, but I wouldn't hold my breath on that option.

My second option would practically have no downsides, except that huge catalogs would be expensive to load if in page 200 for example. For a smaller amount of products however it would be absolutely seamless.

I will look into the feature as it might be a great addition to the plugin especially for Magento stores. NB! It will take a long time to implement because I have to do it in my limited free time (unless somebody from the community is interested in taking over the task) so please don't expect it to be available before a couple of months...

a1anm commented Aug 4, 2011

Ok, excellent. I shall wait and see what happens.

One other thing, I just found the below infinite scrolling extension which
seems to remember which page you are on. Do you think this has the same
functionality as method 2 which you described?

http://www.comvos.de/magento-shop/en/magento-infinite-scroll-endless-scroll-demo.html

On 4 August 2011 13:22, gabrielsomoza <
reply@reply.github.com>wrote:

I definitely think InfiniteScroll is the way to go. Scrolling upwards won't
work and even if attempted its downsides are huge. There's a thread in the
InfiniteScroll jQuery plugin discussing the idea and its implications, but I
wouldn't hold my breath on that option.

My second option would practically have no downsides, except that huge
catalogs would be expensive to load if in page 200 for example. For a
smaller amount of products however it would be absolutely seamless.

I will look into the feature as it might be a great addition to the plugin
especially for Magento stores. NB! It will take a long time to implement
because I have to do it in my limited free time (unless somebody from the
community is interested in taking over the task) so please don't expect it
to be available before a couple of months...

Reply to this email directly or view it on GitHub:

https://github.com/gabrielsomoza/Magento-InfiniteScroll/issues/2#issuecomment-1726453

Owner

gsomoza commented Aug 5, 2011

What they do there is save both the latest page loaded and also the ID of the article you clicked. When you go back, they load all the pages again by Javascript and then scroll you to the article you had clicked on.

I may be wrong but theri extension doesn't seem to use the jQuery InfiniteScroll plugin, as far as I could see.

The downside of their approach is that if you have lots of pages and the user for some reason scrolled down to page 30 for example, all those pages will be loaded through Javascript when you go back. That would generate 30 requests for a single page view which in my opinion is too much.

But for smaller catalogs their extension works very well and has some nice features so you might want to consider purchasing it if it solves your problem.

Owner

gsomoza commented Jun 8, 2012

Hi @a1anm,

Just wanted to let you know we just uploaded a new version of our extension that supports the "back" functionality in a much more efficient way than the other extension: instead of re-loading all products one by one through AJAX, the system "remembers" your last position and when you go "back" it will render the page as it was directly (i.e. just one step).

The extension is now available on Magento Connect so feel free to take a look at the new feature! We'll try to setup a demo site for our extension as soon as possible as well.

Closing this ticket for now.

Gabriel

@gsomoza gsomoza closed this Jun 8, 2012

mengqing commented Feb 6, 2013

Hi, we're using the latest version from the master branch, and we're trying out the memory feature. It worked quite well, only if the Block cache is turned off. If the Block cache is on, then it wouldn't load the page number from memory but from the cache instead.

Not sure if this h as been addressed or not.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment