Versions Compared

Old Version 25

changes.mady.by.user Jordan Kasper

Saved on

compared with

New Version 26

changes.mady.by.user Jordan Kasper

Saved on

Key

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

...

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

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></hawksearch-search>
    <hawksearch-results></hawksearch-results>
  </body>
</html>

Content Delivery Network (CDN)

This library is also available through unpkg, a high-performance global content delivery network built to consume npm packages.

To configure your website to use the CDN, simply 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="https://www.unpkg.com/@bridgeline-digital/hawksearch-handlebars-ui@1/dist/hawksearch-handlebars-ui.js" defer></script>
  </head>

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

It is highly recommended to target a specific version, especially if there are customizations, to avoid potentially breaking changes in the future.

For example, instead of including the script at https://www.unpkg.com/@bridgeline-digital/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.js, you can use https://www.unpkg.com/@bridgeline-digital@1.0.0/hawksearch-handlebars-ui/dist/hawksearch-handlebars-ui.js.

Configuration

Configuration is controlled by the Hawksearch.config global object. Below is the object model used:

...