Load more like page extender on same page

Ask the community
,
1

I have a page with many contents so I want when a user vistis that page content will display but limited and there will be a button at bottom saying load more , and if user clicks on load more the page will page from there contuing displaying content
In short I want load more like button on the bottom of the page and if user clicks it the page will extend displaying contents

2

Hey,

In order to do so, please follow the instructions below:

  1. At the onReady function of the page, you would need to collapse all the elements that you wish not to be loaded:
    Text - Velo API Reference - Wix.com
    Text - Velo API Reference - Wix.com

  2. Add a " Load More " button.

  3. Create an onClick event.

  4. Expand all the collapsed elements:
    Text - Velo API Reference - Wix.com

Have a good day,
Tal.

3

Hi,

I have Load More button on my page and it is linked to the Dataset correctly however it doesn’t load the correct amount although it still has more to load. This is the URL. https://www.easternstyles.com/artificial-floral-garden I have also attached an image of the issue.

1579×838 220 KB

4

Have you synced all data to the live site? Should the issue persists, please provide us with few examples of records which were not loaded so that we can test it on our end.

Thanks,
Tal.

5

Hi Tal,
I synced all data to live site and also cleared browsing data as well but the issue still exist. Please see videos also you can view the issue on this page. https://www.easternstyles.com/artificial-floral-garden

6

Hi,
I’ve accessed your editor and noticed that you’ve linked the button to the “Load More” option. However, I couldn’t understand which records did you expect to load which were not loaded. How many records do you expect to be loaded when clicking on the “Load More” button?
Do you refer to the fact that when clicking on the “Load More” button, it doesn’t display 5 items on the last row?

7

HI,
I have the dataset settings to display 20 items. What I thought is that when the load more button is clicked, it is to display an additional 20 items. I works fine initially. Where my 20 items are display then load more is clicked it displays another 20 and load more is clicked again it displays another 20 but then for some reason it starts to load 16 items or 18 items or 17 items instead of the 20. That’s my issue

8

Ok, I understand now what you were referring :slight_smile:
I’m forwarding it to the relevant department and get back to you when I have more details about it.

9

Hi Tal,
I know this is not the correct thread for this but I have commented there but to no avail. There is no color in my coding and its it conflicting with my web development. Please help! The thread below is where I made the comment

10

I’ve answered you on the relevant thread. As for this issue, I’ll get back to you once it’s resolved.

Best,
Tal.

11

Hi Nathan,

could you specify an order on your dataset? For example sort by item name? The would solve the issue.

12

Hi Giedrius,
Thank you for your response however the problem is exist after I specified the order. I had specified using the date created. Do I have to use item name? Also I am trying to figure out how to mix the data as well so it will be random so the user will see different items every visit so I think this solution might clash when I figure out that one. I am seeking help for that solution on the forum as well but nothing worked for me yet.

13

We sort by date created by default. The problem here is that dates are all the same. For paging to working consistent sort order is crucial.

I see that you have updated to title2 and it now works. If you want to keep it by date, you can still sort by date, but add a second sort order attribute to resolve cases were the values for date are the same.

To randomize order, you could try playing with different combinations of sorts. Choose sort attribute(s) at random and randomly sort either descending or ascending. This does not guarantee complete randomness, but something in that direction.

14

Hey Nathan, i see you figured out how to correctly do the Load More code by just scrolling down. Can you PLEASE tell me how you did that?

15

I need help!

16

I need to do this. Please Help.