Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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-content-zone name="LeftTop"></hawksearch-content-zone>
        <hawksearch-facets-list></hawksearch-facets-list>
        <hawksearch-content-zone name="LeftBottom"></hawksearch-content-zone>
    </div>
    <div class='column column--12 column-md--8'>
        <hawksearch-content-zone name="Top"></hawksearch-content-zone>
        <hawksearch-content-zone name="Top2"></hawksearch-content-zone>
        <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>
        <hawksearch-content-zone name="Bottom"></hawksearch-content-zone>
        <hawksearch-content-zone name="Bottom2"></hawksearch-content-zone>
    </div>
</div>
  • No labels