Showing one random collection item on refresh (bypassing the 12 hour CDN server refresh)

Hi Sophie,

Since it’s javascript, you should wrap the code in the appropriate tags. Just place <script> before the code and </script> at the end. Good luck!

Hi, I’ve been trying this and the other option below, but with no success.

I’ve tried it with the items not limited and I just get all the items stacked in view. I even tried it with the items limited to 1. Either way there was no randomising on refresh.

Can you help?

https://preview.webflow.com/preview/mediavision?utm_medium=preview_link&utm_source=designer&utm_content=mediavision&preview=46fc4ba3e606aa9ffb7678ca1cfad68e&mode=preview

Hey, appreciate the tutorial this far. Unfortunately, it’s not working for me but I feel like I’m so close. If you could help me figure this out I would be so grateful.

image
image

Anyone get a fix for this?

Hi @dannytaro,

Sorry for my late response. I hope you’ve figured it out by now. You needed to uncheck “Limit items”.
I’ve updated my original post to make this more clear.

Have a great day.

1 Like

I’ve updated my original post. Hopefully this makes it more clear. Thanks.

1 Like

Not sure what I’m doing wrong but just couldn’t get this to work. Have taken a different yet slightly more manual approach which might be better as it’s a folio.

Cheers for getting back to the thread though.

Love that this is in the works somewhere… needs to just be a native option… but i am having some issues making this work… here is my read-only link… i have the code in there properly (i believe)… and i think i have the list put in properly… https://preview.webflow.com/preview/dustins-testing-pages?utm_medium=preview_link&utm_source=designer&utm_content=dustins-testing-pages&preview=fb5e5c81f5a9857412fe919462448068&pageId=605266e5bd3896024a8910d4&mode=preview

<script>
	  $(document).ready(function() {
        var show_limit = 3;
    $('.card-flip-item').each(function(){
      if (   $(this).index() >= show_limit) {
         $(this).addClass('hidden-list-item');

       	 }
      });
    });

    var cards = $(".card-flip-item");
    for(var i = 0; i < cards.length; i++){
        var target = Math.floor(Math.random() * cards.length -1) + 1;
        var target2 = Math.floor(Math.random() * cards.length -1) +1;
        cards.eq(target).before(cards.eq(target2));
    }
</script>

The original code still works for me… Slightly different to the current version. However, it doesn’t seem to be totally random as I keep getting 3-5 cards from a deck of 49 too many times… @Iskandar @Waldo if you might be able to shed any light?

Hi guys, thank you the script it’s really useful.
Considering that this method is being used in a collection page that belongs to the same collection of the random item, is there a way to exclude the current item from the random selection?

Thanks in advance!

Hi Rosario,

I believe you can simply use the filters build in Webflow. E.g. I have a collection named “Client Logos”. In the designer I select the collection list, then I add a filter through the menu on the right side of the screen where I select “Client Logo is not Current Client Logo”.

Screen Shot 2022-02-16 at 15.10.01

Here’s some more information on the subject. Filter Collection lists | Webflow University

Good luck with your project!

@Iskandar Thanks a lot for a magic script! However, some of the times when I reload the page, no item shows at all. Can you see where I’ve done wrong?

The script is added to the ‘Home’ page and the items name is hero6.

Thanks in advance!

https://preview.webflow.com/preview/marselius?utm_medium=preview_link&utm_source=dashboard&utm_content=marselius&preview=a0238c69dc5b44e5091d3e9ff6616090&workflow=preview

The site: https://marselius.webflow.io/

Hi Iskandar!

This code works great! The item gets randomised on refresh BUT I have some filters applied which do not affect the collection (on staging) because of the code.
Would you know how to fix that?

I’m experiencing the same issue @JoeMillion. Did you figure out how to make sure it doesn’t rotate through the same items too often? Let me know! That would be very helpful. Thank you :slight_smile:

I gave up on it in the end, I wasn’t able to find a way to make it work as desired.

Here’s a nocode attribute that will allow you to sort your list randomly on every page refresh.
It will work with any collection list filter settings.

And a cloneable to demonstrate it;

I LOVE YOU, DUDE! If you come in Berlin, I will buy you a beer!

I have over 140 items in my cms list. The code works great, but my page keeps loading those hidden items until my browser gives up. Is there a way to not just hide (display:none) them from the layout, but stop the browser from rendering the other 139 items?

Webflow does not provide dynamic filtering so you either use it the way it is designed (CMS collection list random, limit one) or use the hack to pull the list and filter with JS which is not performant.

The ideal solution is to avoid using a collection list at all and remotely fetch a random item on page load via JS and a remote API.

1 Like

Hi Julia, I’m not sure which solution you’re using.

With 140 items you can use 2 collection lists. Sort and filter them identically, and then set the first to display 1 - 100, and the second, 101 - 200.

You’d need a small script to merge them and then randomly sort them.
If you will only ever show a single item and you want to get creative, you may even be able to skip the sort step, and create your random number as a piece of CSS that just shows the Nth item.

That’s likely the most performant way since all of your data is retrieved in the initial page load, however as @webdev indicated, it doesn’t scale well if your number of items will grow significantly as you’ll need itemcount/100 collection lists in the page.

If your items list will grow, you’d do better building a dynamic JS-fetch based solution out of the gates.

1 Like