Return to a page and scroll to a record ID

Wappler General Need Help
1

I’m scratching my head on this one so hopefully someone may be able to see what is wrong.

I have a list page https://thegunnery.xyz/shop/1/2/firearms/category-b
If you scroll down a little and click “View Product” it then takes you to a detail page which shows more information.

The problem I am having is getting back to the same position in the list page.
Currently I have a session which saves the ID of the record that was clicked.
So when you hit the back button, it should when the database has loaded, smooth scroll to the recordID, but it is just not working.

I’ve also added the ID into the url, this only works when you refresh the page.
Can anyone spot where I am going wrong or if there is another way of doing this?

2

That is because the scroll event runs before your products are loaded and rendered on the page, so the element it tries to scroll to is not on the page yet.

3

So how can I make this work?

4

I think you should first work on optimizing this page, before actually worrying going back to a specific record. Your page is loading hundreds of records and hundreds of images at once.
Your page takes 55+ seconds to fully load and it loads 60 MB of data on load! That is a huge issue.

Screenshot 2023-12-08 at 10.48.41
Screenshot 2023-12-08 at 10.48.411065×1264 254 KB

5

OK so I have reduced down to 20 products and still have the same issue.
How can I make the scroll to fire after the page has loaded?

6

First check this code:

dmx-on:click="session1.set('dmxState-position','item-'+id);

and change it to

dmx-on:click="session1.set('position','item-'+id);

then, you want to run the scroll code after the repeat region has rendered, so that you are sure the products are on the page. So remove this from your server action

 dmx-on:done="scroll1.goto('#'+session1.data['dmxState-position'])"

and instead add this to your repeat children region:

dmx-on:updated="scroll1.goto('#'+session1.data.position)"
3 Likes