# Hooks

Hooks are a way for one piece of code to interact/modify how XT Search works, pre-defined spots.

They make up the foundation for how the package templating interacts with XT Search core. The Hooks must be defined as JavaScript variables in the Browser window object. The original Algolia Widgets API functionality guides the list of integration points. Additionally, to Hooks' use, you can always use the overriding view methods available in the platform.

The available hooks are created based on experience customizing the module for clients.

# Installation Services

Save your time and focus on your business

Besides the general configuration, we complete the process according to the search configuration, in particular:

  • Check Configuration of Instant Auto-complete and search.
  • Check Adaptation and styling of the Instant Auto-complete and search to the store template.
  • Check Unlimited number of indexes, languages and products included.
  • Check Average project duration: 7-10 work days.

To know more about the installation services, click here: https://www.extly.com/xt-search-for-algolia.html#Installation-Service (opens new window)

# List of Available Hooks

# Instant Search and Instant Search AutoComplete

# Transform Hit Items

To process the search results, before they are rendered in the front: window.transformItems_hits

This is another sample code to truncate the description of the search results:

This is another sample code to split a field a customize the search results:

The new cycleArray can be rendered in the hit template in this way:

# Customize Facets Style I

The configured facets are defined in the variable: window.xtSearchFacets

Before the search widgets are initialized, the variable can be changed to alter how the facet is rendered.

# Customize Facets Style II

To customize the default style of the facets. These are the available hooks for each facet:

  • sortBy_"facet name"
  • templatesItem_"facet name"
  • transformItems_"facet name"

# Add Custom Facets

The rendered facets are based on the configured facets. You can add new custom facets and customize them using all the available Algolia widgets for filtering (opens new window).

To add custom facets: window.xtSearchExtraFacets

This is a sample custom facet:

# Add Custom Widgets

The solution uses Algolia widgets to search, filter, show the results and the pagination. Algolia has [many additional widgets] that can be integrated with the default widgets.

To add new custom widgets: window.xtDefineSearchExtraWidgets(instantsearch, search)

# Customize the Stats

The hook to customize the stats widgets is called stats_templates_text and it can be used to redefine the default template:

# AutoComplete Classic

# Autocomplete Suggestion Template

To customize the results template: window.templatesAutocompleteSuggestion

The default values are:

If images are available:

  • Otherwise, without images, text-only search results: