Configuration Options

Client Guid

clientGuid
The client guid is part of HawksearchVue Default Config options.

The initial value of clientGuid is empty string -'' .

📘
By default The clientGuid value comes from Hawksearch settings and is updated once when the widget is initialized.

Options
get the value from the Hawksearch widget View template
add the value manually:

const config = {  
      ...  
      clientGuid: "sitefinityelastic.20210427.160517.products",  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Usage
clientGuid is used for initializing Hawksearch widgets and it is send in the headers of each requests/response to the Hawksearch service

creating widgets with Vue SDK
extending Vuex store
configuring synchronized widgets
all request to the Hawksearch service like:
- search
- search within
- using facet
  - clear or update facet
- change of results language in Multilingual mode
- field-specific search

Dashboard URL

dashboardUrl
The initial value of dashboardUrl is empty string -'' . This options defines from where the search items assets URL will be fetched.

📘
By default The dashboardUrl value comes from Hawksearch config

Options

set value for test environment:

const config = {  
      ...  
      dashboardUrl: "<https://test.hawksearch.net/">,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

set value for dev environment:

const hawkConfig = {  
      ...  
      dashboardUrl: "<https://dev.hawksearch.net/">,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: hawkConfig });

HawksearchVue.initialSearch(widget);

set value for prod environment:

const hawkConfig = {  
      ...  
      dashboardUrl: "<https://prod.hawksearch.net/">,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: hawkConfig });

HawksearchVue.initialSearch(widget);

API URL

apiUrl
This option contains the Hawksearch API host URL to which search requests are send.

Options
default value is <https://searchapi-dev.hawksearch.net>

searchapi-test.hawksearch

