Versions Compared

Old Version 4

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

Saved on

compared with

New Version 5

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

Saved on

Key

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

...

Extending the template

In order to replace the current default view file the Hawksearch results widget uses you need to create a .cshtml view file in your ASP .NET Core project at Views/Shared/Components/Widgets/SearchResults/_Default.cshtml. The way the connector is designed it will automatically find that .cshtml file and use it instead of the default one. Below is the default cshtml code used.

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

@{
    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>

If you want to modify the actual result item template (the one used to render each result item), you need to modify the html code inside the <script id=”custom-result-item”> element. It is important to note that the overall widget needs to be wrapped in a div element with the class “vue-app-wrapper-ae“ and to have the data attributes present as in the snippet above, otherwise functionality might not work as expected. Currently, the connector locates those divs in a page when initializing the Vue.js components.

...