(Squarespace) Sort blog post in Alphabetical order

[tuanphan]

Here we will use custom code to sort blog post in alphabetical order, however if you aren’t familiar with code, you can use this plugin (follow step #2 in this thread to use plugin) instead.

You can add code to Code Injection > Footer.

<script>
let allSortedPosts = [];
let postsPerPage = 20;
async function getAllPostsSorted() {
   try {
       const currentPath = window.location.pathname;
       const collectionUrl = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
       
       let allPosts = [];
       let offset = null;
       let hasMore = true;
       
       while (hasMore) {
           const url = offset 
               ? `${collectionUrl}?format=json&offset=${offset}`
               : `${collectionUrl}?format=json`;
               
           const response = await fetch(url);
           const data = await response.json();
           
           if (data.items && data.items.length > 0) {
               allPosts = allPosts.concat(data.items);
               
               if (data.pagination && data.pagination.nextPageOffset) {
                   offset = data.pagination.nextPageOffset;
               } else {
                   hasMore = false;
               }
           } else {
               hasMore = false;
           }
       }
       
       allPosts.sort((a, b) => {
           return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
       });
       
       allSortedPosts = allPosts;
       return allPosts;
       
   } catch (error) {
       console.error('Error fetching posts:', error);
       return [];
   }
}
function displayPage(pageNumber = 1) {
   if (allSortedPosts.length === 0) {
       return;
   }
   
   const startIndex = (pageNumber - 1) * postsPerPage;
   const endIndex = startIndex + postsPerPage;
   const postsToShow = allSortedPosts.slice(startIndex, endIndex);
   
   const container = document.querySelector('.blog-basic-grid');
   const pagination = document.querySelector('.blog-list-pagination');
   
   document.querySelectorAll('.blog-basic-grid--container').forEach(article => {
       article.remove();
   });
   
   postsToShow.forEach((post) => {
       const publishDate = new Date(post.publishOn).toLocaleDateString('en-US', {
           month: '2-digit',
           day: '2-digit',
           year: '2-digit'
       });
       
       const article = document.createElement('article');
       article.className = 'blog-basic-grid--container entry blog-item is-loaded';
       article.innerHTML = `
           <div>
               <a href="${post.fullUrl}" class="image-wrapper">
                   <img src="${post.assetUrl || ''}" alt="${post.title}" class="image" 
                        style="display:block;position: absolute; height: 100%; width: 100%; object-fit: cover;">
               </a>
           </div>
           <div class="blog-article-spacer"></div>
           <div class="blog-basic-grid--text">
               <div class="blog-meta-section">
                   <span class="blog-meta-primary">
                       <span class="blog-author">${post.author ? post.author.displayName : 'Admin'}</span>
                       <time class="blog-date">${publishDate}</time>
                   </span>
                   <span class="blog-meta-delimiter"></span>
                   <span class="blog-meta-secondary">
                       <span class="blog-author">${post.author ? post.author.displayName : 'Admin'}</span>
                       <time class="blog-date">${publishDate}</time>
                   </span>
               </div>
               <h1 class="blog-title">
                   <a href="${post.fullUrl}">${post.title}</a>
               </h1>
               <div class="blog-excerpt">
                   <div class="blog-excerpt-wrapper">
                       <p>${post.excerpt || 'No excerpt available'}</p>
                   </div>
               </div>
               <a class="blog-more-link" href="${post.fullUrl}">Read More</a>
           </div>
       `;
       
       container.insertBefore(article, pagination);
   });
   
   updatePagination(pageNumber);
}
function updatePagination(currentPage) {
   const totalPages = Math.ceil(allSortedPosts.length / postsPerPage);
   const pagination = document.querySelector('.blog-list-pagination');
   
   if (!pagination) return;
   
   const newer = pagination.querySelector('.newer');
   const older = pagination.querySelector('.older');
   
   newer.innerHTML = '';
   older.innerHTML = '';
   
   if (currentPage > 1) {
       newer.innerHTML = `
           <a href="#" onclick="displayPage(${currentPage - 1}); return false;" rel="prev">
               <span class="prev-label">Newer Posts</span>
           </a>
       `;
   }
   
   if (currentPage < totalPages) {
       older.innerHTML = `
           <a href="#" onclick="displayPage(${currentPage + 1}); return false;" rel="next">
               <span class="next-label">Older Posts</span>
           </a>
       `;
   }
}
async function initSortedBlog() {
   await getAllPostsSorted();
   displayPage(1);
}
initSortedBlog();
</script>