How can I limit dynamic Items on my page?

Design help CMS
1

Hi everyone, I am making a website for client with CMS and I have some troubles with it. It’s a website for estate agency, and I have already done Collection with all necessary stuff, but I don’t want it to show every Item on one page. I mean - If there will be like 100 items in this collection it will all show in one page what can cause browser crash or multiple troubles when scrolling by users with weak hardware. (every offer contain slider with 4 photos and it is also could slow down browser when it will be so many items on one page).

I have searched a lot of topics for solution, but i have not found anything. I thought about infinite scrolling, but i don’t think it is possible with dynamic data. It can be in the form of pages for example the user is clicking “next offers” button and the page is reloading with more items, but i do not know how to manage or even make it.

Can anyone help me?

2

Hello @walaszczyku

Do you want to show that sliders on the page where will be the list of offers?

You could use tabs widget for creating “pagination”. Every tab-pane could contain same dynamic list, but limited by items quantity

3

Hello @sabanna, thanks for answer

Yes

Actually I am using tabs now for sorting offers by price and by size of flat space. It won’t be too much for browsers?
I can do it with dynamic data but if client will add 10 offers there will be 3 tabs which are empty.

Here is the screenshot:

1280×717 654 KB

sortowanie is in tabs: cena and powierzchnia
under is dynamic item with big slider, and there can be multiple items

Thanks for help!

4

Well… I have an idea.
It is hard to be sure that I clearly understand how your collection structured, but maybe my idea will be useful.

  1. Add one more div to every tab-pane,
  2. Use dynamic list settings and limit “original” dynamic list to show from 1 to 50 items (just for example)
  3. Add to 2nd div the same styled and sorted dynamic list but limited from 51 till 100 items.
  4. Hide 2nd div initially (display: none)
  5. Create interaction which will show 2nd div only if user click “show more” button