Skip to main content

Configuring JS layout

Fast Simon Autocomplete uses advanced view rendering to bring the most optimized user experience. To adjust elements or logic we provide unique hooks you can use to edit the elements we generate.

Getting Started​

Autocomplete hook Flow​

  1. Register a hook using a script tag located in the <head>
  2. Autocomplete will pickup the hook and will execute any code you write there
  3. Hook will run again on every life cycle update

Rules​

  1. Registering a hook with the same event name will override the previous one and will update layout automatically.
  2. You can only manipulate the dom element provided by the hook.
  3. We only update the dom nodes that changed in each life cycle change, so make sure your code doesn't add the same elements twice (see examples)
  4. hook runs per item, data will contain the specific identifier

Register a new hook & execute it​

<script>
function hooks() {
    FastAutocomplete.registerHook('{{ customization_hook_name_1 }}', ({data, index, element}) => {
        // logic here
    });

    FastAutocomplete.registerHook('{{ customization_hook_name_2 }}', ({data, index, element}) => {
        // logic here
    });
}

// execution here
if (window.FastAutocomplete) {
    hooks();
} else {
    window.addEventListener('fast-autocomplete-ready', function () {
        hooks();
    });
}
</script>

Available Hooks​

Event NameDescriptionCallback ParamsReturn Params
"render-autocomplete-product-item"Life cycle hook: every product item suggestion updateobject: {product: Product, index: number, element: HTMLElement}void
"render-autocomplete-popular-search-item"Life cycle hook: every popular search suggestion updateobject: {search: PopularSearch, index: number, element: HTMLElement}void
"render-autocomplete-recent-item"Life cycle hook: every recent search suggestion updateobject: {recent: RecentSearch, index: number, element: HTMLElement}void
"render-autocomplete-turbolink-item"Life cycle hook: every turbolink suggestion updateobject: {turbolink: Turbolink, index: number, element: HTMLElement}void
"render-autocomplete-category-item"Life cycle hook: every category suggestion updateobject: {category: Category,index: number, element: HTMLElement}void
"render-article-item"Life cycle hook: every article item suggestion updateobject: {element: HTMLElement}void
"render-autocomplete"Life cycle hook: every suggestion updateobject: {element: HTMLElement}void
"autocomplete-narrow-by"Add narrow to every product suggestion / search results pagevoidnarrow: Narrow

type references: Typescript Types