Versions Compared

Key

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

...

Info

Configured Hawksearch widgets - Kentico: Working with widgets

Extending the

...

templates

  • In order to

...

  • override the default view file the Hawksearch search results widget uses you need to create a razor view file in your ASP .NET Core project at Views/Shared/Components/SearchResults/Default.cshtml.

  • 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.

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);
}

<div class="vue-app-wrapper-ae"
     data-indexname="@Model.ComponentViewModel.Properties.IndexName"
     data-additionalparameters="@Model.ComponentViewModel.Properties.Data"
     data-trackedevents="@eventsJson"
     data-hawksearchsettings="@settingsJson"
     data-initialsearch="true">
    <div class="results-outer" style="display:flex;">
        <div class="search-facets">
            <facet-list></facet-list>
        </div>

        <div class="search-results">
            <results></results>
        </div>
    </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>

...