Add sidebar filters and results for multiple sources and types to the search result page

The Federated search EAP enables users to search content across multiple Help Centers, as well as multiple external sources. Similar to how Help Centers can include both Articles and Community Posts, different sources can contain different searchable record types. 

In order to implement the Federated search functionality to your Help Center, you must update your theme. If you have multiple Help Centers, the theme must be updated across all of them. Below you will find the necessary code snippets for implementing this change, all of which can also be found in this Github gist. The solutions discussed in this section involve using the source_filters, and type_filters helpers in the Curlybars templating language to update the search result file.

Updating the search results template to add sidebar filters

You need to update the search results template and update the helpers used in the sidebar filters and for looping through the results.

Update the following code in <div class="search-results"> in the search results template:

<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_sources'}}">{{t 'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#is current_filter.identifier 'knowledge_base'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
    {{/is}}
    {{#is current_filter.identifier 'community'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
    {{/is}}
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

Looping through the results

This snippet is an example of how you can use the {{results}} helper to loop through the federated search results:

{{#if results}}
        <ul class="search-results-list">
          {{#each results}}
            <li class="search-result-list-item result-{{type}}">
              <h2 class="search-result-title">
                <a href="{{url}}" class="results-list-item-link">{{title}}</a>
              </h2>
              <article>
                <div class="search-result-icons">
                  {{#if vote_sum}}
                    <span class="search-result-votes">{{vote_sum}}</span>
                  {{/if}}
                  {{#if comment_count}}
                    <span class="search-result-meta-count">
                      {{comment_count}}
                    </span>
                  {{/if}}
                </div>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>
                  </li>
                  <li class="meta-data">{{author.name}}</li>
                  <li class="meta-data">{{date created_at}}</li>
                </ul>
                <div class="search-results-description">{{text}}</div>
              </article>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p>
          {{t 'no_results_unified'}}
          {{#link 'help_center'}}
            {{t 'browse_help_center'}}
          {{/link}}
        </p>
      {{/if}}

Sign up for the EAP

Sign up for the EAP here!