[Шапка] – Адаптивность в шапке
Описание
Шапка сайта спроектирована как разделяющая логику рендеринга и структуру интерфейса в зависимости от типа устройства пользователя (DEVICE_TYPE == "D" для десктопов и DEVICE_TYPE == "M" для мобильных платформ). Внутри раздела интегрированы основные навигационные, поисковые и транзакционные компоненты платформы.
Интерфейс обеспечивает:
- AJAX-поиск с подсказками по каталогу товаров.
- Вывод многоуровневых деревьев категорий для основного и мобильного меню.
- Работа малой корзины и AJAX-модалок (PJAX).
Архитектура десктопной и мобильной версий шапки
Для исключения дублирования HTML-кода в DOM-дереве, критически важные блоки разметки разделены условием по константе DEVICE_TYPE.
В десктопной версии инициализируется навигация, поисковая строка и малая корзина. В мобильной версии большинство компонентов скрыто внутрь выезжающего бургер-меню (citfact:sections.tree).
Интеграция PJAX-модальных окон и малой корзины
Внутри шапки запущены сквозные изолированные компоненты для обработки быстрых AJAX-действий. Они не зависят от текущего URL и доступны на любой странице сайта:
- Малая корзина (bitrix:sale.basket.basket.linebitrix:sale.basket.basket.line): Выводит в верхнем углу количество добавленных товаров и общую сумму. Обновляется без перезагрузки страницы при помощи кастомных событий JavaScript после нажатия кнопок «В корзину».
- Инфраструктура модалок (citfact:pjax.modalcitfact:pjax.modal): Служебный компонент, слушающий глобальные дата-атрибуты (например, data-modal). При клике на элементы авторизации, обратного звонка или быстрого просмотра он асинхронно стягивает нужный шаблон, минимизируя стартовый вес страницы.
Как это работает: