Возрастная защита 18+ для книжного магазина на Revmag

Задача

Ограничить покупку книг 18+ без изменения публичной карточки товара. Покупатель должен подтвердить возраст перед просмотром или покупкой. Защита на уровне каталога и виджетов, но карточка товара доступна после подтверждения.

Как работает защита

Размытие изображений

Книги с маркером #blur18 в описании получают размытые изображения. Эффект применяется в каталоге, каруселях, корзине, на главной странице — везде, кроме страницы самого товара.

Стикер "18+"

Товары с ограничением автоматически получают бейдж «18+». Отображается в каталоге и на странице товара.

Блокировка быстрой покупки

Для книг с маркером #noquickcart кнопка "В корзину" деактивирована в каталоге. Добавление в корзину возможно только после перехода в карточку товара и подтверждения возраста.

Модальное окно

При клике на размытое изображение или кнопку "В корзину" появляется окно: "Вам исполнилось 18 лет?" с кнопками Да/Нет.

Текст окна и кнопок настраивается через виджет. Согласие можно сохранять временно или постоянно (до 365 дней через localStorage).

Как это работает

Покупатель видит размытую обложку книги 18+. Кликает на нее. Появляется окно с вопросом о возрасте. Подтверждает. Изображение разблюрируется, кнопка "В корзину" становится активной.

Технические детали

JavaScript + CSS — без изменения шаблонов темы
Маркеры — #blur18 и #noquickcart в описании товара
Автоматическое применение — при рендере страницы и AJAX-подгрузке
Lazy-load — работа с отложенной загрузкой изображений
Настраиваемое окно — текст, кнопки, срок хранения согласия

Адаптация под тему Revmag

Переопределение классов для каруселей и карточек
Стилизация стикеров и маска кнопок
Работа с особенностями верстки темы

Технологии

InSales Revmag JavaScript CSS localStorage Модальные окна Возрастная защита E-commerce