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

Répondu

5 Commentaires

  • Ifra Saqlain
    Community 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

    0
  • 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
    Community Moderator

    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

    0
  • Ifra Saqlain
    Community 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

     

     

     

    0
  • Claudia Bouche

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

    This is great.

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk