Recent searches


No recent searches

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

Answered


Posted Feb 03, 2021

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!


1

14

14 comments

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

1


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!

 

 

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Hi @...,

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

1


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

 

 

 

1


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

This is great.

1


Claudia Bouche, 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.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

<aside class="search-results-sidebar">

//

//

//

<section id="main-content" class="search-results-column">

 

 

If any confusion feel free to ask :)

Thanks

 

0


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!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Sarah,

Can you please check the theme 

Templating API v1
 
OR
 
Templating API v2
 
 
Screenshot:
 
 

0


Ifra Saqlain Neither, we are using Mink:

0


Hello Ifra Saqlain,

Can we customize to restrict the search within the section to search content within that particular section instead of whole portal?

1


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@Abhishek,

yes, you can do this by checking the section ID like this:

 

{{#isnt section.id 00000}} You search-bar code is here {{/isnt}}

00000 - section ID for which you wanna hide search-bar

0


image avatar

Fernando

Zendesk Luminary

Ifra Saqlain Do you know how I can modify the amazing code you provided to hide the Type section and show the By Category section expanded by default?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Fernando Sir,

I know I'm too late to answer actually I was suffering from high fever and cold so I couldn't answer.

I have tried that but couldn't get it done.

Please see this article at once:

https://support.zendesk.com/hc/en-us/community/posts/5683688413338-Search-Results-select-Article-type-by-default

 

 

Thanks

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post