ViewportEnter doesn't fire properly...I think?

jaoshsethna · June 9, 2020, 2:50pm

Hi All. Followed this video from Nayeli https://www.youtube.com/watch?time_continue=17&v=qP2Xfr_4A4I&feature=emb_title for the auto load content scrolling. Worked great when there was only for a small database. But it glitches when there are over 30-35+ items.

The viewport enter function is not getting logged after the dataset loads 2-3 times. You have to scroll all the way back above, and then down again towards the column strip for the viewport to enter again.

Can someone help out?
https://www.timesharenation.com/timeshares This has currently over 100+items in the database. Watch that nothing happens 2-3 times after the data loads if you keep scrolling.

$w.onReady(function () {

 
    $w("#loadMoreStrip").onViewportEnter((event) => {
    console.log("viewport entered");
           $w("#dataset1").onReady(() => {
             console.log("dataset ready");
 
              $w("#loadMore").show();
                $w("#dataset1").loadMore()
                .then(() => {
                    $w("#loadMore").hide();
                    console.log("Done loading more data");
                });

        });

    });
    

    $w("#searchButton").onClick((event) => {
 
        wixData.query('resort')
            .contains('filter', $w('#locationDrop').value)
            .eq('available', true)
            .find()
            .then(res => {
                $w('#repeater1').data = res.items;
                $w('#loadMore').hide();
            });
    });

});

allu112apina · June 9, 2020, 3:19pm

Not sure if this will help but try to put the whole thing inside dataset onReady:

Because what if the dataset is not ready when you enter the “viewpoint”

Like this:

$w("#dataset1").onReady(()=>{

$w("#loadMoreStrip").onViewportEnter((event) => {
    console.log("viewport entered");
             console.log("dataset ready");
 
              $w("#loadMore").show();
                $w("#dataset1").loadMore()
                .then(() => {
                    $w("#loadMore").hide();
                    console.log("Done loading more data");
                });

        });

    });

jaoshsethna · June 9, 2020, 3:22pm

Tried that too initially but it didn’t help.

allu112apina · June 9, 2020, 3:27pm

@jaoshsethna Alright. Have you tried using a delay in the end of each load of results?

Maybe like this?

$w("#loadMoreStrip").onViewportEnter((event) => {
    console.log("viewport entered");
           $w("#dataset1").onReady(() => {
             console.log("dataset ready");
 
              $w("#loadMore").show();
		setTimeout(function(){
                $w("#dataset1").loadMore()
                .then(() => {
                    $w("#loadMore").hide();
                    console.log("Done loading more data");
			},2000);
                });

        });

    });

As it seems to be the loading time that is too fast for the database to handle

jaoshsethna · June 9, 2020, 4:39pm

@allu112apina Doesn’t help unfortunately. Actually getting stuck after the first load. Tried to have a setInterval function too but did not help. Tearing my hair out for such a simple thing. The loading is supposed to be fast.

allu112apina · June 9, 2020, 7:09pm

@jaoshsethna After further trying out your site, it seems that your $w ( “#loadMoreStrip” )

is somewhere in the middle (It doesnt move with the botton listing.

As you dont need to enter the bottom or anything, you can just wiggle the vertical scrolling bar in the middle, and it will load more stuff.

Try using a box instead of a strip. Put it at the bottom and see if it goes down as they load.

CODE-NINJA · June 9, 2020, 8:35pm

Hello Jaosh Sethna,

i think this is what you are looking for…

var STARTStripStatus
var ENDStripStatus


$w.onReady(function () {    
 
});

export function STARTstrip_viewportLeave(event) {STARTStripStatus = false,  xxx()}  // STARTstrip visible ??? ---> NO!
export function STARTstrip_viewportEnter(event) {STARTStripStatus = true,   xxx()}  // STARTstrip visible ??? ---> YES!
export function ENDstrip_viewportEnter(event)   {ENDStripStatus = true,     xxx()}  // ENDstrip visible ??? ---> YES!
export function ENDstrip_viewportLeave(event)   {ENDStripStatus = false,    xxx()}  // ENDstrip visible ??? ---> NO!


function xxx  (parameter) {
    console.log ("END-STRIP arrived !!!")

 if(STARTStripStatus == false && ENDStripStatus == true){console.log ("LOAD-MORE-DATA-NOW")
 
        $w("#dataset1").onReady(() => {
            console.log("dataset ready")
            $w("#dataset1").loadMore()
 
            .then(() => {
                console.log("Done loading more data, right now.");
            });

        });
    }

 else{console.log ("DO-NOTHING")

    }

}

You will need 2x STRIPES (an “start-stripe” and an “end-stripe”)
In this example the two stripes are called…

a) “STARTstrip”
b) “ENDstrip”

Check it out and try to understand what happens

