/
Configuring Hawksearch results widget

Configuring Hawksearch results widget

Owned by andrey.sotirov (Deactivated)
Last updated: Sep 30, 2021
5 min read

In this article you will find:

Goal

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

Prerequisite

Configured Sitefinity connector - Connector: Activation

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.

Enable SPA search box

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 -Managing V4 Indexes, Managing V4L Indexes

  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

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

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

Landing Pages

  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

      1. In the Data field enter the Url of your Landing Page in the following format:

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

  4. Click Save

  5. Publish the page

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

Configuring facet behavior

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

      1. 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:

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

        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.

      2. If you have a landing page configured - place the facet config on the same level:

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

b. Facet collapsing configuration options

i. collapsedByDefault - If true the collapsible facets will be collapsed when facets are displayed.

ii. collapseAllExceptCurrentTarget - If true the facets will act like accordion. When one facet is expanded the others will collapse.

iii. collapseOnDefocus - If true the facets will collapse when the user clicks somewhere out of the facet area.

iiii. Example

{"_facetConfig":{ "collapsedByDefault": true,"collapseOnDefocus": true, "collapseAllExceptCurrentTarget":true}}

3. Click Save

4. Publish the page

Configuring the search field

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

      1. Input the search box configuration settings in the Data field.

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

         

The configuration fields have the following usage:

  • reloadOnEmpty - Refresh the search results with an empty keyword, but keeps all other facet selections

  1. Click Save

  2. Publish the page

Configuring tabs

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

      1. Input the tab configuration settings in the Data field.

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

         

The configuration fields have the following usage:

  • 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.

  1. Click Save

  2. Publish the page

Configuring URL parameters update

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

      1. Input the configuration settings in the Data field.

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

        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

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

      1. Input the configuration settings in the Data field.

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

        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

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

      1. Input the configuration settings in the Data field.

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

         

The configuration fields have the following usage:

  • itemSelect - Selecting the result item will open the details page

  • linkField - Specifies which result field should be used for the redirect link

  1. Click Save

  2. Publish the page

Configure the suggestion item

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

      1. Input the configuration settings in the Data field.

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

         

The configuration fields have the following usage:

  • titleField - Specifies which autocomplete output field to display as the title

  • linkField - Specifies which autocomplete output field should be used for the redirect link

  1. Click Save

  2. Publish the page

Configure pagination links for SEO

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

      1. Input the configuration settings in the Data field.

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

This setting will expose all pager links for SEO.

 

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.

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.

Related content