Versions Compared

Old Version 4

changes.mady.by.user gabriel.georgiev (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Liliya Burlakova

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

In this article you will find:

Table of Contents

Overview

The Hawksearch results widget also has an implementation with ReactJS. This version provides the most common use cases of the search service.

...

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

...

Info

Configured Hawksearch results widget.

Configuring ' Hawksearch results ' Widgetwidget

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-app" or data-component="react-app-bootstrap". It should be an empty div element. Comment the part marked as Vue template.
    The React template is looking like this:

    Code Block
    // React template

    @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-app-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-tracking-events="@Model.TrackingEvents"
            data-index-name="@Model.HawksearchIndexName"
            data-json-params="@Model.Data"
            data-show-searchbox="@Model.ShowSearchBox.ToString()"
            data-current-culture="@Model.CurrentCulture">
        </div>

        <script data-translations="react-mappings" type="application/json">
            {
            "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Libraries.Model.Document": "@Html.HtmlSanitize(Html.Resource("DocumentTypeDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.News.Model.NewsItem": "@Html.HtmlSanitize(Html.Resource("NewsItemDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Blogs.Model.BlogPost": "@Html.HtmlSanitize(Html.Resource("BlogPostDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Lists.Model.ListItem": "@Html.HtmlSanitize(Html.Resource("ListItemDisplayName", "HawkWidgetsResources"))",
            "Telerik.Sitefinity.Pages.Model.PageNode": "@Html.HtmlSanitize(Html.Resource("PageNodeDisplayName", "HawkWidgetsResources"))"
            }
        </script>

        <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"))",
            "response_error_generic": "An error occurred while searching for your results. Please contact the site administrator."
            }
        </script>

  3. Save, re-build and refresh the page.

  4. Now the active template that is used in the Hawksearch result widget should be the React one.