Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

In this page you’ll find:

Goal

The purpose of this article is to show you how to extend the existing search results widget.

Overview

All components in the Vue.js framework are quite extendable and can be modified to handle custom layout, styles and behaviour. This is possible due to the built-in capability of the platform to attach templates as script tag and therefore supplying a dynamic structure of the presentation.

Prerequisite

Configured Hawksearch widgets - Kentico: Working with widgets

Extending the template

In order to replace the current view file the Hawksearch results widget uses you need to create a .cshtml file in your ASP .NET Core project at 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.

@model Hawksearch.Kentico.Xperience.UI.Widgets.ResultsViewModel

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

Additional resources

If you’d like to use some additional components, please refer to the following pages:

  • No labels