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).