const config = {  
      ...  
      apiUrl: '<https://searchapi-test.hawksearch.net'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

searchapi.hawksearch

const config = {  
      ...  
      apiUrl: '<https://searchapi.hawksearch'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Search URL

searchUrl
This option contains the Hawksearch search API URL to which search requests are send.

Options
default value is string - '/api/v2/search'

when the configuration is using the default value apiUrl is used for basis to create search URL

dev '<https://searchapi-dev.hawksearch.net/api/v2/search/>'

const config = {  
      ...  
      searchUrl: '<https://searchapi-dev.hawksearch.net/api/v2/search/'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

test '<https://searchapi-test.hawksearch.net/api/v2/search>':

const config = {  
      ...  
      autocompleteUrl: '<https://searchapi-test.hawksearch.net/api/v2/search'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

prod '<https://searchapi.hawksearch.net/api/v2/search>' :

const config = {  
      ...  
      autocompleteUrl: '<https://searchapi.hawksearch.net/api/v2/searche'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Autocomplete URL

autocompleteUrl
This option contains the Hawksearch search autocomplete API URL to which search requests are send.

Options
default value is string - '/api/autocomplete'

when the configuration is using the default value apiUrl is used for basis to create search URL

dev '<https://searchapi-dev.hawksearch.net/api/autocomplete>' :

const config = {  
      ...  
      autocompleteUrl: '<https://searchapi-dev.hawksearch.net/api/autocomplete'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

test '<https://searchapi-test.hawksearch.net/api/autocomplete>' :

const config = {  
      ...  
      autocompleteUrl: '<https://searchapi-test.hawksearch.net/api/autocomplete'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

prod '<https://searchapi.hawksearch.net/api/autocomplete>' :

const config = {  
      ...  
      autocompleteUrl: '<https://searchapi.hawksearch.net/api/autocomplete'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Recommendation URL

recommendationUrl
This option contains the Hawksearch recommendation API URL to which the requests are send.

Options
default value is string - '/api/recommendation/v2/getwidgetitems'

when the configuration is using the default value apiUrl is used for basis to create search URL

dev '<https://searchapi-dev.hawksearch.net/api/recommendation/v2/getwidgetitems>' :

const config = {  
      ...  
      recommendationUrl: '<https://searchapi-dev.hawksearch.net/api/recommendation/v2/getwidgetitems'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

test '<https://searchapi-test.hawksearch.net/api/recommendation/v2/getwidgetitems>' :

const config = {  
      ...  
      recommendationUrl: '<https://searchapi-test.hawksearch.net/api/recommendation/v2/getwidgetitems'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

prod '<https://searchapi.hawksearch.net/api/recommendation/v2/getwidgetitems>' :

const config = {  
      ...  
      recommendationUrl: '<https://searchapi.hawksearch.net/api/recommendation/v2/getwidgetitems'>,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Widget Guid

widgetGuid
The widgetGuid option default value is null. This options allows user clicks tracking in Recommendations

📘
The widgetGuid value is updated once when the widget is initialized if guid is added in the template

Options
updating the config:

const config = {  
      ...  
      widgetGuid: "54b6a4361e1006c7",  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

adding widgetGuid in Vue data component

<div data-component="vue-app-spa"
         ...
         data-widget-guid=""
         ...
</div>

adding widgetGuid the Recommendation component

<recommendations widget-guid="..."></recommendations>

Widget Unique ID

widgetUniqueid
The widgetUniqueid option default value is null. This options allows user fetch Recommendations data.

📘
The widgetUniqueid value is updated once when the widget is initialized

added manually in the config

const config = {  
      ...  
      widgetUniqueid : "54b6a4361e1006c7",  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

Website URL

websiteUrl
The wbesiteUrl default value is location.origin. This option helps HawksearchVue to get the absolute URL of the page.

const config = {  
      ...  
      wbesiteUrl: location.origin  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

Usage

Banner Image component - If the banner is selected redirects to the the specified page URL
Recommendations Item and Result Item components - If an item is selected the formed link is assigned to the item and redirects the Document to the specified page.

Track Event URL

trackEventUrl
The trackEventUrl option default value is null. This options enables the HawksearchVue app to create tracking event.

const config = {  
      ...  
      trackEventUrl: null,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

📘
The trackEventUrl value is updated once tracking is enabled from Hawksearch Settings

Index Name

indexName
The indexName default value is null. The name of the index against which the search must be performed.

const config = {  
      ...  
      indexName: "sitefinityelastic.20210423.141314.products",  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

📘
Note
The indexNamevalue comes from Hawksearch settings and is updated once when the widget is initialized

Usage
The indexName option is used for a lot of operations in Hawksearch:

indexName is part of the parameters which go in the headers of each request:
- search
- search within
- using facets
Creating widgets with Vue SDK
Localize facets in Vue.js

Index Name Required

indexNameRequired
The indexNameRequired default value is false. If true this option require the user to specify index name in order to execute the request.

const config = {  
      ...  
      indexNameRequired: true,  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

Language

language
The language default value is null. This options allows user fetch results and adding tracking events in different languages.

Options

by default the language is updated from the Hawksearch widget View template and its value is 'en':

<div data-component="vue-app-spa"
          ...
         data-current-culture="@Model.CurrentCulture"
         ...
         >
         ...
</div>

updating the configuration with a language:

const config = {  
      ...  
      language: "en",  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config });

HawksearchVue.initialSearch(widget);

Additional Parameters

additionalParameters
This option had a default value of empty object {}. These parameters are custom and case/client specific. Those parameters are added in the request.

The additionalParameters object may contain the following prams:

const config = {  
      ...  
      additionalParameters: {  
          CustomUrl: "",  
          Query: ""  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Search Box Config

searchBoxConfig

searchBoxConfig is controlling the behavior of the search box on search.

Options
If using Sitefinity CMS the Search box configuration could be updated by adding JSON object with the options the Data filed of HawksearchBox widget designer Advanced options. Example:

{"\_searchBoxConfig":{"reloadOnEmpty":true,"redirectOnEmpty":true,"redirectToCurrentPage":true}}

updating the config with javascript:

const config = {  
      ...  
       searchBoxConfig: {  
            reloadOnEmpty: true,  
            redirectOnEmpty: true,  
            redirectToCurrentPage: true  
        },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

reloadOnEmpty

default value false
if true refresh the search results with an empty keyword, but keeps all other facet selections. This is available if a results widget is dropped on the same page.

redirectOnEmpty

default value false
if true redirects to the results page even if the search field doesn’t have a keyword

redirectToCurrentPage

default value false
if true and If the set redirect page is the current one, forces the page to reload

Facet Config

facetConfig
facetConfig is controlling the facet behavior.

Options

Facets can be selected multiple times or only one at a time. The default behavior is multiple selections. If a facet needs to be a single option, the value in the Data field should be this: Example:

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

if you have a landing page configured - place the facet config on the same level:

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

collapsedByDefault

default value false
if true the collapsible facets will be collapsed when facets are displayed.

collapseAllExceptCurrentTarget

default value false
if true the facets will act like accordion. When one facet is expanded the others will collapse

collapseOnDefocus

default value false
if true the facets will collapse when the user clicks somewhere out of the facet area.

Tab Config

tabConfig

Options

alwaysOn

The default value of alwaysOn is true. This option enables applying Facet Tab values on search if the Facet Tab is enabled.
add the value manually:

const config = {  
      ...  
      tabConfig: {  
        alwaysOn: false  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

URL Update

urlUpdate

Options

enabled

The default value of enabled is true. This option enables page URL update when the widget dispatches to the store.

add the value manually:

const config = {  
      ...  
      urlUpdate: {  
        enabled: false  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Search Config

searchConfig

Options

scrollUpOnRefresh

The default value of scrollUpOnRefresh is true. When enabled this option scroll the page to it’s top when page is refreshed.

false

change field value:

const config = {  
      ...  
      searchConfig : {  
        scrollUpOnRefresh: false  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Result Item

resultItem

Options

titleField

default value 'itemname'

linkField

default value 'url'

thumbField

default value 'thumb'

itemSelect

default value 'true'

langIndiffFields

default value - empty array [].This is an array with fields that don’t need suffix for language.

const config = {  
      ...  
      resultItem: {  
            titleField: 'itemname',  
            linkField: 'pageurl',  
            thumbField: 'thumb',  
            itemSelect: false,  
            langIndiffFields: [  
              0:"pageurl"  
            ]  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Suggestion Item

suggestionItem

Options

titleField

default value 'itemname'

linkField

default value 'url'

thumbField

default value 'thumb'

itemSelect

default value 'true'

langIndiffFields

default value - empty array []. This is an array with fields that don’t need suffix for language.

const config = {  
      ...  
      suggestionItem: {  
            titleField: 'itemname',  
            linkField: 'pageurl',  
            thumbField: 'thumb',  
            itemSelect: false,  
            langIndiffFields: [  
              0:"pageurl"  
            ]  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Pagination

pagination.type
Pagination config defines the type of pagination layout.

default value 'dispatch'

Options

dispatch

pagination buttons use javascript function to display the results on the next page

link

pagination buttons are HTML anchors tags with href to the next page. This option is used for SEO optimizations:

const config = {  
      ...  
      pagination: {  
            type: 'link'  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Params Mapping

paramsMapping
This option accepts key/value pairs in order to define the URL parameters.

Options
The format of the options applies for each available fields and it looks like this:

const config = {  
      ...  
      paramsMapping = {  
        'keyword': 'search_query',  
        'sort': 'search_sort',  
        'pg': 'search_page',  
        'mpp': 'search_mpp',  
        'lpurl': 'search_lpurl',  
        'searchWithin': 'search_within',  
        'indexName': 'search_index'  
      },  
      ...  
};

var widget = HawksearchVue.createWidget(component, { config: config});

HawksearchVue.initialSearch(widget);

Client Guid

📘

Dashboard URL

📘

API URL

Search URL

Autocomplete URL

Recommendation URL

Widget Guid

📘

Widget Unique ID

📘

Website URL

Track Event URL

📘

Index Name

📘Note

Index Name Required

Language

Additional Parameters

Search Box Config

Facet Config

Tab Config

URL Update

Search Config

Result Item

Suggestion Item

Pagination

Params Mapping

📘
Note