@nosto/preact

    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?: CssSelector;
        fallback?: boolean | "legacy";
        formCssSelector: string;
        formUnbindDelay?: number;
        historyComponent?: ComponentType;
        historyEnabled?: boolean;
        historySize?: number;
        hitDecorators?: HitDecorator[];
        inputCssSelector?: string;
        isCategoryPage?: () => boolean;
        merchant: string;
        persistentSearchCache?: boolean;
        preservePageScroll?: boolean;
        queryModifications?: (
            query: SearchQuery,
            pageType: undefined | PageType,
        ) => SearchQuery;
        retries?: number;
        retryInterval?: number;
        serpComponent?: ComponentType;
        serpFallback?: (query: SearchQuery) => void;
        serpPath?: string;
        serpPathRedirect?:
            | boolean
            | ((query: SearchQuery, options: undefined | AutocompleteOptions) => void);
        serpQuery?: QueryProvider;
        serpRenderDelay?: () => Promise<void>;
        serpUrlMapping?: Record<string, string>;
        variationId?: () => undefined | string;
    }
    Index

    Properties

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

    Properties

    autocompleteComponent?: ComponentType

    Preact autocomplete main component

    autocompleteMinLength?: number

    Minimal input length to render autocomplete

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

    as object:

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

    as function:

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

    Category root component

    categoryCssSelector?: string

    CSS selector for category content rendering

    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.

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

    returns current category id

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

    categoryPath?: () => undefined | string

    returns current category path

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

    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.

    as object:

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

    as function:

    categoryQuery() {
      return {
         products: {
            facets: ["*"],
            fields: ["variantId", "availability", ....]
            variationId: this.variationId()
            ...
         }
      }
    }
    compressUrlParameters: boolean | Partial<MapperOptions>

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

    as boolean

    compressUrlParameters: true

    as object
    compressUrlParameters: {
      filterRangeSeparator: "~"
    }

    false
    contentCssSelector?: string

    CSS selector for search page rendering.

    debounceDelay?: number

    Debounce delay for search input

    defaultCurrency: string

    Merchant's default Currency.

    dropdownCssSelector?: CssSelector

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

    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.

    false
    formCssSelector: string

    CSS selector for form to unbind it.

    formUnbindDelay?: number

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

    historyComponent?: ComponentType

    History component

    historyEnabled?: boolean

    Indicates if history should be enabled

    true
    historySize?: number

    History size

    5
    hitDecorators?: HitDecorator[]

    Hit decorators are used to modify the products hits before they are rendered.

    inputCssSelector?: string

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

    isCategoryPage?: () => boolean

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

    merchant: string

    Merchant ID.

    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.

    preservePageScroll?: boolean

    Preserve page scroll position when navigating back to search page.

    If enabled, it's highly recommended to also enabled persistentSearchCache for best user experience.

    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

    queryModifications: query => query

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

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

    3
    retryInterval?: number

    Interval between retries in milliseconds

    500
    serpComponent?: ComponentType

    Preact search page main component.

    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.

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

    Search page path, renders in any page if not specified

    serpPathRedirect?:
        | boolean
        | ((query: SearchQuery, options: undefined | AutocompleteOptions) => void)

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

    In case a function is provided, it will be called with the query object and autocomplete options.

    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.

    as object:

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

    as function:

    serpQuery() {
      return {
         products: {
            facets: ["*"],
            fields: ["variantId", "availability", ....]
            variationId: this.variationId()
            ...
         }
      }
    }
    serpRenderDelay?: () => Promise<void>

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

    import { waitForElement } from "@nosto/preact"

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

    variationId?: () => undefined | string

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

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

    Settings

    Member Visibility

    On This Page

    Properties
    MMNEPVFCICPMFPCPTTAAATR