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

Hi everyone,

I’ve been looking for a way to show one random collection item on every refresh.
@Waldo helped me in the right direction with this great piece of code to shuffle the order of items on every refresh. [CMS] Random sorting - #12 by Waldo

Unfortunately this code works with the posts available after the ‘Limit items’ was applied. So when you limited the amount of items to show to just one, you would just see the first collection item on refresh.

To solve this, I found the code below. You just add it to your page next to Waldo’s code and change the class name to the same one used in his code.

var cards = $(".listitemclassname");
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));

    
$( document ).ready(function() {
		var show_limit = 1;
$('.listitemclassname').each(function(){
  if (   $(this).index() >= show_limit) {
     $(this).css("display", "none");
       
    }
});
});
}

Now you can refresh the page > Webflow will load all collection items > Waldo’s code will shuffle them > my code will hide all items, but one.

Hope this will help someone!

Edit March 9 2021

  • I updated the code above, so you don’t need to add any custom css anymore.

  • Custom javascripts only work once published.

  • Do NOT check “limit items” in the designer. I know it can look messy, but that’s only because (previous point).

5 Likes

Let me know if I can get you a beer :+1: :+1: :+1:

1 Like

Hi there,

I’m trying this out but am not sure if I’ve pasted it in the correct spot and position with Waldo’s code (it isn’t working for me). Could you check the below for me please?

If the code is correct then maybe it is an issue with my class name? I named both the collection list with a class name and the collection list items with a class name and tried both but neither worked…

Thanks in advance for your help!

Hmm… I can’t see anything wrong with your code. The class name should be the collection-item indeed.Did you also include the custom css?

.hidden-list-item { display: none; }

EDIT:

Give this a try, then you don’t need the css.

var cards = $(".ArchImages");
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));
    
        
    $( document ).ready(function() {
		var show_limit = 1;
    $('.ArchImages').each(function(){
      if (   $(this).index() >= show_limit) {
         $(this).css("display", "none");
           
        }
    });
});
}
1 Like

Weblow converts class names to lowercase and adds hyphens on blank spaces on publish so your code should match. Check your code in devtools.

Thanks so much for your help guys, I’ve got it working now! I still had the limit for the CMS list set to show 1 and it stopped it from working.

1 Like

Hi team!

I’m having some trouble with this one! If anyone could possibly let me know where I’ve gone wrong I would be forever grateful, I feel like I’m reaching in the dark!!

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?