Interface Config

User provided configuration

interface Config {
    autocompleteComponent?: ComponentType;
    autocompleteMinLength?: number;
    autocompleteQuery?: QueryProvider;
    categoryComponent?: ComponentType;
    categoryCssSelector?: string;
    categoryFallback?: (query: SearchQuery) => void;
    categoryId?: () => undefined | string;
    categoryPath?: () => undefined | string;
    categoryQuery?: QueryProvider;
    compressUrlParameters: boolean | Partial<MapperOptions>;
    contentCssSelector?: string;
    debounceDelay?: number;
    defaultCurrency: string;
    dropdownCssSelector?: string;
    fallback?: boolean | "legacy";
    formCssSelector: string;
    formUnbindDelay?: number;
    historyComponent?: ComponentType;
    historyEnabled?: boolean;
    historySize?: number;
    inputCssSelector?: string;
    isCategoryPage?: () => boolean;
    merchant: string;
    persistentSearchCache?: boolean;
    queryModifications?: (
        query: SearchQuery,
        pageType: undefined | PageType,
    ) => SearchQuery;
    retries?: number;
    retryInterval?: number;
    serpComponent?: ComponentType;
    serpFallback?: (query: SearchQuery) => void;
    serpPath?: string;
    serpPathRedirect?: boolean;
    serpQuery?: QueryProvider;
    serpRenderDelay?: () => Promise<void>;
    serpUrlMapping?: Record<string, string>;
    variationId?: () => undefined | string;
}

Properties

autocompleteComponent? autocompleteMinLength? autocompleteQuery? categoryComponent? categoryCssSelector? categoryFallback? categoryId? categoryPath? categoryQuery? compressUrlParameters contentCssSelector? debounceDelay? defaultCurrency dropdownCssSelector? fallback? formCssSelector formUnbindDelay? historyComponent? historyEnabled? historySize? inputCssSelector? isCategoryPage? merchant persistentSearchCache? queryModifications? retries? retryInterval? serpComponent? serpFallback? serpPath? serpPathRedirect? serpQuery? serpRenderDelay? serpUrlMapping? variationId?

Properties

OptionalautocompleteComponent

autocompleteComponent?: ComponentType

Preact autocomplete main component

OptionalautocompleteMinLength

autocompleteMinLength?: number

Minimal input length to render autocomplete

Default

2

OptionalautocompleteQuery

autocompleteQuery?: QueryProvider

Default autocomplete page query parameters. Supplied as an object or a function that returning search query Functional version can be use for building complex autocomplete queries. It's more flexible and provides access to other config parameters.

Example

as object:

autocompleteQuery: {
  products: {
     facets: ["*"],
     fields: ["variantId", "availability", ....]
     ...
  }
}

Example

as function:

autocompleteQuery() {
  return {
     products: {
        facets: ["*"],
        fields: ["variantId", "availability", ....]
        variationId: this.variationId()
        ...
     }
  }
}

OptionalcategoryComponent

categoryComponent?: ComponentType

Category root component

OptionalcategoryCssSelector

categoryCssSelector?: string

CSS selector for category content rendering

OptionalcategoryFallback

categoryFallback?: (query: SearchQuery) => void

Enable category fallback when service is unavailable (overwrites global fallback option).

By default it will redirect to original page by disabling new page. If custom function is provided, it will be called with query object.

It's important that this path does not have same path as search page.

Example

categoryFallback: (query) => {
 location.replace(`/categories/${query.products.categoryId}`)
}

OptionalcategoryId

categoryId?: () => undefined | string

returns current category id

Deprecated

no need to provide this as the builtin logic is usually more reliable

OptionalcategoryPath

categoryPath?: () => undefined | string

returns current category path

Deprecated

no need to provide this as the builtin logic is usually more reliable

OptionalcategoryQuery

categoryQuery?: QueryProvider

Default category page query parameters. Supplied as an object or a function that returning search query Functional version can be use for building complex category queries. It's more flexible and provides access to other config parameters.

Example

as object:

categoryQuery: {
  products: {
     facets: ["*"],
     fields: ["variantId", "availability", ....]
     ...
  }
}

Example

as function:

categoryQuery() {
  return {
     products: {
        facets: ["*"],
        fields: ["variantId", "availability", ....]
        variationId: this.variationId()
        ...
     }
  }
}

compressUrlParameters

compressUrlParameters: boolean | Partial<MapperOptions>

Indicates if URL parameters should be compressed. If enabled, default range separator is '~'.

Example

as boolean

compressUrlParameters: true

Example

as object
compressUrlParameters: {
  filterRangeSeparator: "~"
}

