Jump to content

Recommended Posts

A website that I coded is using jQuery/Ajax to build the pages dynamically as the user scrolls down.  It is an e-commerce site and each page has a large number of products that would be enormous if loaded all at one so it loads 3 lines of products at a time on demand. 

The problem is that the client has noticed that if you click on a product, which displays a "details" page from which you can buy, and then go back it starts at the top again rather than returns to the position on "the page" from which the visitor clicked.  Apparently other sites successfully manage to built the page dynamically in this way and maintain position when navigating back, but my knowledge of how "virtual pages" work (which is what I consider this to be, as at any point in time it is only a percentage of the page that is loaded) makes it difficult for me to find a solution.

Does anybody have experience of this?

See https://www.shibumistyle.com/en/p368-ladies-silk-cashmere-jacket.html for what I mean... scroll down a few pages and then click on a product to see more information.

Thanks,

Sean

Edited by nsbmiller

The trick I would use is window.history and state. You use the state to track where they've gone on the page. On the first load check that state to see if you need to restore something old, and as they scroll and load content you replace the state with something new that gives you enough information to reconstruct where they were.

Another option is having the product details be more of a modal than a separate page. User doesn't lose where they are because they don't leave the page.

The other obvious solution is to paginate results. Infinite loading is fine and all, but there are issues with it (as you're finding now) that don't happen with simple pagination. For instance, if the user has JavaScript turned off - admittedly not very likely, but possible - window.history and state won't do anything.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.