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).
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…
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, 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.
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.
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.
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.
<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?
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”.
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?
