Versions Compared

Old Version 38

changes.mady.by.user Jordan Kasper (Deactivated)

Saved on

compared with

New Version 39

changes.mady.by.user Jordan Kasper (Deactivated)

Saved on

Key

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

...

Installation Steps

npm Package

  1. If your website does not already have a package.json file in the root, run npm init to generate one.

  2. Run npm install --save @bridgeline-digital/hawksearch-handlebars-ui to install the latest version.

  3. Update your HTML to import the script file, set your Configuration, and add the appropriate elements to your page. Below is a basic sample implementation:

    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="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/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>

Content Delivery Network (CDN)

...

Property

Required

Description

urlPrefixes.assets

No

This value is prepended to assets uploaded through the Hawksearch admin, such as color swatch images.

urlPrefixes.content

No

This value is prepended to imageUrl and url properties.

Events

Global

hawksearch:initialized

This event fires is fired after the Hawksearch Handlebars UI has been loaded. Developers can hook into this event to define custom Handlebars partials.

Code Block
languagejs
addEventListener('hawksearch:initialized', (event) => {
    Hawksearch.handlebars.registerPartial('custom-partial', 'HTML here');
});

Autocomplete

hawksearch:before-autocomplete-executed

This event is fired before every autocomplete query. This can be used to modify the raw request sent to the Hawksearch API.

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

    console.log(autocompleteRequest);
});

hawksearch:after-autocomplete-executed

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

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

    console.log(autocompleteResponse);
});

hawksearch:autocomplete-completed

This event is fired after every autocomplete query prior to data binding.

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

    console.log(autocompleteResponse);
});
Info

This object is the processed AutocompleteResponse model, not the raw response from Hawksearch.

hawksearch:before-search-executed

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

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

    console.log(searchResponsesearchRequest);
});

hawksearch:after-search-

...

executed

This event is fired after every search operation (query, applied facet, etc.). This can be used to modify the raw request sent to the Hawksearch API.

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

    console.log(searchResponse);
});

hawksearch:search-completed

This event is fired after every search operation prior to data binding.

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

    console.log(searchResponse);
});
Info

This object is the processed SearchResponse model, not the raw response from Hawksearch.