Customize search results in React

Owned by gabriel.georgiev (Deactivated)
Last updated: Mar 31, 2021 by andrey.sotirov (Deactivated)
1 min read

In this article you will find:

Overview

The React integration of Hawksearch results can be customized with additional functionalities and extended layouts. For this, it is required to install the react-hawksearch NPM package separately and include the extended build resources.

Goal

This document provides information regarding extending the Hawksearch results widget and its layout and styles.

Prerequisite

Configured Hawksearch results widget using the React template

Enable React for Hawksearch results widget

React SDK setup

 

Extending the widget template

  1. Follow the React SDK setup steps to set up the npm package in your target project. This should result in a dedicated folder with the specified structure (e.g. hawksearch/react).

  2. Open the active results widget template for editing. It is located in Mvc\Views\Hawksearch\Hawksearch.Default.cshtml. If a resource package is used, then edit the same path in the ResourcePackages folder. Make sure that this is the correct template.

  3. Copy the file of the base template and name it accordingly (Hawksearch.CustomResults.cshtml for example).

  4. Make sure to enable the proper markup (i.e. the target element) in the widget template. It should have the react prefix.

  5. Import the bundled JS resources that include the component's initialization.

    @Html.Script(Url.WidgetContent("hawksearch/react/build/js/<build_file>.js"), "bottom", false)

  6. Clean up all other component's markup that is not relevant to this widget.

  7. Save, rebuild and refresh the page.

Â