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

Задача

Книжный магазин на InSales продаёт в том числе издания с возрастной маркировкой 18+. По российскому законодательству о защите детей от вредной информации такой контент нельзя показывать посетителю без ограничений: обложки, аннотации и цены должны быть закрыты до тех пор, пока пользователь не подтвердит совершеннолетие. При этом сам ассортимент остаётся легальным товаром, поэтому полностью прятать его из каталога нельзя — нужен промежуточный барьер, который отделяет «взрослые» позиции от остального ассортимента и фиксирует факт согласия покупателя.

Отдельное условие клиента — не переписывать шаблон карточки товара и не трогать вёрстку темы Revmag. Публичная карточка должна оставаться такой же, как для обычных книг, чтобы не ломать индексацию, микроразметку и уже настроенный дизайн. Значит, защиту нужно навесить поверх готовой темы: приглушить изображения на витрине, показать явное предупреждение о возрасте, заблокировать быструю покупку в один клик и открывать доступ только после осознанного подтверждения. Размытие обложки и модальное окно здесь выполняют роль видимой границы — покупатель понимает, что перед ним контент 18+, и не может случайно добавить его в корзину, минуя проверку.

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

Логика построена вокруг двух текстовых маркеров, которые контент-менеджер вписывает в описание товара. Это удобно для книжного магазина: отдельного поля или свойства заводить не нужно, признак «18+» ставится там же, где редактируется карточка. Скрипт при загрузке страницы находит такие товары, приглушает их изображения, вешает бейдж и перехватывает клики. Вся обработка идёт на стороне браузера, поэтому серверные шаблоны темы остаются нетронутыми.

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

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

Стикер "18+"

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

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

Для книг с маркером #noquickcart кнопка "В корзину" деактивирована прямо в каталоге. Это закрывает обходной путь, когда товар 18+ можно было бы купить в один клик, ни разу не увидев предупреждения. Добавление в корзину возможно только после перехода в карточку товара и подтверждения возраста — так проверка встроена в естественный сценарий покупки, а не обходится.

Модальное окно и хранение согласия

При клике на размытое изображение или на кнопку "В корзину" появляется окно с вопросом: "Вам исполнилось 18 лет?" и кнопками Да/Нет. Это и есть точка, где фиксируется согласие: ответ «Да» открывает контент, ответ «Нет» оставляет обложку закрытой и не пускает товар в корзину.

Текст окна и подписи кнопок настраиваются через виджет, без правки кода. Согласие можно хранить временно — на текущую сессию, — либо постоянно, до 365 дней через localStorage. Во втором случае повторно подтверждать возраст на каждой странице не нужно: браузер помнит выбор покупателя, и витрина открывается сразу, что снимает лишние клики при следующих визитах.

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

Решение реализовано скриптом и стилями, которые подключаются поверх темы. Оно должно переживать динамику витрины InSales: фильтры, сортировки и подгрузку блоков через AJAX перерисовывают часть страницы, а картинки грузятся лениво. Поэтому обработка не одноразовая — она повторно применяется к новым элементам по мере их появления.

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

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

Тема Revmag имеет собственную вёрстку каруселей и карточек, поэтому универсальный скрипт пришлось привязать к её структуре: сопоставить селекторы блоков, учесть, как тема отрисовывает превью и кнопки, и вписать бейджи и маску так, чтобы они ложились поверх дизайна без визуальных сдвигов.

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