How would you return to the same spot in a list of products?

So here is the issue I am facing:

I have a list of lets say 1000 products showing on a page, when you click the product it then takes you to a product-detail page.

Here is where the fun begins, when I need to exit the product-detail page I want it to return to the exact position in the list that the product was clicked (when it went to product-detail).

How would I do this?

For curiosity… can you take out the internal link attribute and see if the scroll position is maintained when you go back?

The issue is mainly on mobile. When you go back then it starts from the top of the data. So as you can image if you have scrolled through a few products is a pain to start from the top again.
Essentially what I need to do is when I go back scroll to the product ID automatically.

Not near a computer but hopefully this should work.
On the products page give each product within the repeat a unique id using dmx-bind I.e. something like ‘product_’+product_id

The in the product detail page point the return link to that anchor I.e. products#product_xxx

That should cause the page to scroll automatically to that anchor.

2 Likes

My only worry is users will often use back gestures/button instead of clicking a return link

Browser -> Push State and Browser -> Pop State might help somehow (Wappler component Browser) - though it would still be a shenanigan

Hi ben that only works if I manually refresh the page. It does not work when I use Browser>Goto

I’m racking my brain on how to do this, and not coming up with anything that works :frowning:

Can you make the product detail page a modal dialog instead ?

Just have the link open the product page in a new blank window.

I’d go with @scalaris’ suggestion unless the amount of information you’re rendering is too much for a modal and requires a full page.

For node…

When the detail link is clicked, you can set a session variable equal to the browser component offset.

On the content page have an auto run page flow that does a scroll to, if the session var has a value. Then clear the session var.

2 Likes

yes it can, but it is useless for SEO

This is why I suggest just a plain and simple link to a new page in a blank window. Two fold benefit is the initial page remains open at the position the User left, and the product gets full SEO. We too explored all types of ways of jumping back to a position within a results set but it was all too much of a mess. Worked well in some situations on some devices and browsers but not so well in other browsers or devices, so went with the link instead, rather than waste too much time on it.

1 Like

only problem for me is it not ideal, as people would have multiple windows open when they are browsing products :frowning:

well that’s bloody annoying lol…it seems if I just add browser>back then it goes back to the same place. I’ve tried it on mobile, tablet and computer in multiple bowsers and it works no issues…!

Brilliant. Too bad it doesn’t work with paged queries. :frowning:

yep I think I will avoid that one.

Can you explain this again? I suspect you’ve uncovered a bug - hitting the browser’s back button should’ve rendered the same result as the Browser component Back action

If the situation matches what I described (different behavior) a bug report should be opened to maintain consistent behavior (which is obviously your intended one)