Overview
In some rare cases, it is needed to override part of the data that is associated to the search results. For these case there is a custom labels mapping structure that enhances the data.
Goal
This document provides insight on Vue.js React powered custom mappings feature.
Prerequisite
| Info |
|---|
Configured Hawksearch box or results widget using the Vue template Setup Hawksearch box with Vue.js React template Configuring 'Hawksearch results' Widget Setup Enable React for Hawksearch results with Vue.js |
...
Facets localization
The label mappings are realized the same way as the translations. An array with the label values is positioned in each of the widget templates. In this case however, the array should be extended with any values that are specific to the indexed data. The most common case is mapping the Sitefinity content type value to a human readable label in the facets and selections header.
| Code Block |
|---|
<script data-translations="vuereact-mappings" type="application/json"> { "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))", ... } </script> |
...