Описание работы скрипта для плавающих значков и экрана фильтров

Описание работы скрипта для плавающих значков и экрана фильтров: HTML-структура для плавающих значков: Контейнер для значков: Внутри контейнера #floating-icons размещены три основных элемента: Значок фильтра: Представлен элементом #filter-icon-wrapper с иконкой фильтра (например, изображения "фильтр"). Значок корзины: Кнопка для перехода на страницу корзины с числом товаров, которое динамически обновляется (с помощью класса .cart-count). Плавающая кнопка WhatsApp: Ссылка на чат в WhatsApp с автоматически генерируемым сообщением и соответствующей иконкой. Под иконкой WhatsApp также имеется подпись, которая кликабельна и ведет на тот же URL. Затемненный фон и выезжающий экран фильтров: Затемненный фон (#filter-overlay) используется для визуального эффекта затемнения страницы при отображении экрана фильтров. Клик по этому элементу также закрывает экран фильтров. Экран фильтров (#filter-screen): Выезжает с правой стороны экрана и отображает список доступных фильтров. В данном примере в зависимости от значения переменной $thisPage вызывается блок с фильтрами из другого PHP-файла. Генерация ссылки для WhatsApp: При загрузке страницы в скрипте задается переменная message, содержащая текст сообщения. Это сообщение кодируется с помощью функции encodeURIComponent(), чтобы оно было корректно передано в URL для отправки в WhatsApp. Затем сформированный URL устанавливается как href для кнопки WhatsApp (#whatsapp-float-button) и подписи под ней (#whatsapp-caption-link). Функция toggleFilterScreen() для открытия и закрытия экрана фильтров: При клике на значок фильтрации или затемненный фон экран фильтров может либо выезжать, либо скрываться: Если ширина фильтров равна 0, экран выезжает, изменяя ширину на 50% экрана, а затемненный фон становится видимым. Если фильтр уже открыт, его ширина устанавливается в 0, затемненный фон скрывается. Значок фильтра двигается влево на 50% экрана при открытии фильтра и возвращается обратно при закрытии. Анимация значка фильтра: Скрипт сначала скрывает значок фильтра, используя функцию hideFilterIcon(). При этом добавляется плавная анимация уменьшения масштаба (scale(0.5)) и изменения прозрачности (opacity: 0). Для отображения значка используется функция showFilterIcon(), которая добавляет плавное увеличение и увеличение прозрачности с небольшой задержкой, создавая эффект появления. Эти функции позволяют значку плавно скрываться и отображаться в зависимости от состояния экрана. Использование IntersectionObserver для отслеживания видимости фильтра: IntersectionObserver отслеживает видимость контейнера с фильтром на странице. Когда контейнер фильтра становится видимым, значок фильтра скрывается, а когда фильтр исчезает из зоны видимости, значок вновь отображается. Таким образом, значок фильтра появляется только тогда, когда сам фильтр не виден на экране. Обработчики событий: При загрузке страницы (DOMContentLoaded) начинается наблюдение за контейнером фильтра с помощью IntersectionObserver. Когда пользователь кликает на значок фильтра, срабатывает функция toggleFilterScreen(), открывая или закрывая фильтры и управляя отображением значка. Как это работает: Пользователь видит значок фильтра, который плавает в правом углу экрана. Когда пользователь прокручивает страницу и блок с фильтром становится видимым, значок исчезает. При клике на значок фильтра, с правой стороны экрана появляется экран с доступными фильтрами (например, выбор диаметра шин, марки и т.д.), при этом страница затемняется. Экран можно закрыть, нажав на значок фильтра снова или на затемненный фон. WhatsApp кнопка позволяет пользователю отправить предустановленное сообщение в магазин через чат, кликнув на значок или на подпись под ним. Таким образом, этот скрипт обеспечивает динамическое взаимодействие с пользователем, улучшая удобство работы с фильтрами и добавляя удобную связь через WhatsApp.