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)
If you don’t want to use complex code, you can use Lazy Plugin instead, it will add an option to Summary Block, then you can adjust number of items.
<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.
