Português do Brasil

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

Respondida
Samarth

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!

14 Comentários

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Claudia Bouche

    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
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Claudia Bouche

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

    This is great.

    1
  • David Harris

    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
  • Ifra Saqlain
    • Editado
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Sarah

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Sarah,

    Can you please check the theme 

    Templating API v1
     
    OR
     
    Templating API v2
     
     
    Screenshot:
     
     
    0
  • Sarah

    Ifra Saqlain Neither, we are using Mink:

    0
  • Abhishek Tiwary

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @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
  • Fernando

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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

Por favor, entrar para comentar.

Não encontrou o que estava procurando?

Nova publicação
Powered by Zendesk