Streaming live at 10am (PST)

Turning Webflow site into a "randomise card" web app

I’m loving Webflow and wish to use it for my next project: A small web app that shuffles cards to help users get environmentally oriented startup ideas. I need help figuring out, though, if Webflow can hack this setup in some way.

Here’s the layout

Basic functionality
A database of cards
Each card has 3 features, a headline and an image
A layout like seen in the image with two random cards from the database shown
Hitting the shuffle button fetches a new card in each card position (no reload)

Creating this
I see how the Webflow CMS can work for creating the cards with two Collection lists, limiting each to 1 random Collection item.

But how can I create the shuffle button that loads 2 new cards with no page reload?

Thank you!

First understand that webflow caches pages, and pages are limited to 100 items from a collection list (without pagination). You would never be able to randomize more than 100 items pulled from the cache which would get refreshed every 12 hours.

What you would need to do it have a collection list with your cards, where all the items were hidden. Then using custom code, create an array of those items, randomize the array, then slice off the first two items, and show them or toggle a class. You could do this using JQuery or vanilla JS (would be easier with JQuery).

I would add that there are workarounds for the 100 limit, like multiple collection lists on a page. Then you would need to build your array from multiple lists or you could even load other lists from pages on your site via Ajax. However, there are always performance and practical considerations to take into account.

You could even use the webflow API with a remote server that returned JSON to your page script, to use as the source of your array. As you can see there are many ways to approach this.

Thanks for the answer Webdev!

If I could live with a page refresh, is there any way to remove the 12h cache so that every site refresh would fetch two new cards from collection lists with a “random” sort order?

Nope. When a collection list is randomized (or even rendered), it is added to the page content. All page content is cached.

It is a big reason webflow pages load so fast. All webflow pages are really static, with the exception of e-commerce which uses Ajax to manipulate the page and forms that post to the service.

You need to follow a method I defined above.

1 Like