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

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

Задача:

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

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

Техническая реализация
  • Интеграция API Яндекс.Переводчика (https://translate.yandex.ru/developers)
  • Создание механизма динамического перевода контента
  • Добавление интерфейса для переключения языков
Основные функции
  • Кнопка переключения языка в верхнем правом углу с иконкой
  • Автоматический перевод всего текстового контента страницы
  • Сохранение выбранного языка в cookies сайта для последующих посещений
  • Возможность возврата к оригинальному языку
Архитектурные решения
  • Реализация клиентской части на JavaScript с для взаимодействия с API
  • Настройка исключений для элементов, которые не требуют перевода (например, цены, технические характеристики)
Интерфейс
  • Иконка переключения языка с выпадающим меню выбора языка
  • Визуальная индикация текущего языка
  • Адаптивный дизайн кнопки переключения языка для разных устройств
Особенности реализации:
  • Обработка ошибок соединения с API
  • Учет лимитов запросов к API Яндекс.Переводчика
Пользователи получили возможность просмотра сайта на английском языке без необходимости создания отдельной англоязычной версии в CMS Bitrix
Система автоматически переводит контент в режиме реального времени
Улучшена доступность сайта для международной аудитории

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

Результат

Называется он: custom-yandex-translation-widget
Файлы для установки берем отсюда: https://github.com/get-web/yandex-translate-custom-widget 
Технические детали
  • Использование метода translate API Яндекс. Переводчика
  • Обработка специальных символов и форматирования текста
Настройка переводчика
Добавьте файлы в 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>

Задача:

Интеграция вакансий с hh.ru на сайт matsesta.shop
Необходимо было создать раздел «Вакансии» (https://matsesta.shop/vacancy/) на сайте компании, который бы автоматически подгружал актуальные вакансии с платформы HeadHunter, обеспечивая их обновление в режиме реального времени.

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

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

Результат

Отображение ключевой информации о каждой вакансии:
  • Название должности
  • Зарплата
  • Город
  • Активная ссылка в блоке на полную версию вакансии на hh.ru, открывающаяся в отдельном окне
  • Вывод логотипа компании

Задача:

Подключение и настройка модуля Яндекс Pay в CMS Bitrix для сайта matsesta. shop
Подключение и настройка модуля Яндекс Pay в CMS Bitrix для сайта matsesta.shop

Этапы работ

Задачи:
1. Обеспечить возможность оплаты товаров через Яндекс Pay.
2. Интегрировать модуль с существующим магазином.
3. Настроить корректное формирование заказов и статусы после оплаты.
Требования:
  • Сайт работает на Bitrix (версия не ниже 20. x).
  • Установлен и настроен модуль «Интернет-магазин».
  • Имеется доступ к административной панели и правам администратора.
  • Необходим API-ключ от Яндекс Pay.

Анализ требований

1 этап
Проверка наличия необходимых модулей:
Убедились, что установлены следующие модули:
  • sale (Модуль интернет-магазина)
  • currency (Модуль валют)
  • catalog (Модуль каталога)
Регистрация в Яндекс Pay
  • Создаем аккаунт в Яндекс Pay для бизнеса. https://pay.yandex.ru/business 
  • Получаем необходимые данные для подключения:
  • Shop ID
  • Secret Key
  • Public Key
Проверка совместимости
  • Убедились, что версия модуля совместима с нашей версией Bitrix.
  • Также проверьте требования к PHP и MySQL.

Подготовка к интеграции

2 этап
  • Выбрали платежную систему "Яндекс Pay".
Заполните обязательные поля:
  • Shop ID: Уникальный идентификатор магазина, предоставленный Яндексом.
  • Secret Key: Секретный ключ для подписи запросов.
  • Public Key: Открытый ключ для шифрования данных.
  • URL уведомлений: Укажите URL, куда будут отправляться уведомления об оплате (например, `/bitrix/tools/yandex_pay_notify.php`).
Настройка параметров модуля
  • После установки модуля в разделе Настройки → Платежные системы.
Настройка валюты:
  • Убедились, что валюта магазина соответствует валюте, указанной в настройках Яндекс Pay.
Тестирование платежей
  • Далее включили режим тестирования в настройках Яндекс Pay.
Настройка статусов заказов:
  • Определите, какой статус будет присвоен заказу после успешной оплаты (например, «Оплачен»).
  • Настройте автоматическое изменение статуса при получении уведомления об оплате.
  • Создали тестовый заказ и проверьте процесс оплаты.
  • Убедились, что уведомления об оплате корректно доходят до системы.

Настройка модуля Яндекс Pay

3 этап
Настройка шаблонов оформления заказа:
Убедились, что кнопка "Оплатить через Яндекс Pay" отображается на странице оформления заказа.
Обработка callback-запросов:
Создаем скрипт для обработки уведомлений от Яндекс Pay (`/bitrix/tools/yandex_pay_notify.php`).

Техническая реализация

4 этап
Пример кода для проверки подписи:
 <?php
     if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

     $shopId = 'YOUR_SHOP_ID';
     $secretKey = 'YOUR_SECRET_KEY';

     $data = file_get_contents('php://input');
     $json = json_decode($data, true);

     if ($json && isset($json['object']['id'])) {
         $paymentId = $json['object']['id'];
         $status = $json['object']['status'];

         // Проверка подписи
         $signature = hash_hmac('sha256', $paymentId, $secretKey);
         if ($signature === $_SERVER['HTTP_X_YANDEX_CHECKOUT_SIGNATURE']) {
             if ($status === 'succeeded') {
                 // Обновление статуса заказа
                 $order = \Bitrix\Sale\Order::load($paymentId);
                 if ($order) {
                     $order->setField('STATUS_ID', 'N'); // Например, "Оплачен"
                     $order->save()
                 }
             }
         }
     }
Тестирование в продакшене
  • Переключили модуль из тестового режима в рабочий.
  • Провели несколько реальных транзакций для проверки работоспособности.
Анализ результатов:
Проверили журналы платежей в административной панели.
Убедились, что статусы заказов обновляются корректно.
Вывод
В результате выполнения данного кейса сайт matsesta. shop получил возможность принимать платежи через Яндекс Pay. Процесс интеграции включал установку модуля, настройку параметров, тестирование и запуск в продакшен. Теперь клиенты могут легко и безопасно оплачивать товары, а администрация сайта имеет полный контроль над платежами.

Тестирование и запуск

5 этап
Логирование ошибок:
Добавили логирование для отслеживания ошибок и проблем с обработкой платежей.

Задача:

Реализации страницы «Наши мероприятия»
Создание новостного раздела под названием «Наши мероприятия» в CMS Bitrix — это процесс, который включает настройку информационных блоков, создание страницы для отображения новостей и их детальных статей.

Этапы работ

Бэкап сайта
Перед началом работ создайте резервную копию сайта (файлы и базу данных), чтобы избежать потери данных в случае ошибок.
Проверка доступности модуля «Информационные блоки»
  • Убедитесь, что модуль «Информационные блоки» установлен и активен:
  • Войдите в административную панель.
  • Перейдите в раздел: Настройки → Настройки продукта → Модули.
  • Найдите модуль «Информационные блоки» и убедитесь, что он активирован.

Подготовительные работы

1 этап
Переход к настройкам информационных блоков
В административной панели перейдите в раздел:
Контент → Информационные блоки → Типы информационных блоков.
Настройте права доступа:
Разрешите группам пользователей (например, администраторам) добавлять, редактировать и просматривать элементы.
Создание типа информационного блока
1. Нажмите кнопку "Добавить тип".
2. Заполните поля:
  • ID: Например, `events`.
  • Название: Например, "Мероприятия".
  • Сортировка: Оставьте значение по умолчанию.
3. Сохраните изменения.
Создание информационного блока
1. Перейдите в раздел: Контент → Информационные блоки → Информационные блоки.
2. Нажмите кнопку "Добавить информационный блок".
3. Заполните основные параметры:
  • Название: "Наши мероприятия".
  • Тип информационного блока: Выберите созданный ранее тип (`events`).
  • Символьный код: Например, `our_events`.
  • Список элементов на странице: Например, 10.

Создание информационного блока

2 этап
Добавление свойств
1. Перейдите в раздел: Контент → Информационные блоки → Информационные блоки → [Выбрать "Наши мероприятия"] → Свойства.
2. Добавьте свойства, например:
  • Дата проведения мероприятия:
  • Тип: "Дата/время".
  • Код: `EVENT_DATE`.
Место проведения:
  • Тип: "Строка".
  • Код: `LOCATION`.
Описание мероприятия:
  • Тип: "HTML/текст".
  • Код: `DESCRIPTION`.
Фото мероприятия:
  • Тип: "Файл".
  • Код: `PHOTO`.
3. Сохраните каждое свойство.

Настройка свойств информационного блока

3 этап

Создание шаблонов для отображения новостей

4 этап
Создание шаблонов для отображения новостей
Создание страницы списка мероприятий
1. Перейдите в раздел: Контент → Структура сайта.
2. Создайте новую страницу (например, /events/) или выберите существующую.
3. Добавьте компонент "Новости":
  • Нажмите "Добавить компонент".
  • Выберите: `Информационные блоки → Новости`.
  • Настройте параметры компонента:
4. Сохраните изменения
Создание страницы детального просмотра
1. Создайте новую страницу (например, `/events/detail/`) или добавьте её как дочернюю к списку мероприятий.
2. Добавьте компонент «Детальная информация»:
  • Нажмите «Добавить компонент».
  • Выберите: `Информационные блоки → Детальная информация`.
  • Настройте параметры компонента:
- Информационный блок: Выберите «Наши мероприятия».
- Элемент для отображения: Автоматически определяется по ID элемента.
- Шаблон вывода: Выберите стандартный шаблон или создайте новый.
3. Сохраните изменения.

Настройка шаблонов дизайна

5 этап
Настройка шаблонов дизайна
Создание страницы списка мероприятий
1. Перейдите в раздел: Контент → Структура сайта.
2. Создайте новую страницу (например, /events/) или выберите существующую.
3. Добавьте компонент "Новости":
  • Нажмите "Добавить компонент".
  • Выберите: `Информационные блоки → Новости`.
  • Настройте параметры компонента:
4. Сохраните изменения
Пример кода:
 <? foreach ($arResult["ITEMS"] as $arItem): ?>
       <div class="event-item">
           <h2><?= $arItem["NAME"] ?></h2>
           <p>Дата: <?= $arItem["DISPLAY_ACTIVE_FROM"] ?></p>
           <p>Место: <?= $arItem["PROPERTIES"]["LOCATION"]["VALUE"] ?></p>
           <img src="<?= CFile::GetPath($arItem["PROPERTIES"]["PHOTO"]["VALUE"]) ?>" alt="<?= $arItem["NAME"] ?>">
           <a href="<?= $arItem["DETAIL_PAGE_URL"] ?>">Подробнее</a>
       </div>
   <? endforeach; ?>
Изменение шаблона детальной страницы
1. Откройте шаблон компонента "Детальная информация".
2. Отредактируйте HTML-код для отображения:
  • Полного описания мероприятия.
  • Фото.
  • Дополнительных свойств (например, место проведения).
Пример кода:
 <h1><?= $arResult["NAME"] ?></h1>
   <p>Дата: <?= $arResult["DISPLAY_ACTIVE_FROM"] ?></p>
   <p>Место: <?= $arResult["PROPERTIES"]["LOCATION"]["VALUE"] ?></p>
   <img src="<?= CFile::GetPath($arResult["PROPERTIES"]["PHOTO"]["VALUE"]) ?>" alt="<?= $arResult["NAME"] ?>">
   <div><?= $arResult["DETAIL_TEXT"] ?></div>
Создание нового мероприятия
Создание нового мероприятия
1. Перейдите в раздел:
Контент → Информационные блоки → Элементы → [Выбрать "Наши мероприятия"].
2. Нажмите "Добавить элемент".
3. Заполните поля:
  • Название: Например, "Конференция по цифровым технологиям".
  • Дата проведения: Укажите дату.
  • Место проведения: Например, "Москва, Центральный выставочный зал".
  • Описание: Добавьте текстовое описание.
  • Фото: Загрузите изображение.
4. Сохраните элемент.
Создание элемента:
Добавление анонсового изображения:
Добавление детального изображения:
Следуя этой инструкции, вы сможете успешно создать раздел «Наши мероприятия» в CMS Bitrix и настроить его для публикации и отображения новостей.

Добавление мероприятий

6 этап
Made on
Tilda