(Squarespace) Random Blog Items on Page Load

[tuanphan]

To make random Blog Items on Page Load, you can use this code to Code Injection > Footer.

<script>
document.addEventListener('DOMContentLoaded', function() {
var gridContainer = document.querySelector('.collection-content-wrapper');
  
  if (gridContainer) {
    var gridItems = Array.from(gridContainer.querySelectorAll('.blog-item'));
    
    var shuffledItems = shuffleArray(gridItems);
    
    while (gridContainer.firstChild) {
      gridContainer.removeChild(gridContainer.firstChild);
    }
    
    shuffledItems.forEach(function(item) {
      gridContainer.appendChild(item);
    });
  }
  
  function shuffleArray(array) {
    var currentIndex = array.length;
    var temporaryValue, randomIndex;
    
    while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    
    return array;
  }
});
var randomGridEditingOptions = {
  title: "Random Grid Options",
  description: "When enabled, items in the grid will be randomly arranged each time the page is loaded",
  enabled: true
};
window.SITE_CONFIG = window.SITE_CONFIG || {};
window.SITE_CONFIG.randomGrid = randomGridEditingOptions;
</script>

To disable this random feature, you can change true to false