Versions Compared

Old Version 11

changes.mady.by.user Viktor Kurtev (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Viktor Kurtev (Unlicensed)

Saved on

Key

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

...

Info

Configured Hawksearch widgets - Kentico: Working with widgets

Extending the templates

  1. In order to override the default view file the Hawksearch search results widget uses you need to create a razor view file in your

...

  1. frontend project at Views/Shared/Components/SearchResults/Default.cshtml.

  2. In order to add additional templates, create corresponding view files under Views/Shared/Components/SearchResults/ . When displayed in the widget settings, they will be split by capital letters and words after the first will be lowercased. So a view file called “SearchResultsTemplateOne“ will be displayed like “Search results template one” in the widget settings.

    The way the connector is designed it will automatically find the razor view files in that folder and use them. Below is the Default.cshtml code used for each version of the NuGet.

Kentico 12 NuGet

Code Block
@model Hawksearch.Kentico.Xperience.UI.Widgets.SearchResultsViewModel

@{
    var trackedEvents = new List<string>()
{
        Model.Properties.TrackBannerClickEvent ? "BannerClick" : "",
        Model.Properties.TrackBannerImpressionEvent ? "BannerImpression" : "",
        Model.Properties.TrackClickEvent ? "Click" : "",
        Model.Properties.TrackPageLoadEvent ? "PageLoad" : "",
        Model.Properties.TrackRecommendationClickEvent ? "RecommendationClick" : ""
    };

    var eventsJson = Newtonsoft.Json.JsonConvert.SerializeObject(trackedEvents.Where(a => !string.IsNullOrEmpty(a)));
    var settingsJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.ConnectorSettings);

    var language = Model.ConnectorSettings.MultilingualIndexingEnabled ?
                                CMS.Localization.LocalizationContext.CurrentCulture.CultureCode : "";
    
    var languageIndifferentFields = Newtonsoft.Json.JsonConvert.SerializeObject(Model.FieldNames);
}

@if (Model.ConnectorSettings.FrontendFramework == Hawksearch.Kentico.Xperience.CMS.Configuration.FrontendFrameworkType.Vue)
{
    <div class="vue-app-wrapper-ae hawk"
         data-indexname="@Model.Properties.IndexName"
         data-language="@language"
         data-languageindifferentfields="@languageIndifferentFields"
         data-additionalparameters="@Model.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"
         data-initialsearch="true">
        <div class="hawk__body">

            <facet-list></facet-list>

            <results></results>

        </div>
    </div>

    <script id="custom-result-item" type="x-template">
        <div class="result-item">
            <p class="result-item-title">{{ getField('title') }}</p>
            <p class="result-item-description">{{ getField('description') }}</p>
        </div>
    </script>
}
else
{
    <div id="hawksearch-react-search-results"
         data-indexname="@Model.Properties.IndexName"
         data-language="@language"
         data-languageindifferentfields="@languageIndifferentFields"
         data-additionalparameters="@Model.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
    </div>
}

Kentico 13 NuGet

Code Block
@model Hawksearch.Kentico.Xperience.UI.Widgets.SearchResultsViewModel

@{
    var trackedEvents = new List<string>()
{
        Model.ComponentViewModel.Properties.TrackBannerClickEvent ? "BannerClick" : "",
        Model.ComponentViewModel.Properties.TrackBannerImpressionEvent ? "BannerImpression" : "",
        Model.ComponentViewModel.Properties.TrackClickEvent ? "Click" : "",
        Model.ComponentViewModel.Properties.TrackPageLoadEvent ? "PageLoad" : "",
        Model.ComponentViewModel.Properties.TrackRecommendationClickEvent ? "RecommendationClick" : ""
    };

    var eventsJson = Newtonsoft.Json.JsonConvert.SerializeObject(trackedEvents.Where(a => !string.IsNullOrEmpty(a)));
    var settingsJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.ConnectorSettings);

    var language = Model.ConnectorSettings.MultilingualIndexingEnabled ?
                                CMS.Localization.LocalizationContext.CurrentCulture.CultureCode : "";

    var languageIndifferentFields = Newtonsoft.Json.JsonConvert.SerializeObject(Model.FieldNames);
}

@if (Model.ConnectorSettings.FrontendFramework == Hawksearch.Kentico.Xperience.CMS.Configuration.FrontendFrameworkType.Vue)
{
    <div class="vue-app-wrapper-ae hawk"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-languageindifferentfields="@languageIndifferentFields"
         data-additionalparameters="@Model.ComponentViewModel.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"
         data-initialsearch="true">
        <div class="hawk__body">

            <facet-list></facet-list>

            <results></results>

        </div>
    </div>

    <script id="custom-result-item" type="x-template">
        <div class="result-item">
            <p class="result-item-title">{{ getField('title') }}</p>
            <p class="result-item-description">{{ getField('description') }}</p>
        </div>
    </script>
}
else
{
    <div id="hawksearch-react-search-results"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-languageindifferentfields="@languageIndifferentFields"
         data-additionalparameters="@Model.ComponentViewModel.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
    </div>
}

...

Info

You can use the “getField” call as on row 40 43 of the snippet above to get fields values that were returned for each document from Hawksearch.

...