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

Описание

В этом видео мы рассмотрим, как устроены карточки тарифов и страницы тарифов в сервис подбора и сравнения тарифов "Интернет".

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

00:00 Обзор карточек тарифов и категорий услуг.
00:53 Отображение информации на карточке: индикаторы, иконки, акции.
02:23 Страница тарифа: подробное описание и список ТВ-каналов.
03:08 Настройка опций тарифа, навигация и фиксированный блок цены.
03:39 Выбор оборудования (роутеры, ТВ-приставки) и вариантов приобретения.
04:50 Дополнительные услуги и отзывы о тарифе.
05:28 Блок похожих тарифов.
05:52 Адаптивность и поведение страницы на мобильных устройствах.


Где посмотреть вживую
Каталог с карточками:
— Интернет: https://internet.argon-studio.ru/uslugi/internet/
— Интернет + ТВ: https://internet.argon-studio.ru/uslugi/internet-tv/
— Интернет + Моб. связь: https://internet.argon-studio.ru/uslugi/all-together/

Пример страницы тарифа: https://internet.argon-studio.ru/tariffs/cheliabenskii/

Детальное описание карточек: https://internet.argon-studio.ru/about/interface/tariffs-cards/

Другие видео с описанием функционала:

Функционал сравнения тарифов интернета, ТВ и мобильной связи
https://rutube.ru/video/e338868ba4d3d7a4522de04307ddef65/

Адаптивный AJAX фильтр на странице подбора тарифов интернета, ТВ и мобильной связи
https://rutube.ru/video/bb6fb10bb98255f3e83bae42a561b86b/

Демонстрация AJAX-корзины на сайте подбора тарифов
https://rutube.ru/video/29351d8844a22fe3607b9decf5249ef4/

Панель управления, Wordpress, для сервиса подбора и сравнения тарифов интернета, ТВ и мобил. связи
https://rutube.ru/video/d53b179f2a20d711552ed9741f144bc6/

Full-stack разработчик и менеджер проекта Иван Войтков.

Если вам нужен аналогичный инструмент сравнения или сайт подбора тарифов под ключ, свяжитесь со мной: voit.ne@gmail.com

Портфолио: https://argon-studio.ru/

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

Шапка: название (ссылка на страницу тарифа), кнопка «Сравнить», рейтинг в виде звёзд с числом отзывов и ярлычок акции.

Характеристики: для интернета, ТВ и мобильной связи выводятся круглые индикаторы с ключевым значением (скорость, минуты, каналы). Синяя дуга вокруг показывает, насколько параметр близок к максимуму среди всех тарифов. Рядом — иконки преимуществ (видеонаблюдение, подключение без проводов, управление эфиром) с подсказками при наведении.

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

Подвал: цена, старая цена (перечёркнута, если действует акция), иконка с подсказкой об условиях скидки. Кнопка «О тарифе» ведёт на страницу, «В корзину» — добавляет тариф и сразу открывает корзину.

Страница тарифа: вся информация и настройка перед заказом
Переход на страницу тарифа открывает полное описание и инструменты для персонализации.

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

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

Выбор оборудования: роутер или ТВ-приставка с переключением между арендой, рассрочкой и покупкой. Цена сразу пересчитывается.

Дополнительные услуги и пакеты каналов подключаются здесь же, с описанием и стоимостью.

Модальное окно каналов (для ТВ-тарифов): открывается поверх страницы, содержит поиск по названию и список тематик. Слева — тематики, справа — каналы выбранной тематики с логотипами. Всё работает без перезагрузки.

Отзывы и комментарии: звёздочки, средний рейтинг, форма добавления отзыва без регистрации.

Слайдер похожих тарифов (если не помещается по ширине) и кнопка «Сравнить» в верхней части страницы работают так же, как на карточках.

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

#php #javascript #ajax #webdevelopment #webdesign #вебдизайн #телеком #программирование