In this article you will find:
| Table of Contents |
|---|
Overview
The React version integration of the Hawksearch results can be extended with custom templates for result itemscustomized with additional functionalities and extended layouts. For this, it is required to include install the react-hawksearch NPM package separately and include the extended build resources.
Goal
This document provides information regarding template extension of extending the Hawksearch results widget and it’s its layout and style customization capabilitiesstyles.
Prerequisite
| Info |
|---|
Configured Hawksearch results widget using the Vue templateConfiguring 'Hawksearch results' Widget React template |
Extending the widget template
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).
Open the active results active 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.
Copy the file of the base template and name it accordingly (Hawksearch.CustomResults.cshtml for example).Follow Extending result item component for examples on how to create custom result items.
Make sure to include enable the proper markup (i.e. the target element) in the widget template. It should have the react prefix.
Import the build bundled JS resources that include the components component's initialization.
Code Block @Html.Script(Url.WidgetContent("assetshawksearch/react/build/js/<build_file>.js"), "bottom", false)Clean up all other components component's markup that are is not relevant to this widget.
Save, rebuild and refresh the page.
...