Как работает сравнение тарифов

Реализация сравнения тарифов в сервисе подбора тарифов интернета, ТВ и мобильной связи. Сравнение по блокам услуг, без обновления страницы, на любом устройстве.

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

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

Технические преимущества и архитектура решения

Модуль сравнения разработан по принципу «максимальная скорость при минимальной нагрузке» и базируется на современных технологиях:

• Интерфейс (Frontend): Полностью реализован на JavaScript с использованием библиотеки jQuery. Технология AJAX позволяет переключать тарифы, фильтровать параметры и выполнять поиск без перезагрузки страницы, обеспечивая плавность и мгновенный отклик.
• Серверная часть (Backend): Работает под управлением связки WordPress 7 и PHP 8.5. Все сравниваемые характеристики структурированы и подтягиваются из базы данных автоматически на основе параметров, заданных администратором в панели управления.

Адаптивность интерфейса: Удобство на любом устройстве

Одной из самых сложных задач при разработке сравнения табличных данных является адаптация под экраны смартфонов. В проекте эта задача решена созданием двух независимых сценариев отображения:

• Десктопная версия (Компьютеры): Одновременно на экране могут сравниваться от 3 до 4 тарифов (на разрешении 1920px выводится 4 колонки). Если пользователь добавил больше предложений, активируется слайдер: по бокам появляются навигационные стрелки, позволяющие плавно прокручивать тарифные планы по горизонтали вместе со всеми характеристиками. При прокрутке страницы вниз мини-карточки тарифов фиксируются вверху экрана, чтобы пользователь всегда видел, какие именно тарифы он сейчас сопоставляет.
• Мобильная версия (Смартфоны): На узких экранах таблица из 4 колонок физически не поместится, поэтому мобильная версия одновременно сравнивает ровно два тарифа. Сверху каждой мини-карточки выводится удобный индексный переключатель (например, «1 из 4», «2 из 4»). Пользователь может стрелками «листать» тарифы в левой или правой колонке независимо друг от друга. При этом система автоматически исключает возможность сравнения тарифа самого с собой. Закрепленные вверху мини-карточки также работают в мобильной версии, позволяя переключать тарифы в процессе скроллинга.

Тематические блоки сравнения тарифов

Характеристики разделены на три независимые вкладки-категории: «Интернет», «Телевидение и Онлайн-ТВ» и «Мобильная связь». Раздел активируется и отображается в таблице только в том случае, если соответствующая услуга присутствует хотя бы в одном из сравниваемых тарифов. Каждый блок можно свернуть кликом по его заголовку.

1. Домашний Интернет

В этом блоке тарифные планы сопоставляются по следующим критериям:

• Скорость входящего интернет-соединения;
• Условия предоставления Wi-Fi роутера (название модели, тип подключения и точная стоимость аренды в месяц);
• Тип используемого для подключения кабеля (например, 8-жильная витая пара);
• Рекомендованное количество одновременно подключаемых устройств.

2. Телевидение и Онлайн-ТВ

Сравнение каналов реализовано по уникальной методике, которая значительно упрощает анализ контента:

• Интерактивный поиск: Специальная строка поиска на чистом JavaScript позволяет мгновенно отфильтровать каналы по названию. Если по вашему запросу каналы в конкретной тематике отсутствуют, вся эта тематическая строка автоматически скрывается с экрана.
• Группировка по тематикам: Каналы делятся по жанрам (например, «Информационные», «Детские», «Спортивные»). Рядом с названием группы выводится общее число каналов. Если в одном из тарифов этой тематики нет, на его месте отображается пустой белый прямоугольник с пометкой «0 каналов».
• Поканальное сопоставление: Если тематика есть в обоих тарифах, они сравниваются по каждому каналу индивидуально. Если конкретный телеканал присутствует в пакете первого провайдера, но отсутствует у второго, во второй колонке логотип этого канала становится полупрозрачным (на 70%), а его название выводится блеклым шрифтом.
• Онлайн-кинотеатр: Отдельно сопоставляются параметры интернет-телевидения — общее число онлайн-каналов, объем библиотеки доступных фильмов и сериалов, а также лимит на количество одновременно подключенных экранов (мультирум).

3. Мобильная связь

Пакетные и конвергентные предложения сопоставляются по полному спектру технических и коммерческих характеристик сотовой связи:

• Количество минут, объем мобильного интернета (в ГБ или безлимит) и пакет СМС;
• Количество SIM-карт, предоставляемых в комплекте к тарифу;
• Условия раздачи мобильного интернета с телефона (режим модема);
• Возможность сохранения своего мобильного номера (переход по MNP);
• Условия переноса неизрасходованных пакетов минут и гигабайт на следующий расчетный период;
• Тарификация интернета на популярные социальные сети и мессенджеры (расходуется ли основной пакет);
• Имя сотового оператора связи;
• Наличие бесплатных и безлимитных звонков внутри сети по всей России;
• Условия совершения звонков на номера других операторов в соседние регионы и во время поездок по стране.

Умное управление: Различия и очистка

Для экономии времени пользователя на странице сравнения предусмотрены две важные функции:

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

Все параметры, участвующие в сравнении, настраиваются администратором через удобный и интуитивно понятный интерфейс редактирования тарифов в панели управления WordPress, а изменения мгновенно отражаются на сайте.