Goal

This document provides information about configuring the ‘Hawksearch results’ widget.

Prerequisite

Configured Sitefinity Connector

Remark

In order ‘Hawksearch result' widget to show results from the corresponding index during the first load of the page (without executing a search request) you must set the search index in the widget designer.

📘

Note

All configurations applied in the Data field in the Advanced settings are in JSON single-line format. You can use any JSON formatting tool to edit them more efficiently and then import them back.

🚧

Important

Keep in mind, that when using the Vue SDK and both Hawksearch box and Hawksearh results widgets are placed on the same page and if they have the same index set, or if the results widget has an empty index name configuration, then the widgets are practically synchronized. Therefore, performing any searches will populate the result set accordingly without refreshing the page.

In cases where these widgets should work together, make sure that both of them have the same correct configuration. For instance, if the box widget does NOT have the landing page set, but the results widget is configured with it, the request would not have the landing page context, because the box widget has priority over the results widget.

Enable SPA Search Box

📘

Note

You can set up the ‘Hawksearch results’ widget to work as a Single Page widget (to use its built-in search box).

As a prerequisite, you will need to create a V4 or V4L search index

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Check ‘Show Search Box’
   2. Set search index
3. Publish the page

Associate with Landing Page

📘

Note

You can filter the search results elevating Hawksearch Landing page functionality.

You can find more information about setting Landing Pages in Hawksearch documentation

1. Configure Landing Page for the corresponding Hawksearch V4 instance
2. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
3. Open the widget designer
   1. Go to the Advanced section
   2. In the Data field enter the Url of your Landing Page in the following format:
      JSON

      {"CustomUrl":"/landing-page-url"}
      

4. Click Save
5. Publish the page

🚧

Important

Landing Page URL must not have trailing slash, either in the Hawksearch engine configuration or in the widget Data field.

Configuring Facet Behavior

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. If you are using the Vue SDK you can apply the configuration to the facets. More specifically - if the facets can be selected multiple times or only one at a time. The default behaviour is multiple selections. If a facet needs to be a single option, the value in the Data field should be this:
      JSON

      {"_facetConfig": {"brand": "single", "color": "multiple", "size": "single"}}
      

   3. The key-value pairs are using the facet field machine name (can be found in the request headers) as a key and either “single“ or “multiple“ as a value.
   4. If you have a landing page configured - place the facet config on the same level:
      JSON

      {"CustomUrl": "...", "_facetConfig": {...}}
      

3. Click Save
4. Publish the page

Configuring the Search Field

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Check ‘Show Search Box'. If the search field is not needed - leave it unchecked. The following settings won’t take effect if the search box is not available.
   2. Go to the Advanced section
   3. Input the search box configuration settings in the Data field.
      JSON

      {"_searchBoxConfig":{"reloadOnEmpty":false}}
      

   4. The configuration fields have the following usage:
      1. reloadOnEmpty - Refresh the search results with an empty keyword, but keeps all other facet selections
3. Click Save
4. Publish the page

Configuring Tabs

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the tab configuration settings in the Data field.
      JSON

      {"_tabConfig":{"alwaysOn":true}}
      

   3. The configuration fields have the following usage:
      1. alwaysOn - There is always a selected tab. It cannot be de-selected, only new tab selection changes the tab value. This will also trigger an additional initial request for setting the default tab.
3. Click Save
4. Publish the page

Configuring URL Parameters Update

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the configuration settings in the Data field.
      JSON

      {"_urlUpdate":{"enabled":true}}
      

   3. When the URL update is enabled, all aspects of the search will be populated as parameters in the URL. If this is not needed, disable this setting.
3. Click Save
4. Publish the page

Configure Additional Search Behaviour

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the configuration settings in the Data field.
      JSON

      {"_searchConfig":{"scrollUpOnRefresh":true}}
      

   3. This setting will enable the page to scroll up to the top after the user input
3. Click Save
4. Publish the page

Configure the Result Item

🚧

Important

This feature is only available for the Vue SDK

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the configuration settings in the Data field.
      JSON

      {"_resultItem":{"itemSelect":true,"linkField":"pageurl"}}
      

   3. The configuration fields have the following usage:
      1. itemSelect - Selecting the result item will open the details page
      2. linkField - Specifies which result field should be used for the redirect link
3. Click Save
4. Publish the page

Configure the Suggestion Item

🚧

Important

This feature is only available for the Vue SDK. It is available when one or more of the configured fields in the dashboard for a title and a link are missing. It also handles multilingual field support.

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the configuration settings in the Data field.
      JSON

      {"_suggestionItem":{"linkField":"link","titleField":"title"}}
      

   3. The configuration fields have the following usage:
      1. titleField - Specifies which autocomplete output field to display as the title
      2. linkField - Specifies which autocomplete output field should be used for the redirect link
3. Click Save
4. Publish the page

Configure Pagination Links for SEO

🚧

Important

This feature is only available for the Vue SDK.

1. Navigate to a Sitefinity page that has a placed ‘Hawksearch results’ widget
2. Open the widget designer
   1. Go to the Advanced section
   2. Input the configuration settings in the Data field.
      JSON

      { "_pagination":{"type":"link"}}
      

   3. This setting will expose all pager links for SEO.
3. Click Save
4. Publish the page