Auto load content on scroll down

Ask the community
,
1

Hi,
I want to be able to load content on scroll down on some of my pages. Is this possible with wix code?

1 Like
2

also interested

EDIT : I found this !

I had to tweak it a little, I added an “onViewportEnter” event to a line I placed under the repeater and it automaticly loads more content from it.

export function line12_viewportEnter(event, $w) {
	$w("#dynamicDataset").loadMore()
      .then( () => {
      console.log("Done loading more data");
    });
}
3

Tristan,
This works like a charm bro. Thanks a million. If you want to see it in action on my site check here

https://www.easternstyles.com/babies-kids-toys-1

Thanks again Tristan

4

I’m glad I could help, and find a way to achieve it myself :wink:

5

This might be of interest to you. I have yet to get it to work like they are showing, but I am very new at coding and missing some little thing that they are probably not showing.

https://www.youtube.com/watch?v=Hx7_8-lRsW0&feature=youtu.beI

6

Guys please help me, I do not know anything about coding. (also what is a repeater?) I’m trying to make website load more content only when you scrolls down. Right now i’m using lists to display items (3 lists to 3 columns, each has dozens of products). loading all at once is very very slow and this is killing me. Please help guys!

7

Hi Shao,

a good entry point to repeaters can be found here:
https://www.wix.com/code/home/repeaters

There is also a nice video tutorial by a fellow Wix Coder here:

I hope this helps you get started! Have fun Wix Coding!

8

thank you very much!

9

I am now using repeater to display items on my page, however, I have thousands of products to display and it definitely won’t happen if the page tries to load everything at once. Since I now have repeaters and datebase, please tell me how do I code or what I do to make it be ‘unlimited scrolling’ or only load when scrolls. I do not know anything about coding, it would be great if you can give me more details.

10

Hey Shao,

  1. Just place an invisible line under the repeater, then right click on it and choose ‘properties’

  2. click on " add a OnViewPortEnter" under event, and press enter. This will add a bit of code that looks like “export function line12_viewportEnter(event, $w)” (Mine is “line 12” but yours could be “line45” etc.)

  3. paste this code in the page’s code :

 export function line12_viewportEnter(event, $w) { 
  $w("#dynamicDataset").loadMore() 
   .then( () => {       
   console.log("Done loading more data"); 
     });
   }

and there you have it ! It will automatically load more content when the line appears on the user’s screen !

NOTE :

  • replace #dynamicDataset by the ID you used for the dataset on your page

  • replace #line12 by the ID you used for the line on your page

11

I tried, the codes were entered fine, but products would not load more than the dataset item display number??

12

I would love to know how did you setup filters as buttons on top os the repeaters.

13

Hi, is this still working? I tried so many times and it is not working at all. The products would not load at all. Please help me!

14

You have to set an event on the element that loads more, turn on Dev mode and click on the element, the option to add “onViewportEnter” will be visible in the code panel.