Show random 8 CMS items on page refresh

[abon]

Need help with implementing this.

---

Here is my public share link: Webflow - mCube Design

[memetican (Michael Wells)]

Hi Anand, PM me if you need some dev help with this.
This cloneable is what you’re looking for.

[abon]

Thank you very much! This works perfectly!

[Svensson]

I have around 200 reviews for a site that I would like to show one at a time with the ability to go to the next ones, paginate, and have it show randomly with each page visit. So please upvote the issue here:
Maybe we should upvote this
https://wishlist.webflow.com/ideas/WEBFLOW-I-5660
Thank you

[memetican (Michael Wells)]

@Svensson

I have around 200 reviews for a site that I would like to show one at a time with the ability to go to the next ones, paginate, and have it show randomly with each page visit.

Randomization ( especially on each visit ) and pagination don’t play nice together. The reason is when you go to page 2, that’s a new visit, so you’ll get a new random list. Pagination becomes irrelevant quickly.

[Svensson]

Thank you so much for your reply. I understand your point, so can you think of something to help with this situation? Let’s say how to show ten reviews one at a time randomly picked. Maybe a slider, but then the second one could randomly be the first review anyway, as I guess one needs to set them one by one.

[memetican (Michael Wells)]

@Svensson

Here’s a cloneable I built of my approach. If you want to have a maximum # of random items, set your collection to no item-limit ( it will limit at 100 ), no pagination, and sort randomly. My sorting library will work on top of that.

The effect you’ll get is that every 12 hours, Webflow will randomly pick 100 of your total reviews. My library then resorts that 100 randomly on each page refresh.

If you avoid my “limit to” feature, you can combine it with a slider like splide.js to page through 10 at a time of those 100.

[CLONEABLE] Random collection list items, on every page refresh AND limit list count by breakpoint, too

I’ve seen a lot of requests for this, so I built a cloneable, and somehow it ended up solving two problems for the price of one. The ability to get a random selection of CMS items in your Collection Lists, on every page refresh ( not just once every 12 hours ). Plus, the ability to limit the number of items shown in a collection list differently at each breakpoint. These 2 features can be used together, or separately.

[ianm (Elias)]

Good work.

But one question: you are loading all collection list items, and then hide some of them correct?

Is that good practice? Since it will be heavy to load all elements if the collection is big? I have the situation, that I want to show a random Collection list item in the hero section. Do I always have to load all elements of the collection, just to show one?

Thx.

[memetican (Michael Wells)]

When the collection list is very large, I adjust this by building a central “data source” page that is hidden and contains all of the pre-formed elements in a paginated list.

Then I write JS to retrieve that data and display it in the current page.

You’d have to experiment with performance to figure out what setup suits you best. For example, you could;

• Set the pagination to 20, then pick a random page and a random item.
• Set the pagination to 100, then pick a random page and 6 random items from that one page request.
• Set the pagination to 1, then pick a random page get that one item.

Tradeoffs vary depending on the number and size of requests, the size of your individual items, etc.