Для сайта gigas.su требовалось создать несколько новых страниц с описанием услуг компании. Дизайн был разработан в Figma. Задача осложнялась тем, что:
- требовалась не просто верстка, а полноценные компоненты Битрикс с возможностью управления контентом через админку,
- компоненты должны были легко встраиваться в существующую структуру сайта,
- контент на страницах должен был редактироваться заказчиком без помощи программиста,
- нужно было сохранить единый стиль с остальными разделами сайта.
1. Анализ и декомпозиция
- Спроектировал структуру компонентов так, чтобы каждый блок можно было редактировать независимо.
- Определил, какие данные должны храниться в инфоблоках, а какие — в настройках компонента.
2. Разработка кастомных компонентов
- Для каждой страницы я создал набор компонентов 2.0 (D7):
- Классовая структура (наследование от \CBitrixComponent)
- Методы onPrepareComponentParams, execute() для подготовки данных
- Шаблоны с чистой версткой под макет
- Параметры для настройки через визуальный редактор
- Кеширование результатов для ускорения загрузки
- Для хранения контента создал инфоблоки
Настроил:
- Свойства инфоблоков под задачи
- Шаблоны вывода
- Права доступа (редакторы могут менять контент)
4. Верстка по макетам Figma
- Pixel Perfect соответствие дизайну
- Адаптивная верстка (десктоп, планшет, мобильные)
- Интерактивность на чистом JS (табы в тарифах, аккордеон в FAQ, слайдер в галерее)
- Оптимизация изображений (WebP, lazy loading)
5. Сборка страниц из компонентов
- На основе созданных компонентов "собрал" готовые страницы
6. Настройка управления контентом
- Заказчик может менять тексты, картинки, тарифы, отзывы через стандартный интерфейс Битрикс.
- Для каждого компонента настроены параметры в визуальном редакторе.
- Добавлены ярлыки в публичную часть для быстрого перехода к редактированию (для авторизованных редакторов).
7. SEO-оптимизация
- Для каждой страницы настроены мета-теги (title, description, keywords) через настройки инфоблоков.
- Добавлена микроразметка (Schema.org)
- Сгенерированы ЧПУ-ссылки для страниц.
✅ Создано 12+ новых страниц услуг, полностью соответствующих дизайну
✅ Кастомные компоненты, которые можно переиспользовать на других страницах
✅ Полный контроль контента — заказчик сам редактирует тексты, картинки, тарифы через админку
✅ Единый стиль с остальными разделами сайта
✅ Высокая скорость загрузки благодаря кешированию компонентов
✅ SEO-оптимизация (микроразметка, мета-теги, ЧПУ)
Пожаловаться
