atomic-search-interface

This is for:

Developer
In this article

The atomic-search-interface component is the parent to all other atomic components in a search page. It handles the headless search engine and localization configurations.

Properties

Property Attribute Description Type Default

analytics

analytics

Whether analytics should be enabled.

boolean

true

enableRelevanceInspector

enable-relevance-inspector

Whether the relevance inspector shortcut should be enabled for this interface.

The relevance inspector can be opened by holding the Alt key (Option on Mac) while over the interface, and performing a double click.

The relevance inspector allows to troubleshoot and debug queries.

boolean

true

engine

The search interface headless engine.

SearchEngine<{}> | undefined

fieldsToInclude

fields-to-include

A list of non-default fields to include in the query results.

Specify the property as an array using a JSON string representation:

<atomic-search-interface fields-to-include='["fieldA", "fieldB"]'></atomic-search-interface>

string | string[]

'[]'

i18n

The search interface i18next instance.

i18n

i18next.createInstance()

iconAssetsPath

icon-assets-path

The icon assets path. By default, this will be a relative URL pointing to ./assets.

Example: "/mypublicpath/icons"

string

'./assets'

language

language

The search interface language.

string

'en'

languageAssetsPath

language-assets-path

The language assets path. By default, this will be a relative URL pointing to ./lang.

Example: "/mypublicpath/languages"

string

'./lang'

localizationCompatibilityVersion

localization-compatibility-version

The compatibility JSON version for i18next to use (see i18next Migration Guide).

"v3" | "v4"

'v3'

logLevel

log-level

The severity level of the messages to log in the console.

"debug" | "error" | "fatal" | "info" | "silent" | "trace" | "warn" | undefined

pipeline

pipeline

The search interface query pipeline.

If the search interface is initialized using initializeWithSearchEngine, the query pipeline should instead be configured in the target engine.

string | undefined

reflectStateInUrl

reflect-state-in-url

Whether the state should be reflected in the URL parameters.

boolean

true

scrollContainer

scroll-container

The CSS selector for the container where the interface will scroll back to.

string

'atomic-search-interface'

searchHub

search-hub

The search interface search hub.

If the search interface is initialized using [initializeWithSearchEngine](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-interface/#initializewithsearchengine, the search hub should instead be configured in the target engine.

string | undefined

timezone

timezone

The tz database identifier of the time zone to use to correctly interpret dates in the query expression, facets, and result items. By default, the timezone will be guessed.

Example: "America/Montreal"

string | undefined

Methods

executeFirstSearch

Executes the first search and logs the interface load event to analytics, after initializing connection to the headless search engine.

Signature: executeFirstSearch() => Promise<void>

Returns: Promise<void>

getOrganizationEndpoints

Returns the unique, organization-specific endpoint(s).

Signature: getOrganizationEndpoints(organizationId: string, env?: PlatformEnvironment) => Promise<{ platform: string; analytics: string; search: string; admin: string; }>

Returns: Promise<{ platform: string; analytics: string; search: string; admin: string; }>

initialize

Initializes the connection with the headless search engine using options for accessToken (required), organizationId (required), renewAccessToken, organizationEndpoints (recommended), and platformUrl (deprecated).

Signature: initialize(options: InitializationOptions) => Promise<void>

Returns: Promise<void>

initializeWithSearchEngine

Initializes the connection with an already preconfigured [headless search engine](https://docs.coveo.com/en/headless/latest/reference/search/), as opposed to the initialize method, which will internally create a new search engine instance. This bypasses the properties set on the component, such as analytics, searchHub, pipeline, language, timezone & logLevel.

Signature: initializeWithSearchEngine(engine: SearchEngine) => Promise<void>

Returns: Promise<void>