Versions Compared

Key

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

...

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 : "";
}

@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-additionalparameters="@Model.ComponentViewModel.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"

    data-initialsearch="true">     <div class="results-outer" style="display:flex;data-initialsearch="true">
        <div class="search-facetshawk__body">

            <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>
}
else
{
    <div id="hawksearch-react-search-results"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-additionalparameters="@Model.ComponentViewModel.Properties.Data"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
    </div>
}

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.

...