Question

Is there a way to limit search results to show up from within a section?

Forum|Forum|5 years ago
February 3, 2021
14 replies
84 views

The support page for my organization currently has 3 broad categories that a user can navigate through. For more clarity, please refer to the link below:

https://support.bluestacks.com/hc/

The page has 3 categories, based on the product a user is currently using. My concern is that if a user is navigating through one category, it would be great if his/her search results showed articles from within that category only, and not from the entire bunch of articles on the help center. Is there a way to make this possible on Zendesk?

P.S. I'm not too much into coding, so if there's a built-in feature that could make it happen, it would be pretty awesome!

knowledge-base

Ifra

Community Expert

Hey Samarth, you just need to see Default Copenhagen Theme. On preview mode you can see the updated view of Search Results.

There is a sidebar of categories, it would be the solution of your query.

see the given screenshots of updated (Latest) search results:

You just need to update the code of your search result template.

Thanks

Team

Thank You :)

Claudia26

Hi Ifra,

Thank you for the solution! it's exactly what I am looking for :)

Where did you find the code to add this sidebar to the search results page?

I cannot find it and I cannot see the option in my theme.

Thank you!

Trapta11

Hi @Claudia Bouche,

Try putting the below code in your search_results.hbs template by editing the code. It should show the sidebar on the search results template.

<aside 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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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}}
    </aside>

Thanks

Trapta

Ifra

Community Expert

Hi Claudia Bouche,

You can pick the code from the Default Copenhagen theme after importing in your Help centre:

Click the button-m top right corner;

Select Add Copenhagen Theme from the dropdown list.

Go to inside the theme.

Select the search_results.hbs file and find for this line of code <aside class="search-results-sidebar">

Screenshot for the same:

This code will be end

Replace the search sidebar code with your old search sidebar code but if you have custom classes in your old sidebar code like bootstrap classes then you should match the class for headings h3, parent wrappers, <ul> tags, <li> tags, <a href="#"> and add your custom classes in the updated code.

Look in the updated code the <h3> tags is four times,

the <ul> tags three times,

the <li> tags and <a> tags three times so when you add the custom classes in the updated code please pay attention these common tags

The updated search page sidebar code:

 <aside 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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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}}
    </aside>

If any query let me know :)

Thanks

Thank You :)

Claudia26

Thank you both @Ifra Saqlain and @Trapta. I managed to make it work with your help :)

This is great.

David208

@claudia26, how did you get the categories pane on the left to show up by default? I've been at this two days and can't figure it out.

Ifra

Community Expert

Hi @David Harris, I'm Ifra :)

To get the sidebar you can use the given code:

Theme API version 2

Go to the search_results_page.hbs file and add the following code.

 <aside class="search-results-sidebar">
      {{#if source_filters}}
        <section class="filters-in-section collapsible-sidebar">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_source_menu'}}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_type_menu'}}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_subfilter_menu'}}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </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}}
      {{#if content_tag_filters}}
        <section class="filters-in-section collapsible-sidebar">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
            </svg>
          </button>
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_content_tag'}}</h3>
          <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
            {{#each content_tag_filters}}
                {{#if selected}}
                <li class="sidenav-tag">
                  <div class="content-tag">
                    <span class="label">{{name}}</span>
                    <a href="{{url}}" aria-current="page">
                      <span>
                        <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false"  aria-hidden="true" >
                            <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
                        </svg>
                      </span>
                    </a>
                  </div>
                </li>
              {{/if}}
            {{/each}}
          </ul>
        </section>
      {{/if}}
    </aside>

And make sure the shared code should be just above this element 'main-content' like below

If any confusion feel free to ask :)

Thanks

Thank You :)

Sarah81

Hi Ifra, I am trying to implement this sidebar in our help center and I'm getting an error saying source_filters and type_filters do not exist. We are using the Mink theme 2.6.2. Any help would be appreciated, thank you!

Ifra

Community Expert

Hi Sarah,

Can you please check the theme

Thank You :)

Sarah81

@ifra Neither, we are using Mink:

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO