Overview
Sitefinity supports multiple languages and the Vue SDK is integrated into this. A wide range of labels are exposed for translation via Sitefinity localization feature and any configured language can used to translate the widgets interface.
Goal
This document provides insight on Vue.js powered templates localization features.
Prerequisite
| Info |
|---|
Configured Hawksearch box or results widget using the Vue template Setup Hawksearch box with Vue.js |
Translations mapping
Each of the Hawksearch widgets comes with a JSON array that defines the mappings of exposed labels from the Vue SDK to the Sitefinity resources. It defines how these labels are translated and is a finite list of label keys. Any new labels that are created for the interface are added to the array and it usually doesn’t require any additional configuration.
Label translations
| Code Block |
|---|
<script data-translations="vue-translations" type="application/json">
{
"Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))",
"Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))",
"Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))",
"Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))",
...
}
</script> |
| Info |
|---|
The inclusion of this array is required for enabling translations. Removing it will prevent the system to modify any of the labels and fallback to its default language. The default language is English. |