THIS IS ARCHIVED DOCUMENTATION

UrlManager (Deprecated)

The UrlManager controller can parse an url fragment to extract search parameters which affect the search response.

Methods

synchronize

Updates the search parameters in state with those from the url & launches a search.

Parameters

  • fragment: string

    The part of the url that contains search parameters. E.g., q=windmill&f[author]=Cervantes

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state relevant to the UrlManager controller.

Properties

  • fragment: string

    The part of the url that contains search parameters. E.g., q=windmill&f[author]=Cervantes

Initialize

buildUrlManager

Creates a UrlManager controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

  • props: UrlManagerProps

    The configurable UrlManager properties.

Returns UrlManager

UrlManagerProps

The configurable UrlManager properties.

Properties

UrlManagerInitialState

The initial state that should be applied to the UrlManager controller.

Properties

  • fragment: string

    The part of the url that contains search parameters. E.g., q=windmill&f[author]=Cervantes

Unsubscribe

Call signatures

  • (): void

Example Implementation

url-manager.ts

import {buildUrlManager, SearchEngine} from '@coveo/headless';
 
/**
 * Search parameters, defined in the url's hash, should not be restored until all components are registered.
 *
 * Additionally, a search should not be executed until search parameters are restored.
 *
 * @param engine - A headless search engine instance.
 * @returns An unsubscribe function to remove attached event listeners.
 */
export function bindUrlManager(engine: SearchEngine) {
  const fragment = () => window.location.hash.slice(1);
 
  const urlManager = buildUrlManager(engine, {
    initialState: {fragment: fragment()},
  });
  const onHashChange = () => {
    urlManager.synchronize(fragment());
  };
 
  window.addEventListener('hashchange', onHashChange);
  const unsubscribeManager = urlManager.subscribe(() => {
    const hash = `#${urlManager.state.fragment}`;
    history.pushState(null, document.title, hash);
  });
 
  return () => {
    window.removeEventListener('hashchange', onHashChange);
    unsubscribeManager();
  };
}