Как добавить мультиязычность в Adaptive Sales?

Покупатель будет видеть сообщения на языке его браузера

Содержание

– Как работает перевод?

– Как добавить перевод на один язык?

– Как добавить перевод на 2 языка

Как работает перевод?

Добавляемый код понимает на каком языке работает браузер покупателя и показывает ему сообщение на этом языке. Т.е. если в настройках браузера у покупателя основной язык включен английский, то все сообщения приложение будет показывать покупателю на английском языке, а если французский, то сообщения будут на французском.

Для добавления перевода на другой язык вам нужно сначала заполнить все сообщения, которые вы хотите использовать в приложении.

ВАЖНО: В настройках сообщений, мы предлагаем вам использовать язык, на котором текст смогут прочитать и понять максимальное количество людей из вашей целевой аудитории, это английский язык (добавляется по умолчанию). 

Пример:
Ваши товары покупают из США, Германии, Канады, Франции, России. Скорее всего из стран США, Германии, Канады, Франции люди понимают лучше английский язык чем русский, поэтому, если Вы планируете добавить перевод только на английский язык, вам нужно в настройках приложения Adaptive Sales все предложения написать на английском языке и потом добавить перевод на русский язык. Так все у кого в браузере основной язык включен НЕ русский, будут читать сообщения на английском языке.

Сейчас рассмотрим конкретный пример на нашем демо магазине.

Как добавить перевод на один язык

Переходим на страницу настроек приложения  и выбираем предложение в виде баннера (рис. 1).

Рис. 1.

Открываем страницу настроек и прокручиваем до строки "Заголовок предложения" (рис. 2).  В этой строке по умолчанию добавлен текст "Top and Bottom Banners title". 

Рис. 2.

Этот текст будет видеть каждый покупатель, которому будет показан баннер (рис. 3). Текст на английском языке.

Рис. 3.

Чтобы перевести этот текст вам нужно скопировать код ниже и открыть в текстовом редакторе (например: "Блокнот" на Windows или "TexEdit" на Mac OS, или "Sublime", "Notepad++", или другие программы, позволяющие редактировать код.

<script>
   document.addEventListener('kinvasoft::adaptive-sale-ks::initialized', function (e) {
        const translator = e.detail.getTranslator();
        translator.addTranslation(
            'ru', // language code
            {
                // translation :: begin
                'Top and Bottom Banners title': 'Заголовок верхнего и нижнего баннера'
                // translation :: end
            }
        );
    }, {once : true});
</script>

После открытия кода в текстовом редакторе, код у Вас должен отображаться как на картинке ниже, где важные блоки для перевода выделены красным, желтым и фиолетовым цветами, подписаны (рис. 4).

Рис. 4.

После того, как вы добавили свой вариант перевода в скрипт, вам нужно перейти на страницу "Ваш сайт", раздел "Настройки SEO", блок "Мета-теги для верификации сайта". Нажать на кнопку редактировать (рис. 5).   

Рис. 5.

Если в блоке уже добавлен, какой-то код, то вам нужно прокрутить мышку вниз и с новой строки, добавить код, нажать кнопку "Сохранить" (рис 6).

Рис. 6.

После добавления кода и сохранения настроек, переходите на страницу "Оформление заказа", для проверки работы перевода.

ВАЖНО: чтобы текст переводился на другой язык, он должен быть идентичен тексту из строки, которую вы переводите на другой язык. Поэтому если в дальнейшем, вы решите поменять текст заголовка, то в блоке со скриптом, его тоже нужно изменить, чтобы перевод работал.

По этому алгоритму можно переводить все блоки из приложения Adaptive Sales. Как выглядит перевод заголовков в каждом сообщении смотрите на Рис.7.

Рис. 7.

Как добавить перевод на 2 языка

Часто нам нужен не один дополнительный язык в магазине, а больше. Как будет выглядет скрипт для перевода одного заголовка на 2 языка (русский и немецкий) приведен (рис. 8). 

Чтобы добавить перевод на еще один язык, вам нужно скопировать код с переводом на первый язык (на рис. 8 в красной рамке выделен уже скопированный и отредактированный перевод ) и добавить ниже, как показано на рис. 8. 

Рис. 8.

Рассмотрим подробнее код с 2 языками (рис. 9).

Рис. 9.

Смотрите пример перевода на русский и немецкий всех заголовков сообщений в приложении Adaptive Sales (рис. 10).

Рис. 10.


<script>

    document.addEventListener('kinvasoft::adaptive-sale-ks::initialized', function (e) {

        const translator = e.detail.getTranslator();

        translator.addTranslation(

            'ru', // language code

            {

                // translation :: begin

                'Offer on the Cart page title': 'Заголовок предложение на странице корзины',

                'Offer in Pop-up Window title': 'Заголовок предложение в попап окне',

                'Top and Bottom Banners title': 'Заголовок верхнего и нижнего баннера'

                // translation :: end

            }

        );

        translator.addTranslation(

            'de', // language code

            {

                // translation :: begin

                'Offer on the Cart page title': 'Angebot auf der Warenkorbseite Titel',

                'Offer in Pop-up Window title': 'Angebot im Popup-Fenster Titel',

                'Top and Bottom Banners title': 'Titel der oberen und unteren Banner'

                // translation :: end

            }

        );

    }, {once : true});

</script>

Добавляем перевод текста, которого не видно в настройках приложения

По выше приведённому алгоритму, вы можете перевести любой блок в сообщениях приложения Adaptive Sales. 

Для примера возьмем блок "Предложение в корзине". В этом предложении есть кнопка с текстом "Add to cart" (рис. 11), по умолчанию текст на кнопке написан на английском языке. Сейчас переведем его на русский язык.

Рис. 11.

Добавляем новую строку в скрипт с переводом (рис. 12)

Рис. 12.

После добавления перевода текст кнопки отображается на русском языке (рис. 13)

Рис. 13.

<script>

    document.addEventListener('kinvasoft::adaptive-sale-ks::initialized', function (e) {

        const translator = e.detail.getTranslator();

        translator.addTranslation(

            'ru', // language code

            {

                // translation :: begin

                'Offer on the Cart page title': 'Заголовок предложение на странице корзины',

                'Offer in Pop-up Window title': 'Заголовок предложение в попап окне',

                'Add to cart': 'Добавить в корзину',

                'Top and Bottom Banners title': 'Заголовок верхнего и нижнего баннера'

                // translation :: end

            }

        );

        translator.addTranslation(

            'de', // language code

            {

                // translation :: begin

                'Offer on the Cart page title': 'Angebot auf der Warenkorbseite Titel',

                'Offer in Pop-up Window title': 'Angebot im Popup-Fenster Titel',

                'Add to cart': 'In den Warenkorb',

                'Top and Bottom Banners title': 'Titel der oberen und unteren Banner'

                // translation :: end

            }

        );

    }, {once : true});

</script>

Если у вас остались вопросы по настройке перевода в приложении Adaptive Sales, пишите нам в онлайн чат, который находится на этой странице в нижнем правом углу и мы с радостью вам поможем.

Работает на