WILO
Группа WILO — ведущий мировой производитель насосного оборудования для бытового, коммунального, промышленного и водохозяйственного применения. Как лидер в области инноваций, WILO устанавливает новые стандарты, предлагая клиентам высокоэффективные, энергосберегающие и адаптированные решения. Компания интегрирует интеллектуальные технологии, объединяя людей, продукты и услуги, и активно внедряет цифровые технологии, подтверждая свой статус инноватора отрасли. Как лидер в области инноваций, WILO устанавливает новые стандарты, предлагая клиентам высокоэффективные, энергосберегающие и адаптированные решения. Компания интегрирует интеллектуальные технологии, объединяя людей, продукты и услуги, и активно внедряет цифровые технологии, подтверждая свой статус инноватора отрасли.
Бизнес-задача и её решение
Цель — создать корпоративный сайт для локализации продаж насосного оборудования немецкого бренда в России.
Почему выбрали CMS Strapi?
Несмотря на наш богатый опыт в интеграции сложных IT-решений, задачи от Wilo стали для нас новым вызовом. В рамках проекта мы не только адаптировали систему под требования клиента, но и подтвердили свою экспертизу в современных CMS и API-интеграциях.
Мы провели детальный анализ доступных решений и выбрали нестандартный подход — решили построить сайт на базе headless CMS, интегрировав внутрь него редактор контента, чтобы обеспечить гибкость управления данными и удобство работы для команды заказчика, сохранив при этом высокую производительность и масштабируемость системы.
В качестве CMS мы выбрали Strapi — платформу, в которой фронтенд и бэкенд функционируют независимо, а взаимодействие с данными осуществляется через API. Это решение подходит для компаний, которым необходимо регулярно обновлять контент — пополнять каталоги, публиковать новости или актуализировать информацию о наличии товаров.
С помощью Strapi разработчики могут назначать коллекции данных, которые будут доступны с помощью API из CMS, а также задавать им конкретную структуру. Strapi автоматически генерирует весь бойлерплейт для совершения CRUD-операций с этими коллекциями данных, а именно:
- создает коллекции в БД;
- формирует REST API (или GraphQL) для этих коллекций;
- позволяет настраивать ограничения на обращение к эндпоинтам;
- дает возможность изменять логику на любом уровне с помощью программирования (кастомизировать или добавлять новые эндпоинты, изменять обращения к базе и т.д.).
После настройки структуры данных разработчиками пользователи CMS (например, контент-менеджеры) смогут заполнять коллекции контентом. Затем эти данные можно будет запросить через API.
Strapi взаимодействует с базой данных и файловой системой, позволяя настраивать маршруты для API. Маршрут связывает запрос клиента и ответ сервера. Например, если ввести в браузере адрес страницы catalog, сервер отдает именно ее.
Главное преимущество Strapi — гибкость и удобство использования. CMS не требует глубоких технических знаний, позволяя легко адаптировать каждую страницу под потребности заказчика. Фронтенд динамически генерирует и отображает контент в нужной структуре и логике. Вся настройка моделей данных выполняется внутри Strapi, что облегчает обновление и адаптацию сайта под бизнес-задачи без сложных доработок.
Кроме того, Strapi поддерживает интеграцию редактора страниц, в котором мы создали шаблоны для различных элементов: текстовые блоки, карточки, изображения, карусели, ссылки и другие компоненты.
Также, по сравнению с Битрикс24 и WordPress, Strapi предлагает высокую степень визуальной кастомизации, что позволило нам разработать дизайн, полностью соответствующий корпоративным стандартам Wilo.
В WordPress, например, используются темы, которые определяют доступные поля на страницах. Чтобы заменить тему, требуется адаптация верстки и корректировка названий функций и полей, что демонстрирует недостаток традиционных CMS — слабое разделение логики взаимодействия с контентом и его отображения.
Единственное ограничение Strapi — невозможность работы на виртуальном хостинге, как у WordPress. Для ее развертывания требуется Node.js-среда и, скорее всего, выделенный сервер.
Реализация
В основу проекта легла современная и гибкая технологическая база, включающая CMS Strapi, фреймворк Next.js на базе React и язык программирования TypeScript. Для реализации также потребовалась произвести интеграцию с внутренней системой заказчика, благодаря которой данные о каталоге товаров — наименования, характеристики, чертежи и артикулы — загружаются в систему автоматически.
Для верстки мы использовали Mantine CSS — решение, предлагающее новый подход к созданию компонентов React в динамичной среде.
Готового дизайна на проекте не было, поэтому нашей задачей было создать визуал полностью подходящий под стандарты Wilo, сохранив при этом все брендовые элементы.
При выборе стека мы сознательно сделали упор на простоту, чтобы в дальнейшем к доработкам можно было легко подключить любого разработчика. Весь контент портала в будущем должен управляться без участия программистов, что потребовало интеграции каждого блока с админкой. Благодаря Strapi это стало возможным без привлечения бэкенд-специалистов.
В нашем случае используется как статичный, так и динамический контент. Например, при добавлении новой статьи администратор создает карточку, заполняет необходимые данные, и они автоматически отображаются на портале. Заявки с обратных форм сайта также регистрируются в Strapi, после чего отправляются на электронную почту администратору.
Итог
Всего за 2 месяца мы разработали сайт с удобным редактором, перенесли каталог продукции и разместили данные на локальных серверах, что увеличило скорость загрузки сайта и каталога на 80%.
Все шаблоны были созданы в фирменном стиле Wilo, с учетом его цветовой палитры и визуальных стандартов. При разработке дизайна и структуры страниц мы самостоятельно отрисовали все визуальные элементы, чтобы сайт полностью соответствовал корпоративным требованиям компании.
В результате заказчик получил не только красивый, современный и быстрый сайт, но и удобный инструмент для работы с контентом, который можно масштабировать и развивать в будущем.