Versions Compared

Old Version 1

changes.mady.by.user gabriel.georgiev (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user andrey.sotirov (Deactivated)

Saved on

Key

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

In this article you will find:

Table of Contents

Overview

Sitefinity supports multiple languages and the Vue React 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 React powered templates localization features.

Prerequisite

Info

Configured Hawksearch box or results widget using the Vue React template

https://hawksearch.atlassian.net/wiki/spaces/CON/pages/605618600/Configuring%2BHawksearch%2Bbox%2BWidget

Setup Enable React for Hawksearch box with Vue.jswidget

Configuring ' Hawksearch results ' WidgetSetup widget

Enable React for Hawksearch results with Vue.jswidget

Translations mapping

Each of the Hawksearch widgets comes with a JSON array that defines the mappings of exposed labels from the Vue React 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="vuereact-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>

...