Overview
The Search Results component encapsulates all components relating to search-results into a single component.
The use of this component is optional. For implementations with a significant amount of customization, developers may choose to place the nested controls manually.
Selector
The selector for this component is <hawksearch-results>.
Data Model
The SearchResponse object is made available to the Handlebars template:
interface SearchResponse {
contentZones?: ContentZones;
facets?: Array<Facet>;
modifiedQuery?: string;
pagination?: Pagination;
query?: string;
querySuggestions?: Array<string>;
redirect?: Redirect;
results?: Array<SearchResultsItem>;
selectedFacets?: Array<SelectedFacet>;
sorting?: Sorting;
success: boolean;
trackingId: string;
}
Default Template
<hawksearch-modified-query></hawksearch-modified-query>
<hawksearch-query-suggestions></hawksearch-query-suggestions>
<div class='row'>
<div class='column column--12 column-md--4'>
<hawksearch-facets-list></hawksearch-facets-list>
</div>
<div class='column column--12 column-md--8'>
<hawksearch-tabs></hawksearch-tabs>
<div class='margin'>
<hawksearch-selected-facets></hawksearch-selected-facets>
</div>
<div class='row'>
<div class='column column--12 column-sm--6 flex-vertical-sm-center'>
<hawksearch-pagination></hawksearch-pagination>
</div>
<div class='column column--12 column-md--6'>
<div class='row row--tight'>
<div class='column column--12 column-sm--6 flex-vertical-sm-center'>
<hawksearch-page-size></hawksearch-page-size>
</div>
<div class='column column--12 column-sm--6 flex-vertical-sm-center'>
<hawksearch-sorting></hawksearch-sorting>
</div>
</div>
</div>
</div>
<hawksearch-results-list></hawksearch-results-list>
</div>
</div>