Заказать звонок
+7 (984) 333-09-79
+7 (984) 333-09-79
Заказать звонок
Открыть проект

Доработка сайта Matsesta.shop на платформе 1С-Битрикс

Реализация многоязычности на сайте matsesta.shop с помощью API Яндекс.Переводчика

Задача:
Необходимо было добавить функционал автоматического перевода всего контента сайта на английский язык с возможностью переключения между русской и английской версиями в режиме реального времени.
Решение
Техническая реализация:
  • Интеграция API Яндекс.Переводчика (https://translate.yandex.ru/developers)
  • Создание механизма динамического перевода контента
  • Добавление интерфейса для переключения языков
Interpretation
Simultaneous, consecutive, liaison, whispered, and telephone interpreting for any kind of event.
Proofreading and editing
Correction errors in translation, mistranslation, typographical mistakes, or excessively literal translation.
Rewriting and copywriting
Adapting texts and documents to a brand new market and readership, choosing a suitable writing style.
Audio transcription
Conversion of speech (from an audio or video source file) into an electronic text document.

Результат

  • Пользователи получили возможность просмотра сайта на английском языке без необходимости создания отдельной англоязычной версии в CMS Bitrix
  • Система автоматически переводит контент в режиме реального времени
  • Улучшена доступность сайта для международной аудитории
Задача:
Необходимо было добавить функционал автоматического перевода всего контента сайта на английский язык с возможностью переключения между русской и английской версиями в режиме реального времени.
Our Advantages
We work hard every day to make life of our clients better and happier
Quality
Each member of our team has at least 5 years of legal experience.
Support
We offer you a professional 30-minute consultation with our specialist.
Price
Our prices are fixed for some standard services.
Professional Skills
The best way to improve your professional skills and increase your value
  • 45%
    SKETCH
    1 year
  • 100%
    ADOBE ILLUSTRATOR
    3 years
  • 65%
    MOBILE UI
    2 years
Reasons to Choose Our Service
We work hard every day to make life of our clients better and happier
  • Quality
    We are a leading firm in providing quality and value to our customers.
  • Support
    Our managers are always ready to answer your questions. You can call us at the weekends and at night.
  • Flexibility
    This method allows us to achieve success in problems of all levels.
  • Experience
    Each member of our team has at least 5 years of legal experience.
  • Presents
    We like to make people happy. We ask our clients about their birthday and prepare cool presents.
  • Efficiency
    We care about our clients' time. Just give us a call, and we will help you with all the questions.

Designing Living Spaces With Sustainable Materials

Architects, designers, and environmentalists are partnering to design the perfect spaces for a sustainable future.

  • Ergonomics

    Spacious and multifunctional indoor spaces designed to surpass expectations

  • High Quality

    Constructed with high-quality eco-friendly materials to protect the environment
Добавьте файлы в header сайта:
<script src="./scripts/custom-translate.js"></script>
<link rel="stylesheet" href="./styles/custom-translate.css">
Вставьте HTML в тело сайта:
<div class="language-switcher lang-fixed">
     <div id="customYandexWidget" style="display: none;"></div>
     <div class="language__button active-lang" data-current-lang="">
          <img class="flag-icon active-flag" src="./assets/flags/russian.png" alt="Russian">
     </div>
     <div class="language-menu" data-languages="">
          <a class="lang-option" data-target-lang="ru">
               <img class="flag-icon" src="./assets/flags/russian.png" alt="Russian">
          </a>
          <a class="lang-option" data-target-lang="en">
               <img class="flag-icon" src="./assets/flags/english.png" alt="English">
          </a>
          <a class="lang-option" data-target-lang="de">
               <img class="flag-icon" src="./assets/flags/german.png" alt="German">
          </a>
          <a class="lang-option" data-target-lang="zh">
               <img class="flag-icon" src="./assets/flags/chinese.png" alt="Chinese">
          </a>
          <a class="lang-option" data-target-lang="fr">
               <img class="flag-icon" src="./assets/flags/french.png" alt="French">
          </a>
     </div>
</div>
Добавление нового языка. Полный список доступных языков и их кодов можно найти в официальной документации Яндекс переводчика.  https://yandex.ru/support/translate-desktop/ru/supported-langs
data-target-lang="{CODE}"
Исключение контента для перевода. Если на вашей странице есть контент, который не должен переводиться, вы можете добавить атрибут translate="no" к любому HTML элементу. Например:
Напишите нам по адресу <span translate="no">support at ourdomain dot com</span>
Настройка переводчика

Как мы это сделали

Техническая реализация
  • Использование официального API HeadHunter (https://api.hh.ru/ )
  • Создание отдельного модуля для работы с API
  • Реализация системы периодического обновления данных
Основные функции
  • Автоматический импорт вакансий по заданным параметрам (фильтрация по работодателю)
  • Пагинация результатов
  • Отображение ключевой информации о каждой вакансии
Архитектурные решения:
  • Реализация серверной части на php с использованием библиотеки CMS Bitrix для взаимодействия с API
  • Настройка автоматического для регулярного обновления данных каждые 30 минут
Интерфейс
  • Адаптивный дизайн карточек вакансий
  • Возможность перехода на страницу вакансии на hh.ru
Особенности реализации:
  • Обработка ошибок соединения с API
  • Учет лимитов запросов к API HeadHunter

Задача:

Пользователи сайта получили доступ к актуальному списку вакансий компании без необходимости переходить на сайт hh.ru
Система автоматически переводит контент в режиме реального времени
Улучшена доступность сайта для международной аудитории

Инструкция по установке Яндекс переводчика на сайт

Результат

Интеграция вакансий с hh.ru на сайт matsesta.shop
Называется он: custom-yandex-translation-widget
Файлы для установки берем отсюда: https://github.com/get-web/yandex-translate-custom-widget 
Необходимо было создать раздел «Вакансии» (https://matsesta.shop/vacancy/) на сайте компании, который бы автоматически подгружал актуальные вакансии с платформы HeadHunter, обеспечивая их обновление в режиме реального времени.
Технические детали
  • Использование метода translate API Яндекс.Переводчика
  • Обработка специальных символов и форматирования текста
Работа началась с создания логотипа и определения фирменного стиля. В ходе обсуждений с клиентом был выбран минималистичный дизайн с использованием геометрических элементов и строгой цветовой схемы.

Брендинг и дизайн

1 этап
Сайт реализован на платформе Tilda, что обеспечивает:

  • Быструю загрузку страниц
  • Адаптивность под все устройства
  • Простоту дальнейшего обновления контента
  • Надежность работы

Разработка

3 этап
На основе предоставленного ТЗ были разработаны два дизайн-макета. После презентации клиент выбрал один из вариантов, который был доработан с учётом пожеланий.

Прототипирование

2 этап

Этапы работ

Сайт успешно запущен в июне 2024 года
Реализованы все заявленные функциональные требования
Разработан адаптивный дизайн для всех типов устройств
Внедрены интерактивные формы обратной связи

Результаты

Команда проекта

Проект-менеджер
координация работ и коммуникация с клиентом
Дизайнер
разработка фирменного стиля и макетов
Верстальщик
реализация на платформе Tilda
Тестировщик
проверка функционала и адаптивности

Команда проекта

Верстальщик
реализация на платформе Tilda
Тестировщик
проверка функционала и адаптивности
Проект-менеджер
координация работ и коммуникация с клиентом
Дизайнер
разработка фирменного стиля и макетов

Сроки реализации

Проект был реализован в сжатые сроки — за 1,5 месяца
Включая все этапы от проектирования до запуска
Эффективная коммуникация
  1. Создание общего чата в Telegram для оперативного решения вопросов
  2. Использование Битрикс24 для внутренней координации команды
Двухуровневое тестирование
  1. Внутреннее тестирование командой разработки
  2. Тестирование на стороне клиента
Оперативные итерации
  1. Быстрое внесение правок по запросу клиента
  2. Гибкий подход к изменениям в процессе разработки

Особенности проекта

Технические детали
  • Платформа разработки: Tilda
  • SSL-сертификация для безопасности
  • Оптимизация загрузки изображений
  • Интеграция форм обратной связи с телеграм-ботом
Все базовые цели достигнуты, команда отлично справилась с поставленными задачами. Особенно хочется отметить оперативность внесения правок и внимание к деталям. Отдельное спасибо за быстрое реагирование на запросы и профессиональный подход к работе. Сайт полностью соответствует нашим ожиданиям.

Отзыв клиента

— Дамир Якупов, представитель компании Data

Заключение

Проект демонстрирует эффективность правильно выстроенных процессов разработки и важность тесного взаимодействия с клиентом. Сайт полностью соответствует современным требованиям к корпоративным решениям и успешно выполняет свою главную задачу — представление компании Data в цифровом пространстве.
Открыть проект
Made on
Tilda