ДЕМОВЕРСИЯ сервиса подбора и сравнения тарифов
Вы на странице тарифа «Челябинский». Помимо подробной информации о интернете и мобильной связи, здесь реализован удобный блок с итоговой ценой, который помогает сразу видеть стоимость и добавлять тариф в корзину. Расскажем, как он работает.
На больших экранах (ноутбуки, стационарные компьютеры) блок с ценой закреплён справа. При прокрутке страницы он следует за вами — всегда перед глазами. В нём отображается детальная калькуляция:
В отличие от корзины, где каждая услуга и каждый пакет каналов показаны отдельно, здесь все дополнения объединены в категорию «Дополнительно». Так блок остаётся компактным, но информативным. Итоговая сумма, конечно, включает всё.
Фиксация блока не бесконечна: когда вы доходите до раздела «Похожие тарифы, которые могут вас заинтересовать», блок открепляется и уезжает вверх. Это сделано, чтобы он не перекрывал другие важные элементы.
На мобильных устройствах экран узкий, поэтому блок с ценой всегда зафиксирован в нижней части экрана — узкой полоской с итоговой суммой и кнопкой «Положить в корзину». Он не занимает много места и всегда доступен для нажатия. Такое поведение делает оформление заказа удобным и на смартфоне.
Это редактируемое описание интернета в тарифе для Челябинска. Владелец сайта может оформить его как угодно. Вот пример таблицы с характеристиками домашнего интернета (две колонки — хорошо видно на любом экране):
| Параметр | Значение |
|---|---|
| Скорость | 200 Мбит/с |
| Подключение | оптоволокно |
| Устройств одновременно | до 5 |
| Видеонаблюдение | доступно |
Эта таблица не собирается автоматически из полей характеристик — администратор вводит её вручную через визуальный редактор. При необходимости её можно заменить на список или просто текст. Такой подход даёт полную свободу в подаче информации.
Этот блок раскрывается по желанию посетителя. Сейчас мы расскажем, как работает фильтр на странице подбора тарифов, на примере раздела Интернет + Мобильная связь.
Представьте, что вы выбираете скорость интернета. Нажали на 200 Мбит/с. Сайт сразу (без перезагрузки) проверяет, какие ещё параметры доступны. Если окажется, что ни один тариф с такой скоростью не включает больше 1000 минут мобильной связи, то диапазоны «1501–2000 минут» станут бледными и не будут нажиматься. При наведении появится пояснение. Вы просто не сможете выбрать несуществующую комбинацию — и никогда не увидите пустую выдачу.
То же с ценой: два ползунка «от» и «до» не дают выставить бессмысленный диапазон. Система знает минимальную и максимальную цену среди подходящих тарифов и сама ограничит движение ползунка. Вам не нужно следить за цифрами — фильтр всё делает за вас.
Такая разработка особенно важна для сложных услуг, где интернет объединён с мобильной связью. Пользователь быстро находит подходящий вариант, не отвлекаясь на неподходящие опции. В реальном проекте в этом скрытом блоке можно разместить любую информацию: условия акции, частые вопросы, технические детали.
Описание мобильной связи тоже редактируется вручную. Администратор может использовать обычный текст или структурировать информацию списком, как здесь:
Всё содержимое этого блока администратор вводит через визуальный редактор. Никакие данные не подтягиваются автоматически — это свободное поле для любой информации о мобильной части тарифа.
Этот скрытый блок также можно заполнить любым текстом. Сейчас мы объясним, как работает сравнение тарифов, на примере мобильной связи.
Вы можете добавить несколько тарифов в сравнение (кнопка «Сравнить» на карточках). Затем откройте страницу сравнения. Все выбранные тарифы выстроятся рядом, а под ними будут блоки: «Интернет», «Мобильная связь». В блоке «Мобильная связь» наглядно видны минуты, трафик, сим-карты и дополнительные опции каждого тарифа.
Очень удобна кнопка «Показать только различия». Если вы сравниваете похожие тарифы, она скроет одинаковые цифры и оставит только то, чем они отличаются. Например, у одного тарифа 600 минут, у другого 800 — остальное совпадает. Вы сразу увидите разницу, не пролистывая одинаковые строки.
На мобильном телефоне сравнение адаптировано под узкий экран: тарифы показываются по одному, их можно перелистывать. Верхняя панель всегда показывает, какие тарифы участвуют в сравнении. Все данные подтягиваются автоматически — администратору достаточно заполнить характеристики тарифа в панели управления.
Подробнее о сравнении тарифов на отдельной странице Как работает сравнение тарифов
Немного о комментариях. На первый взгляд, комментарии совершенно не защищены, тем ни менее используется незаметная защита от роботов.
Такой инструмент помогает клиентам сервиса подбора тарифов принимать взвешенные решения. В реальном проекте в этом блоке можно разместить, например, ответы на частые вопросы о мобильной связи или условия акции.
Описание редактируемое через панель администратора сервиса
Всего к одной учётной записи бесплатно можно подключить до пяти любых устройств. Просмотр возможен одновременно с нескольких устройств (например, на телевизоре вы сможете смотреть кино, а на устройстве ребенка мультфильмы).
Если вы планируете заказать разработку сервиса подбора тарифов и сравнения интернета, мобильной связи и ТВ, этот пример наглядно показывает, как можно автоматизировать продажи сопутствующих товаров (роутеров и ТВ-приставок) внутри комплексных пакетов услуг.
Вся абонентская техника (роутеры и ТВ-приставки) управляется через отдельный, независимый раздел в админке. Это изолирует карточки товаров от основных пакетов услуг и защищает базу данных от перегрузки. При создании сайта-агрегатора тарифов связи такое архитектурное решение позволяет безболезнечно масштабировать каталог до тысяч позиций без хаоса и путаницы.
Привязать роутер к конкретному пакету услуг можно за пару секунд — достаточно выбрать нужные модели из списка прямо внутри редактора тарифа. Система поддерживает три формата владения (аренду, рассрочку и выкуп) и гибкие временные акции. Менеджер может вручную переопределить цену оборудования для отдельного спецпредложения (например, сделать роутер бесплатным при покупке премиум-пакета), не меняя его стоимость на всём остальном сайте.
Чтобы сайт выглядел аккуратно, для каждого устройства созданы независимые поля под разные зоны интерфейса: для коротких подсказок у иконок, развёрнутого блока «Подробнее» и финального оформления заказа. Скрипт сам выстраивает приоритеты вывода цен (Аренда → Рассрочка → Покупка), соединяет цифры с текстом и автоматически дописывает нужные маркеры в скобках. В каталоге пользователь видит простую лаконичную карточку, а в корзине — полноценный интерактивный калькулятор для онлайн-подбора тарифов интернета и ТВ.
Модуль разработан по стандартам ядра WordPress, поэтому он идеально совместим со всеми популярными инструментами продвижения (Yoast SEO, Rank Math, All in One SEO). Прямо внутри карточки роутера контент-менеджер может настраивать мета-теги, управлять индексацией, прописывать канонические ссылки и автоматически добавлять страницы в карту сайта (sitemap.xml). Это критически важный плюс при разработке сайтов для сравнения цен на услуги связи, который позволяет проекту со старта занимать высокие позиции в поисковой выдаче Яндекса и Google.
Описание редактируемое через панель администратора сервиса
При редактировании доп. услуги в панели администратора, если возможность настроить приоритет её вывода в списке других доп. услуг
В описании доп. услуг можно использовать таблицы
| 1 | Текст |
| 2 | Текст |
| 3 | Текст |
Данный сайт является демонстрационной моделью из портфолио и работает в демо-режиме. Мы не собираем, не храним и никак не обрабатываем персональные данные пользователей.
Чтобы протестировать работу форм обратной связи или обсудить проект, пожалуйста, напишите на voitkov.ne@yandex.ru