here a little EXAMPLE 4 YOU…
https://mt2-king.wixsite.com/website/autoload-strip

givemeawhisky · June 9, 2020, 11:41pm

@jaoshsethna
What are you getting when you just use Nayeli’s code as it is without the dataset onReady?

export function viewStrip_viewportEnter(event) {

 $w("#loadmore").show();  //This is your GIF or animated image
 $w("#dataset1").loadMore() //This is your dataset
  .then(() => {
   $w("#loadmore").hide(); //This is your GIF or animated image

   console.log("Done loading more data");
  });
}

https://codequeen.wixsite.com/lazy-loading
https://www.totallycodable.com/wix/corvid/auto-load-content-on-scroll

I tested your linked site and all I am getting is the first repeater with the three items and then the loading gif and that is it, nothing else happens after that.

Is that using the code that you have with the dataset onReady?

Don’t forget that @Code Queen Nayeli is already in this forum, so as you are using her code you can always try contacting her to see what she suggest as well.

Although, I can’t guarantee a quick response as that will always depend on how busy she is etc, etc.

Take note as well that when Nayeli’s page first loads up the connected repeater is not shown on the page itself, the only thing that she has set above the page fold is the header with the menu and picture.

https://www.wix.com/blog/2019/04/website-speed-optimization/#:~:text=‘Above%20the%20fold’%20refers%20to,the%20first%20section%20that%20loads.

Also see Homepage Design here.

So, in theory her page is loaded before you scroll down the page and get to the actual repeater that is set up with load more from the dataset.

Whereas with your website page the repeater is included in the first things that you see above the fold, so the website has to load that first along with then the dataset and that again depends on the size used here.

You can try changing your page design so that the first repeater is not above the page fold and so is not loaded first as in Nayeli’s page with the fact that you have to scroll down in the first place to reach the first viewport point.

As for using the Wix Dataset API and the loadMore function from it.

If you have to have the repeater at the top, then try adding the loadMore function to to the onReady part as in the API Reference.

Load more dataset content when the page loads

$w.onReady( () => {
  $w("#myDataset").onReady( () => {
    $w("#myDataset").loadMore()
      .then( () => {
        console.log("Done loading more data");
      } );

  } );

} );

In theory, that way it should load the first next part of your setup when the page loads and that should then give the page enough time for the user to scroll down to the next viewpoint for the page to recognise it correctly.

Assuming you have already, however take a read of the loadMore function info.

Note
A dataset needs to load its data before you call its loadMore() function. Usually a dataset finishes loading a short time after the page it is on finishes loading. So if you call loadMore() inside the page’s onReady() event handler, the dataset might not be ready yet.

To call loadMore() as soon as possible after a page loads, use the dataset’s onReady() function inside the page’s onReady() event handler to ensure that both the page and the dataset have finished loading.

Finally, have a look at thus previous post too, as another way is discussed to, so that you are not loading all of your dataset up in one go.

jaoshsethna · June 10, 2020, 7:39am

Thanks for rep;lying @givemeawhisky

I did reach out to Nayeli. She was helpful with the time she gave to it. but the situation remained the same with her original code also. I’ll try for the cosmetic changes but I think the viewportEnter still won’t fire after the first 2-3 batches. Let me see. The whole point of this was to make the data load faster yet look seamless.

On the other hand, https://www.timesharenation.com/timeshares-free-week loads perfectly with the same Nayeli code, but I’ve just used a button instead of a loader gif. This doesn’t look seamless though. This should be a pretty simple thing so I am not sure where the problem lies

jaoshsethna · June 10, 2020, 7:43am

Do you put the start strip above the repeater? or one above the other?

code-queen · June 10, 2020, 9:11am

@jaoshsethna , @givemeawhisky thanks guys …

Reading what someone else wrote above and what GOS mentioned about the placement … regarding the repeater and Strip …try checking a couple a few things …

See if the page was manually extended instead of auto adjusted when the load more strip was added. If it was manually extended, it may not be moving as smoothly as it should when loading more content. It may be getting stuck above the fold after it finishes loading more items, meaning it will require user to scroll up a little then down again to trigger the code on viewport in.

Also try to trigger code when the page is ready and then trigger again once or twice after that.

I use this function often, especially on sites that have large amounts of records, but I usually trigger it using 9 or 12 records as default in the dataset settings for the reason that the load more strip remains out of view to trigger the code as soon as it comes into view again.

jaoshsethna · June 10, 2020, 6:04pm

Thanks for the replies. Made a fresh new page with the repeaters and strips. Page resizes automatically when the strip is added. Added 11 items to load at once.

Still the same issue

allu112apina · June 10, 2020, 8:38pm

@jaoshsethna

Sorry for bad quality, it was max 50mb and i made the quality worse bcs of that.

