Page Comparison

In this article you will find:

Table of Contents

Overview

...

Open the selected widget template file

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:

Code Block

// 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>

Save, re-build and refresh the page.

...

Versions Compared

Old Version 10

New Version Current

Key

Overview