Search Widgets Common Data Attributes & Hook Functions

data-app

Yes

String

Title of desired widget. Should be "search-app". Example:

data-app="search-app"

data-app-id

No

String

Unique algolia application identifier. It's used to identify you when using Algolia's API.
Can be found in algolia board -> API Keys;

Example:

data-app-id="K5K87EHRJP"

data-api-key

No

String

Public algolia API key which is usable for search queries and it's also able to list the indices.
Can be found in algolia board -> API Keys;

Example:

data-api-key="ca64bbc3e020872a8bdf4s"

data-affiliate-id

Yes

String

Title of special widget's view user wants to insert. Represent widget type.

There are several views:

input-search
search-results
search-results-with-filters
search-cta

data-css-mode

No

String

The CSS to be applied to the widget. Valid values are:

full. This will display the widget with full "out-of-the-box" recommended styling. For example: input-search-full

grid - This will display the widget without colours and aesthetic styling, but retain the general layout of the widget. For example: input-search-grid

min - This will display the widget without any CSS (ideal for applying your own custom styling). For example: input-search-min

Note: "full" is used by default, if no CSS mode is specified.

data-index-nam

No

String

Identifier of the algolia index name which will be the search for products/venues or etc.

input-search-index

Right now for developer's purposes "products" are used.

For the production environment will be used:

prod_products
prod_venues
Examples:

data-index-name="products"
data-index-name="prod_products"
Note: "product" is used by default, if no Index name is specified.

data-pre-filter

No

String

Object type which is used for the filtering result events. Will be added in search query. Can include multiple object types.

Examples:

data-object-type="PRD"
(only items where object_type = PRD will be shown)

data-object-type="PRD,VEN"
(only items where object_type = PRD OR object_type = VEN will be shown)

data-object-type="*"
(all items will be shown)

data-object-subtype

No

String

Object sub type which is used for the filtering result events. Will be added in search query. Can include multiple object sub types.

Examples:

data-object-subtype="SHW"
(only items where object_sub_type = SHW will be shown)

data-object-subtype="SHW,ATT"
(only items where object_sub_type = SHW OR object_type = ATT will be shown)

data-object-subtype="*"
(all items will be shown)

Note: data-object-subtype can be ignored when data-object-type has more than 1 value or [empty string]

data-limit-results

No

String (number)

The max number of returned results.

Default value: 30

Valid values are: numeric value x, where 1 < x < 30

note: if value not valid it will be default value: 30

Example:

data-limit-results="10"

data-action-url

No

String

Used to replace the base url of a search result item url.
Example: http://mywebsite.com/section-of-my-site

override Item RedirectUrl

objectId: string,
nativeId: string,
objectType: string,
objectSubtype: string,
originalUrl: string

String

Function to override original item redirect url depends on item properties

Example:

window.EncoreSearch.overrideItemRedirectUrl = function (
objectId,
nativeId,
objectType,
objectSubtype,
originalUrl
) {
return 'https://test.com/products/' + objectType + '/' + objectId;
}