How to add Summary Block to Blog Posts

Description: Add Summary Block to Blog Posts (bottom of blog post content). Each summary will only show posts that belong to the category of the current post.

In my example, suppose we will need to add 2 Summary Blocks for posts belong 2 Categories: Get Started, Startup

#1. First, create a page in Not Linked with name: Summary Block Blog – URL: /summary-block-blog

V2-367-32-1-min

#2. Add 2 Summaries to this post. Remember to choose corresponding category in Filter Items option.

V2-367-32-2-min

V2-367-32-3-min

#3. Next, find ID of 2 Summaries, we will have

Summary (category: Get Started)

V2-367-32-4-min

Summary (category: Startup)

V2-367-32-5-min

#4. Use this code to Code Injection > Footer

<!-- Summary on Blog Posts - 28-08-2025 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const CONFIG = {
        summaryPageUrl: '/summary-block-blog',
        categoryConfigs: [
            {
                categoryUrl: '/category/Get+Started',
                blockId: '#block-yui_3_17_2_1_1756365204664_13882'
            },
            {
                categoryUrl: '/category/Startup',
                blockId: '#block-b5d132aff10590fcb2ae'
            }
        ]
    };

    async function initializeNewsletter(contentElement) {
        try {
            if (typeof wm$ !== 'undefined' && wm$.reloadSquarespaceLifecycle) {
                await wm$.reloadSquarespaceLifecycle(contentElement);
            } else if (typeof Squarespace !== 'undefined' && typeof Y !== 'undefined') {
                Squarespace.initializeLayoutBlocks(Y);
                Squarespace.initializeCommerce(Y);
                
                const newsletterBlocks = contentElement.querySelectorAll('.sqs-block-newsletter');
                if (newsletterBlocks.length > 0) {
                    Squarespace.initializeNewsletter(Y, Y.one(contentElement));
                }
            }
            
            setTimeout(() => {
                const scripts = contentElement.querySelectorAll('script');
                scripts.forEach(script => {
                    if (script.textContent && !script.src) {
                        try {
                            eval(script.textContent);
                        } catch (e) {
                            console.warn('Script execution failed:', e);
                        }
                    }
                });
            }, 100);
        } catch (error) {
            console.error('Newsletter initialization error:', error);
        }
    }

    const cache = new Map();
    
    async function fetchSummaryBlockContent(blockId) {
        const cacheKey = `${CONFIG.summaryPageUrl}-${blockId}`;
        if (cache.has(cacheKey)) {
            return cache.get(cacheKey);
        }
        
        try {
            const response = await fetch(CONFIG.summaryPageUrl);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            
            const html = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const targetElement = doc.querySelector(blockId);
            
            if (targetElement) {
                const content = targetElement.outerHTML.trim() || 'No content found';
                cache.set(cacheKey, content);
                return content;
            } else {
                throw new Error('Block not found');
            }
        } catch (error) {
            console.error('Fetch failed:', error);
            throw error;
        }
    }

    async function injectSummaryBlock() {
        for (const config of CONFIG.categoryConfigs) {
            const targetSelector = `body:has(a[href*="${config.categoryUrl}"]) .blog-item-author-profile-wrapper`;
            const targetElement = document.querySelector(targetSelector);
            
            if (targetElement) {
                try {
                    const content = await fetchSummaryBlockContent(config.blockId);
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = content;
                    const summaryBlock = tempDiv.firstElementChild;
                    
                    if (summaryBlock) {
                        targetElement.insertAdjacentElement('afterend', summaryBlock);
                        await initializeNewsletter(summaryBlock);
                    }
                } catch (error) {
                    console.error('Failed to inject summary block:', error);
                }
            }
        }
    }
    
    injectSummaryBlock();
});
</script>

V2-367-32-6-min