/
Enable React for Hawksearch box widget

Enable React for Hawksearch box widget

In this article you will find:

Overview

The Hawksearch box widget comes with a ReactJS powered front end which has the latest features exposed to the Hawksearch service.

Goal

This document provides information on setting up the Hawksearch box widget using React. Basic usage is covered in Getting started and any additional information may be found here.

Prerequisite

Steps for setup

  1. Open the selected widget template file

  2. Uncomment, if necessary, the part of the markup designated as React template. This should include a div element with attribute data-component="react-search-box" or data-component="react-search-box-bootstrap". It should be an empty div element. Comment the part marked as Vue template.
    The React template should look like this:

    // React template if (!SystemManager.IsDesignMode) { @Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false) @Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false) @Html.StyleSheet(Url.WidgetContent("assets/build/css/vendor.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/build/css/main.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch-override.css"), "head") } <div data-component="react-search-box-bootstrap" data-client-guid="@Model.ClientId" data-hawksearch-tracking-api="@Model.TrackingUrl" data-hawksearch-base-api="@Model.HawksearchBaseAPI" data-hawksearch-search-api="@Model.HawksearchSearchingAPI" data-hawksearch-autocomplete-api="@Model.AutocompleteUrl" data-json-params="@Model.Data" data-search-page="@Model.ResultsUrl" data-index-name="@Model.Index" data-current-culture="@Model.CurrentCulture"> </div> <script data-translations="react-translations" type="application/json"> { "Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))", "Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))", "Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))", "Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))", "Enter a search term": "@Html.HtmlSanitize(Html.Resource("EnterKeyword", "HawkWidgetsResources"))", "Quick Lookup": "@Html.HtmlSanitize(Html.Resource("QuickLookup", "HawkWidgetsResources"))", "Clear All": "@Html.HtmlSanitize(Html.Resource("ClearAll", "HawkWidgetsResources"))", "Clear": "@Html.HtmlSanitize(Html.Resource("Clear", "HawkWidgetsResources"))", "No Results": "@Html.HtmlSanitize(Html.Resource("NoResults", "HawkWidgetsResources"))", "Loading": "@Html.HtmlSanitize(Html.Resource("Loading", "HawkWidgetsResources"))", "You've Selected": "@Html.HtmlSanitize(Html.Resource("YouSelected", "HawkWidgetsResources"))" } </script>
  3. Save, re-build and refresh the page.

 

Related content

Enable React for Hawksearch results widget
Enable React for Hawksearch results widget
More like this
Enable Vue.js for Hawksearch box widget
Enable Vue.js for Hawksearch box widget
More like this
Create widget
Create widget
More like this
Enable Vue.js for Hawksearch results widget
Enable Vue.js for Hawksearch results widget
More like this
Kentico: Customize search results in React
Kentico: Customize search results in React
More like this
Customize search results in React
Customize search results in React
More like this