Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note

This documentation is for v1 of the HawkSearch Handlebars UI and is no longer updated. For the latest version, please see http://handlebars-ui.hawksearch.com.

Table of Contents

The Hawksearch Handlebars UI script is published via the @bridgeline-digital/hawksearch-handlebars-ui npm package.

...

Code Block
languagehtml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hawksearch Handlebars UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript">
      var Hawksearch = Hawksearch || {};

      Hawksearch.config = {
        clientId: "f51060e1c38446f0bacdf283390c37e8"
      };
    </script>
    <script src="//cdn.jsdelivr.net/npm/@bridgeline-digital/hawksearch-handlebars-ui@1.0.1719/dist/hawksearch-handlebars-ui.js" defer></script>
  </head>

  <body>
    <h1>Hawksearch Handlebars UI</h1>
    <hawksearch-search-field></hawksearch-search-field>
    <hawksearch-search-results></hawksearch-search-results>
  </body>
</html>

...

Code Block
languagetypescript
export interface HawksearchTemplates {
    autocomplete?: string;
    checkboxListFacet?: string;
    colorFacet?: string;
    contentZone?: string;
    customContent?: string;
    datePicker?: string;
    dateRangeFacet?: string;
    facetsList?: string;
    facetWrapper?: string;
    featuredItemsContent?: string;
    featuredItemsContentItem?: string;
    icon?: string;
    imageContent?: string;
    linkListFacet?: string;
    modifiedQuery?: string;
    numericRangeFacet?: string;
    pageSize?: string;
    pagination?: string;
    popularQueriesContent?: string;
    querySuggestions?: string;
    rangeSlider?: string;
    rangeSliderFacet?: string;
    recentSearchesFacet?: string;
    relatedSearchesFacet?: string;
    searchField?: string;
    searchResults?: string;
    searchResultsItem?: string;
    searchResultsList?: string;
    searchWithinFacet?: string;
    selectedFacets?: string;
    sorting?: string;
    tabs?: string;
    tooltip?: string;
}

...

This event is fired after every autocomplete query. This can be used to modify the raw request sent to response received from the Hawksearch API.

Code Block
languagejs
addEventListener('hawksearch:after-autocomplete-executed', (event) => {
    const autocompleteResponse = event.detail;

    console.log(autocompleteResponse);
});

...

This event is fired after every search operation. This can be used to modify the raw request sent to response received from the Hawksearch API.

Code Block
languagejs
addEventListener('hawksearch:after-search-executed', (event) => {
    const searchResponse = event.detail;

    console.log(searchResponse);
});

...