Summary Block Filter by Category

To create a Filter by Category on Summary Block, like this

Summary Block Filter By Categorys 01 Min

You can follow these steps
#1. You need to add a Summary Block with Grid or List Layout

Summary Block Filter By Categorys 03 Min #2. Next, enable Category on Primary Metadata

Summary Block Filter By Categorys 02 Min

#3. Use this code to Custom CSS box

/* Summary Filter */
.summary-filter {
display: none;
}
.summary-filter span {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}
.summary-filter {
text-align: center;
margin-bottom: 30px;
}
.active-filter {
text-decoration: underline;
font-weight: bold;
}
.summary-v2-block .summary-filter {
display: block !important;
}

Summary Block Filter By Categorys 04 Min

#4. Use this code to Page Header (page where you use Summary Block)

<div class="summary-filter">
  <span class="filter-all">All</span>
  <span class="filter-inbound-marketing">Inbound Marketing</span>
  <span class="filter-search-engine-marketing">Search Engine Marketing</span>
  <span class="filter-content-marketing">Content Marketing</span>
  <span class="filter-brand-point">Brand Point</span>
</div>

Summary Block Filter By Categorys 05 Min

In my example, we will create Filter with some links: Inbound Marketing, Search Engine Marketing, Content Marketing, Brand Point
so I added some corresponding ID to <span> tag

filter-inbound-marketing
filter-search-engine-marketing
filter-content-marketing
filter-brand-point
If you want to create it with other filters name, you can change both text + ID.

#5. Use this code to Page Header Injection, under #4 code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.summary-filter').insertBefore('.summary-item-list');

    const filters = {
        'filter-all': '',
        'filter-inbound-marketing': 'Inbound+marketing',
        'filter-search-engine-marketing': 'Search+Engine+Marketing',
        'filter-content-marketing': 'Content+Marketing',
        'filter-brand-point': 'Brand+Point'
    };

    $('.summary-filter span').click(function() {
        $('.summary-filter span').removeClass('active-filter');
        $(this).addClass('active-filter');
        
        const filterClass = $(this).attr('class').split(' ')[0];
        const keyword = filters[filterClass];
        
        $('.summary-item').hide();

        if (keyword === '') {
            $('.summary-item').show();
        } else {
            $('.summary-item').filter(function() {
                return $(this).find('.summary-metadata-item--cats a[href*="' + keyword + '"]').length > 0;
            }).show();
        }
    });
});
</script>

Summary Block Filter By Categorys 06 Min