But yeah as you can see by using box onViewPointEnter, it works perfectly for me, no issues.

In the example there was 53 items NOTE: I tried also loading 11 items at once, and it worked.

Link: https://magniwinter-jewelry.wixsite.com/mysite-3

CODE-NINJA · June 10, 2020, 10:54pm

Hello Jaosh Sethna ,

you can see the two —> STRIPES which are (red marked) in the example i puted into my last post.

one is at the absolute top of the page (you can see it, when you scroll to the TOP)
the other at the absolute bottom (you can see it, when you scroll to the BOTTOM)

All you have to do is —> to create 2 thin stripes (about 5px or even less)
the name-IDs of the STRIPES i already gave you…
a) “STARTstrip”
b) “ENDstrip”

Set-up 4x the Viewport-Events and let’s go

Yes of course it’s not the best sollution, but sometimes you have to be tricky, if you are not a PRO.

There are many ways to ROME

jaoshsethna · June 11, 2020, 7:28am

https://www.timesharenation.com/blank Just stops after the first load.

import wixData from 'wix-data';

$w.onReady(function () {

$w("#box1").onViewportEnter((event) => {    
console.log("viewport entered");
 
 //$w("#loadMore").hide();

 
    $w("#dataset1").onReady(() => { 
    console.log("dataset ready");   
 
 //  $w("#box1").show();
        $w("#dataset1").loadMore()
            .then(() => {
 //$w("#box1").hide();
                console.log("Done loading more data");
            });
 

    })
});
});

Viewport does not fire the second time

Just not sure now if I am doing something intrinsically wrong!

allu112apina · June 11, 2020, 8:13am

@jaoshsethna
" Just not sure now if I am doing something intrinsically wrong!"

It could be the case.

Look at this video:

If i just scroll between these:

Westgate Lakes Resort And Spa
Orlando, Florida
Westgate Lakes Resort & Spa in Orlando, Florida, provides guests all the comforts of a fully furnished home with accommodations ranging from studios to spacious four-bedroom villas, all within minutes of Orlando’s world-famous theme parks and attractions.
Stay Free In 2020
More Info
Your Text Here
Vacation Village At Parkway
Kissimmee, Florida
This expansive resort with modern buildings 7-10 stories high, is 6.4 miles from the Magic Kingdom, 9 miles from SeaWorld and 12.3 miles from Universal Studios Orlando.
Stay Free In 2020
More Info
Your Text Here
Sheraton Vistana Resort
Orlando, Florida
Enjoy a warm welcome and an unforgettable stay at the Sheraton Vistana Resort Villas, Lake Buena Vista/Orlando. Spread over 135 acres of tropical landscaping, with seven refreshing pools and eight whirlpools, our destination resort places recreation at your feet.
Stay Free In 2020

It loads more stuff.

It must be that your box doesn’t move with those other listings. It just stays between those 3…

Not sure how this is possible because it should move the box and also act like it :S

Maybe someone who can access your editor can help, or just try to make it again from scratch.

jaoshsethna · June 16, 2020, 7:16am

Yes exactly!! Its like the strip / box gets stuck when the data loads!

Scratching my head now as to what could be the issue.

jaoshsethna · June 16, 2020, 7:23am

The thing is that it works well in the preview section but gives a wix sdk warning. It does not work on the live website

Wix code SDK Warning: The data that was passed to data contained at least two items with the same ID: 3e112032-c0e9-4226-b508-fd1bd9936b63. Only the first item was accepted.

the warning is for multiple IDs. There are no duplicates in the database.

jaoshsethna · June 16, 2020, 7:25am

Thanks buddy. Again like the other solutions it works well for the first load then does not. https://www.timesharenation.com/copy-of-free-timeshares-tester

The thing is that it works well in the preview section but gives a wix sdk warning. It does not work on the live website
Wix code SDK Warning: The data that was passed to data contained at least two items with the same ID: 3e112032-c0e9-4226-b508-fd1bd9936b63. Only the first item was accepted.

The warning is for multiple IDs. There are no duplicates in the database.

yisrael-wix · June 16, 2020, 8:18am

Hey Jaosh, this certainly sounds strange. I’m sending this on to QA for evaluation.

Topic		Replies	Views
Repeater Viewport not firing Ask the community code , question	5	123	February 19, 2022
OnViewEnter Port stop working automatically Ask the community code , question	0	83	March 12, 2019
Make Your Site Respond when Elements Scroll into View Show and tell code , tips	17	5379	July 31, 2019
Repeater not loading code after first 12 entries Ask the community code , question	3	100	April 28, 2022
[SOLVED] LoadMore() doesn't work anymore. Ask the community code , question	6	179	December 12, 2020

ViewportEnter doesn't fire properly...I think?

Related topics