Remember Position Inquiry for Infinite Scroll.

Ask the community
,
1

Hi,
I’ve been wrestling with finding the proper way of doing this but before I elaborate let me provide you with some context.

I have a repeater setup to do vertical infinite scroll (i.e. “on viewpoint entry: loadmore()” to display additional items below previous items displayed) .

What I’m trying to do is make sure when the user returns to the previous page (i.e. main page) that he’s back to the exact position he previously was to continue scrolling downwards. What currently happens is when a user clicks on the news article and then returns to the main page (i.e. hitting back/previous page) the displayed items from the repeater is basically back to it’s default/initial position.

I can create memory session via (https://www.wix.com/corvid/reference/wix-storage) for remembering. The problem is I’ve tried using different variations of the code below but it always returns 0.

export function boxL_viewportEnter(event) {$w("#items").loadMore(); 
console.log($w("#items").getCurrentItemIndex()) }

Can anybody point me in the right direction as maybe I’m not approaching this the right way (I thought of pagination but it didn’t work as well)…

Thanks for your time and happy New Year! :slight_smile:
Website: https://www.emunations.com/

2

You have a —> setter

import {local} from 'wix-storage';

local.setItem("key", "value");

and a —> getter

import {local} from 'wix-storage';

let value = local.getItem("key");

First you have to set something, before you can get it.

You have to save the current “page-index”, everytime when the page-index changes and set it to the local-storage.

See here…

This would save the current page-index of your dataset into local-storage.

import {local} from 'wix-storage';

let myValue = $w("#myDataset").getCurrentPageIndex()
local.setItem("key", myValue);

And then you would just have to load it, when you need the las current state of the page-index (stored in the wix local storage).

With this one, you would be able to get back the last saved state of the page-index.

let myValue = local.getItem("key");

Everytime, when you “loadMore” data, the page-index should normaly change.

Perhaps you could also work with …

Good luck and happy new year!

3

Hey!

Thanks for the thorough reply, I’ve played around with this approach but I can’t find in the API library an equivalent to “setCurrentPageIndexis” to force the reapter to display the saved value

import {local} from 'wix-storage';

$w.onReady( () => {
  $w("#items").onReady( () => {
      console.log(local.getItem("key"));
      'setCurrentPageIndex would go here...
  } );
} );

export function boxL_viewportEnter(event) {
   $w("#items").loadMore();
   let myValue = $w("#items").getCurrentPageIndex();
   local.setItem("key", myValue);
   console.log(local.getItem("key"))
}

I’ve also played around with “getcurrentitemindex” / “setcurrentitemindex” but the repeater displays it’s default pagesize length (i.e. 4)…

Thanks for your time, I really appreciate it :slight_smile:

4 
import {local} from 'wix-storage';

$w.onReady( () => {
  $w("#items").onReady( () => {
      console.log(local.getItem("key"));
      'setCurrentPageIndex would go here...
  } );
} );

export function boxL_viewportEnter(event) {
   $w("#items").loadMore()
   .then(()=>{
      let currentItemIndex = $w("#items").getCurrentItemIndex();
      let currentPageIndex = $w("#items").getCurrentPageIndex();
      
      console.log(currentItemIndex)
      console.log(currentPageIndex)
      
      local.setItem("ItemIndex", currentItemIndex);
      local.setItem("PageIndex", currentPageIndex);
   })
}

Which results do you get in CONSOLE ?

5

When viewpointEnter is triggered, console shows:
0
2

On next view point entry:
0
3

…

0
4

Do you think it’s possible to use “getCurrentPageIndex” value to force the repeater to return to that position when returning on this page? If not, do you know any other methods of getting the repeater to display last position (i.e. workarounds such as PageIndexValue*NumberItemsDisplayed)?

6

I will take a closer look at this soon.

Wait! Normaly you have already everything you need to achieve your aim.
The CONSOLE-LOGs shows you some changements on viewport-enter-events.
That’s the key!

You already are able to switch PAGES (START-PAGE,2,3,4) using → currentPageIndex

 console.log(currentPageIndex)

Now what you need is to load the current page again at its last state/position.
How to do? See here…

And all your last positions are saved in the wix-local-storage!

local.setItem("PageIndex", currentPageIndex);

So you just have to get the VALUE back out of that local-storage.

local.getItem("PageIndex");

When page loads!

Good luck!

7

Thanks for helping me out, I really appreciate it :slight_smile:

Here’s what it looks like:

import {session} from 'wix-storage';

if (session.getItem("mpi") === null) {
    console.log("IS NULL");
} else {
    console.log("NOT NULL");
    console.log(session.getItem("mpi"));
    $w.onReady( () => {
        $w("#items").onReady( () => {
                let IndexPage = session.getItem("mpi");
                console.log(IndexPage);
                $w("#items").loadPage(IndexPage);
        })
    })
}

export function boxL_viewportEnter(event) {
   $w("#items").loadMore()
   .then(()=>{
      session.setItem("mpi", $w("#items").getCurrentPageIndex());

      console.log(session.getItem("mpi"))
   })
}

If the KEY (“mpi”) is NOT NULL and has a value, when returning back to page:

The Browser-Console returns and error indicating its not a “value”.

928×860 109 KB

Maybe it’s treating “IndexPage” as a String instead of number?

With all that in mind,
IF instead I put a real number, then the whole process works so clearly the issue is the “IndexPage” not being treated as a number…

        $w("#items").loadPage(8)

I will keep trying but I really think it’s very close to being resolved :stuck_out_tongue:

TestPage: https://www.emunations.com/testh

8

Then try to find it out.

console.log(typeof "yourValueHere")
9

When you store it in memory, it’s converting it to a string instead of a number. So even though the console is printing it as 2 when you get it back from wix-storage, it’s really “2”. Try wrapping your session . getItem ( “mpi” ) into parseInt( session . getItem ( “mpi” )), to convert it to a positive integer.

If you want to add some error handling as well, for your own sanity :smiley:, then in the line right above this you can also add:

if(isNaN(session.getItem("mpi")) { throw Error("The value returned is not a valid number" }

Hope this helps, in adding to Russian’s excellent answers.

10

It’s solved now, thanks for your help russian-dima and Chris :slight_smile: