«Добрый» – поддержка и развитие сайта бренда

Добрый — российский бренд безалкогольных напитков. Основан в 1998 году компанией «Мултон».

Посмотреть сайт

Выполнили для клиента

Техподдержка и доработки веб-проектов

Цели и задачи

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

Выполненные задачи

Разработка новых страниц и лендингов

«Польза к вашему ужину» – сложная страница с видео, анимацией шторки, адаптивом под все устройства.
«Лимонады» – реализована анимация волны, кроссбраузерная вёрстка .
«SSD / Газировка» – полноценный лендинг с анимацией при скролле , прелоадером, кастомным слайдером, динамической подгрузкой изображений через Twig.
«Растим добро» – многосекционная страница с блоками историй, новостей, партнёров и адаптивной версткой.
«Детские напитки» – три страницы, внедрение миграций инфоблоков, работа с баннерами.
«Моя семья» – верстка нестандартного баннера из нескольких блоков, правки стилей.
Карточка витамина, страница «Устойчивое развитие», «Помощник Добрый» и другие.

Фронтенд-инфраструктура и сборка

Настройка и поддержка сборки на Gulp / Webpack, решение конфликтов пакетов npm.
Пересборка фронтенда после критических ошибок (несовместимые пакеты, проблемы с node-версиями).
Восстановление работоспособности страниц после сбоев на develop- и production-серверах.
Организация структуры шаблонов Twig, подключение скриптов и стилей.

Работа с API и интеграции

Доработка «Помощника» – интеграция с API food.ru: изучение документации, адаптация под новые версии API, исправление получения рецептов, формирование PDF, добавление UTM-меток.
Настройка отправки данных в Яндекс.Метрику и Google Tag Manager.

Адаптивность и кроссбраузерность

Вёрстка мобильных и планшетных версий всех новых страниц.
Исправление специфических багов (Safari – горизонтальный скролл, отображение волны; проблема с overflow-x:clip у клиента).
Динамическая подстановка знака торговой марки, корректировка шрифтов.

Работа с контентом и SEO

Замена сотен изображений (экспорт из Figma, обработка в Photoshop, оптимизация).
Внедрение SEO-тегов по ТЗ (title, meta-описания на продуктовых карточках и разделах).
Настройка редиректов, исправление 404 ошибок, удаление дублей страниц.

Технологии и инструменты

Backend-платформа: Bitrix (работа с инфоблоками, миграции)
Frontend: HTML5, CSS3/SCSS, JavaScript (ES6), jQuery, Twig
Сборка: Gulp, Webpack, npm
Анимации: ScrollMagic, CSS-анимации, кастомные скрипты
Графика: Figma, Adobe Photoshop
Контроль версий: Git (GitLab)
Аналитика: Google Tag Manager, Яндекс.Метрика
API: интеграция с food.ru

Ключевые достижения и сложности

Устранение критических проблем со сборкой – после сбоя полностью пересобран фронтенд, восстановлена совместимость пакетов, настроен webpack для лендинга «Вода+Сок».
Реализация сложных анимаций – лендинг «Газировка» с появлением элементов при скролле, анимированный баннер, прелоадер.
Кроссбраузерная отладка – побеждён баг с overflow-x:clip, который не работал в браузере заказчика, исправлено отображение в Safari.
Поддержка проекта на протяжении двух лет – несколько десятков задач (от мелких правок до создания полноценных разделов), постоянное общение с клиентом, быстрая реакция на изменения API.
Оптимизация производительности – замена динамической подгрузки картинок (было на JS) на проверку через Twig-функцию, что ускорило рендеринг страниц с продуктами.

Результат

Сайт dobry.ru получил современные промо-страницы, улучшенную мобильную версию, стабильную работу сборки и интеграций. Все доработки успешно приняты заказчиком и находятся в продуктивной эксплуатации.