[Share] Summary Block Filter by Category

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

You can follow these steps.

If it doesn't work, you can share link to page where you use Summary Block + exact code you added, I can check problem easier.

#1. You need to add a Summary Block with Grid or List Layout

#2. Next, enable Category on Primary Metadata

#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;
}

#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>

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>

You need to change ID in number (1) and Category URL in number (2)

#6. Number (2), to find these URLs, just click on Category on Summary Block

You will see these