Карточки тарифов, слайдер на главной

Карточки тарифов на сайте подбора и сравнения тарифов интернета, ТВ и мобильной связи. Интерактивные AJAX-карточки, блоки с информацией, слайдеры с карточками.

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

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

Анатомия карточки тарифа: Шапка, характеристики и подвал

1. Шапка карточки: Знакомство и быстрые действия

• Название тарифа: Оформлено в виде кликабельной ссылки, ведущей на детальную страницу тарифа с полным описанием.
• Интерактивное сравнение: Кнопка «Сравнить» добавляет тариф в список сопоставления. При клике AJAX-запрос меняет текст на «Добавлено» и обновляет счетчик в шапке сайта. При наведении на активную кнопку открывается меню с возможностью быстро перейти к сравнению или удалить тариф. Если добавлен только один тариф, система подскажет, что для сравнения необходимо выбрать еще хотя бы одно предложение.
• Оценки и отзывы: Рейтинг в виде звезд рассчитывается автоматически на основе среднего балла из комментариев пользователей. Рядом выводится число отзывов. При наведении показывается подсказка «Читать комментарии», а при клике страница плавно прокручивается к блоку отзывов.
• Ярлычок-акция (Badge): Цветная плашка над названием тарифа. Администратор может задавать ее цвет, текст и расширенное описание. Если описание заполнено, плашка становится кликабельной и открывает модальное окно с подробностями акции. Если поле пустое, плашка работает как статичный визуальный маркер.

2. Характеристики тарифа: Три блока услуг в одном интерфейсе

Наполнение карточки динамически подстраивается под состав пакета. Если тариф включает интернет, телевидение и мобильную связь, все три блока будут активны. Если какая-то из услуг отсутствует, соответствующий блок отображается блеклым (неактивным) цветом. Это позволяет пользователю мгновенно оценить состав предложения.

Внутри каждого активного блока выводятся:

• Круговой индикатор: В центре отображается ключевое значение (скорость интернета, количество минут или ГБ). Синяя дуга вокруг индикатора заполняется автоматически, показывая процентное соотношение параметра к максимальному значению среди всех тарифов в базе данных.
• Иконки преимуществ с подсказками: Небольшие значки, сообщающие о дополнительных опциях (подключение без новых проводов, наличие видеонаблюдения, управление эфиром и т.д.). Иконки выводятся на основе галочек в админке и показывают подсказки при наведении курсора.

3. Подвал карточки: Финансовые условия

• Стоимость: Выводится базовая ежемесячная цена. Если действует скидка, старая цена отображается зачеркнутой, а рядом выводится иконка с восклицательным знаком. При наведении на нее появляется автоматическая подсказка с описанием условий: например, размер скидки, промо-цена и продолжительность действия акции.
• Кнопки действий: Кнопка «О тарифе» ведет на детальную страницу. Кнопка «В корзину» добавляет тариф в конфигуратор и мгновенно открывает панель корзины. Если тариф уже добавлен, кнопка выполняет роль быстрого открытия корзины.

Умная синхронизация блоков «Подробнее»

При клике на ссылку «Подробнее» под иконками преимуществ карточка разворачивается, показывая скрытые технические характеристики (тип кабеля, число SIM-карт, условия переноса остатков минут и гигабайт и т.д.).

Синхронное раскрытие в ряду: В каталоге реализована удобная логика — если несколько карточек расположены в один ряд, нажатие кнопки «Подробнее» на одной из них автоматически разворачивает скрытые блоки у соседних карточек в этом же ряду. Это позволяет пользователю сопоставлять детальные параметры соседних тарифов, не раскрывая каждую карточку по отдельности.

Тематические списки каналов в «Подробнее»

Для тарифов с телевидением раскрытие блока «Подробнее» выводит список доступных телеканалов. Для удобства пользователя они структурированы по тематикам (спортивные, детские, познавательные и т.д.). Каждая тематическая группа оформлена в виде раскрывающегося аккордеонного списка с указанием количества каналов. Логотипы каналов подгружаются только в момент открытия блока, что значительно экономит интернет-трафик и ускоряет загрузку страниц каталога.

Главный слайдер тарифов: Интерактивный мини-каталог

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

• AJAX-меню категорий: Панель переключения вкладок («Все категории», «Интернет», «Интернет и ТВ», «Телевидение», «Интернет и Мобильная связь»). Клик по вкладке плавно и без перезагрузки всей страницы обновляет список тарифов в слайдере. На мобильных экранах это меню превращается в горизонтальную ленту, которую можно прокручивать пальцем.
• Сетка тарифов и ссылка на каталог: Ниже выводится карусель карточек и кнопка-ссылка на соответствующий раздел каталога для детального ознакомления.

Управление приоритетами вывода в слайдере

Администратор может самостоятельно определять, какие именно тарифы и в каком порядке попадут в главный слайдер на главной странице. Для этого в админке WordPress предусмотрено специальное числовое поле приоритета. Чем выше введенное число, тем ближе к началу слайдера окажется карточка тарифа. Если приоритет не задан, тариф не попадает в слайдер.

Адаптивность слайдера на мобильных устройствах

На экранах смартфонов карусель автоматически перестраивается. На экране отображается ровно одна карточка, а слайдер поддерживает привычное управление жестами (листание пальцем). Для улучшения пользовательского опыта по бокам экрана аккуратно показываются края соседних карточек, подсказывая посетителю, что слайдер можно прокручивать.

Гибкость администрирования тарифов в WordPress 7

Все элементы карточки тарифа и слайдеров настраиваются через удобную административную панель WordPress 7. Контент-менеджеру не нужно редактировать код или стили. Добавление иконки преимущества, изменение цвета акционной плашки, управление ценами и прикрепление оборудования происходит в визуальном режиме через заполнение простых текстовых полей, выбор параметров из выпадающих списков и расстановку галочек.