To add a “Load more” button to a Summary Block and you can load more then 30 posts, like this.
You can use this code to Page Header Injection (page where you use Summary)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
let tpBlogItems = [];
let tpDisplayedItems = 0;
const tpMaxItemCount = 60;
const tpInitialItems = 30;
const tpLoadMoreCount = 15;
let tpIsLoading = false;
const tpSummaryBlock=$('.sqs-block-summary-v2').first();if(!tpSummaryBlock.length)return;function tpGetCurrentTimestamp(){return new Date().toISOString().split('.')[0].substring(0,15).replace(/:/g,'-')}
function tpDetectBlogUrl(){const firstLink=$('.summary-title-link').first().attr('href');if(firstLink){const pathParts=firstLink.split('/');if(pathParts.length>1){return pathParts[1]}}
return'blog'}
function tpLoadAllBlogItems(){if(tpIsLoading)return;tpIsLoading=!0;const blogUrl=tpDetectBlogUrl();console.log('Detected blog URL:',blogUrl);tpLoadItemsRecursive(blogUrl,'',[]).then(function(items){tpBlogItems=items;console.log('Loaded',tpBlogItems.length,'blog items');tpCreateCustomGrid();tpDisplayInitialItems();tpAddLoadMoreButton();tpIsLoading=!1}).catch(function(error){console.log('Error loading items:',error);tpIsLoading=!1})}
function tpLoadItemsRecursive(blogUrl,offset,accumulatedItems){return new Promise(function(resolve,reject){let apiUrl='/'+blogUrl;if(apiUrl.indexOf('?')>-1){apiUrl+='&format=json'}else{apiUrl+='?format=json'}
apiUrl+='&cache='+tpGetCurrentTimestamp();if(offset){apiUrl+='&offset='+offset}
$.get(apiUrl).done(function(data){let newItems=[];if(data.items&&data.items.length){newItems=data.items;accumulatedItems=accumulatedItems.concat(newItems);const nextOffset=data.pagination&&data.pagination.nextPageOffset;if(nextOffset&&accumulatedItems.length<tpMaxItemCount){setTimeout(function(){tpLoadItemsRecursive(blogUrl,nextOffset,accumulatedItems).then(resolve).catch(reject)},200)}else{resolve(accumulatedItems)}}else{resolve(accumulatedItems)}}).fail(function(){tpTryCollectionsIndex().then(resolve).catch(reject)})})}
function tpTryCollectionsIndex(){return new Promise(function(resolve,reject){const collectionsIndex=$('#collectionsIndex');if(collectionsIndex.length){try{const data=JSON.parse(collectionsIndex.val()||collectionsIndex.text());if(data&&data.length){resolve(data)}else{reject('No data in collectionsIndex')}}catch(e){reject('Parse error: '+e)}}else{reject('collectionsIndex not found')}})}
function tpCreateCustomGrid(){$('.summary-item-list').hide();const tpGridHtml=`<div class="tp-custom-blog-grid"><div class="tp-grid-container"></div></div>`;$('.summary-item-list-container').append(tpGridHtml)}
function tpDisplayInitialItems(){const itemsToShow=Math.min(tpBlogItems.length,tpInitialItems);for(let i=0;i<itemsToShow;i++){tpAddItemToGrid(tpBlogItems[i])}
tpDisplayedItems=itemsToShow}
function tpLoadMoreItems(){const remainingItems=tpBlogItems.length-tpDisplayedItems;const itemsToLoad=Math.min(remainingItems,tpLoadMoreCount);for(let i=tpDisplayedItems;i<tpDisplayedItems+itemsToLoad;i++){if(tpBlogItems[i]){tpAddItemToGrid(tpBlogItems[i])}}
tpDisplayedItems+=itemsToLoad;if(tpDisplayedItems>=tpBlogItems.length){$('.tp-load-more-btn').hide()}}
function tpAddItemToGrid(item){const itemHtml=tpCreateGridItem(item);$('.tp-grid-container').append(itemHtml)}
function tpAddLoadMoreButton(){if(tpBlogItems.length>tpInitialItems){const remainingCount=tpBlogItems.length-tpDisplayedItems;const loadMoreHtml=`<div class="tp-load-more-container" style="text-align: center; margin-top: 30px;"><a href="#" class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary load-more-button tp-load-more-btn">Load More (${remainingCount} remaining)</a></div>`;$('.tp-custom-blog-grid').after(loadMoreHtml);$('.tp-load-more-btn').click(function(e){e.preventDefault();tpLoadMoreItems();const newRemainingCount=tpBlogItems.length-tpDisplayedItems;if(newRemainingCount>0){$(this).text(`Load More (${newRemainingCount} remaining)`)}})}}
function tpCreateGridItem(item){const title=item.title||'';const url=item.fullUrl||'#';const excerpt=item.excerpt||'';const imageUrl=item.assetUrl||'';return `<div class="tp-grid-item"><div class="tp-item-image"><a href="${url}" class="tp-image-link">${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="tp-item-img">` : '<div class="tp-no-image"></div>'}</a></div><div class="tp-item-content"><h3 class="tp-item-title"><a href="${url}" class="tp-title-link">${title}</a></h3><div class="tp-item-excerpt">${excerpt}</div></div></div>`}
$('<style>').text(`.tp-custom-blog-grid{width:100%;margin-top:20px}.tp-grid-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0}.tp-grid-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgb(0 0 0 / .1);transition:transform 0.3s ease}.tp-grid-item:hover{transform:translateY(-5px)}.tp-item-image{position:relative;width:100%;padding-bottom:60%;overflow:hidden}.tp-image-link{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.tp-item-img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.tp-item-img:hover{transform:scale(1.05)}.tp-no-image{width:100%;height:100%;background:#f0f0f0;display:flex;align-items:center;justify-content:center}.tp-no-image:before{content:"No Image";color:#999;font-size:14px}.tp-item-content{padding:15px}.tp-item-title{margin:0 0 10px 0;font-size:18px;font-weight:600;line-height:1.3}.tp-title-link{color:#333;text-decoration:none;transition:color 0.3s ease}.tp-title-link:hover{color:#007cba}.tp-item-excerpt{color:#666;font-size:14px;line-height:1.5;margin:0}@media (max-width:768px){.tp-grid-container{grid-template-columns:repeat(2,1fr);gap:15px}.tp-item-title{font-size:16px}.tp-item-excerpt{font-size:13px}.tp-item-content{padding:12px}}@media (max-width:480px){.tp-grid-container{gap:10px}.tp-item-content{padding:10px}}`).appendTo('head');if($('.summary-item-list').length>0){setTimeout(function(){tpLoadAllBlogItems()},1000)}})
</script>
You can adjust number options here.
