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