Default

false

OptionalcontentCssSelector

contentCssSelector?: string

CSS selector for search page rendering.

OptionaldebounceDelay

debounceDelay?: number

Debounce delay for search input

defaultCurrency

defaultCurrency: string

Merchant's default Currency.

OptionaldropdownCssSelector

dropdownCssSelector?: string

CSS selector for autocomplete dropdown render. Leave undefined for default use (After input element)

Optionalfallback

fallback?: boolean | "legacy"

Enabled fallback for serp & category pages when service is unavailable By default, it will restore the native content.

If set to 'legacy', it will force a page reload and disable the search for the current session.

Default

false

formCssSelector

formCssSelector: string

CSS selector for form to unbind it.

OptionalformUnbindDelay

formUnbindDelay?: number

Form unbind delay after how long it should delay, default is unbinding without delay ms

OptionalhistoryComponent

historyComponent?: ComponentType

History component

OptionalhistoryEnabled

historyEnabled?: boolean

Indicates if history should be enabled

Default

true

OptionalhistorySize

historySize?: number

History size

Default

5

OptionalinputCssSelector

inputCssSelector?: string

CSS selector for each input element to bind search events like input change and form submit.

OptionalisCategoryPage

isCategoryPage?: () => boolean

Determine if current page is category Example: return location.pathname.includes('category')

merchant

merchant: string

Merchant ID.

OptionalpersistentSearchCache

persistentSearchCache?: boolean

Enable persistent caching for search results.

If enabled, the search results will be restored from cache when returning to the search page, from example, from a product page.

The cache is stored in the browser's session storage.

OptionalqueryModifications

queryModifications?: (
    query: SearchQuery,
    pageType: undefined | PageType,
) => SearchQuery

Custom function, when provided, can be used to modify search query before sending it to the server. A default implementation is provided in the config that returns the query without any modification. Note: The query parameter itself should not be touched, but instead a new object should be returned in case modifications are needed.

Type declaration

Default

queryModifications: query => query

Example

(query, pageType) => {
  return {
    ...query,
    products: {
      ...query.products,
      filter: [
        ...(query.products?.filter ?? []),
        { field: "availability", value: ["InStock"] }
      ]
    }
  }
}

Optionalretries

retries?: number

Number of retries for search request. Retries won't be applied for autocomplete requests.

Default

3

OptionalretryInterval

retryInterval?: number

Interval between retries in milliseconds

Default

500

OptionalserpComponent

serpComponent?: ComponentType

Preact search page main component.

OptionalserpFallback

serpFallback?: (query: SearchQuery) => void

Enable search fallback when service is unavailable (overwrites global fallback option).

By default it will redirect to original page by disabling new page. If custom function is provided, it will be called with query object.

It's important that this path does not have same path as search page.

Example

serpFallback: (query) => {
 location.replace(`/search?q=${query.query}`)
}

OptionalserpPath

serpPath?: string

Search page path, renders in any page if not specified

OptionalserpPathRedirect

serpPathRedirect?: boolean

Indicates if search should redirect to search page or just rewrite history

OptionalserpQuery

serpQuery?: QueryProvider

Default search page query parameters. Supplied as an object or a function that returning search query Functional version can be use for building complex search queries. It's more flexible and provides access to other config parameters.

Example

as object:

serpQuery: {
  products: {
     facets: ["*"],
     fields: ["variantId", "availability", ....]
     ...
  }
}

Example

as function:

serpQuery() {
  return {
     products: {
        facets: ["*"],
        fields: ["variantId", "availability", ....]
        variationId: this.variationId()
        ...
     }
  }
}

OptionalserpRenderDelay

serpRenderDelay?: () => Promise<void>

Delay serp page rendering given until given async function resolves Default function waitForElement can be imported from "@nosto/preact"

Example: To wait for Magento script to load

import { waitForElement } from "@nosto/preact"

init({
...
serpRenderDelay: () => {
 return waitForElement({
     selector: 'script[type="text/x-magento-init"]',
 })
}

OptionalserpUrlMapping

serpUrlMapping?: Record<string, string>

Front end URL both ways mapping, to convert URL param values and keep the request keys { query: 'q' - will map query param to appear as q in URL product.filters: 'ff' - will map to ff.0.field.0: 'brand' and so on.. product.size: 'size' - will map to size: 24 }

OptionalvariationId

variationId?: () => undefined | string

return current variation id, can be supplying for supplying multi-currency and B2B variations

Deprecated

no need to provide this as the builtin logic is usually more reliable

Settings

Member Visibility

On This Page

Properties