Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
MVPoint
Рекламное агентство
+7-999-976-45-70
+7-999-976-45-70
Заказать звонок
E-mail
i@seotima.ru
Адрес
Москва, Черноморский б-р, д. 17к1, помещение 1/2/5, офис 2
Режим работы
Пн. – Пт.: с 10:00 до 18:00
Подать заявку
Услуги
Кейсы
  • Сайты
  • Индивидуальные разработки
  • Контент
  • SEO
Тарифы
  • Решения для товарного бизнеса
    • Для старта
    • Визитка компании
    • Малому бизнесу
    • Среднему бизнесу
    • Для корпораций
  • Брендинг
    • Имя, логотип и домен
  • SEO и тексты
    • Описание для товаров
  • Выход на маркетплейсы
    • Начало продаж на Ozon
    • Начало продаж на Wildberries
    • Начало продаж на ЯндексМаркет
Акции
Блог
Новости
Компания
  • Про студию
  • Партнеры
  • Клиенты
  • Вакансии
  • Реквизиты
  • Команда
Контакты
  • Контактная информация
  • Реквизиты компании
  • Задать вопрос
Информация
  • Вопрос-ответ
  • Оплата
Москва
MVPoint
Услуги
  • Решения для товарного бизнеса
    • Для старта
    • Визитка компании
    • Малому бизнесу
    • Среднему бизнесу
    • Для корпораций
  • Брендинг
    • Имя, логотип и домен
  • SEO и тексты
    • Описание для товаров
  • Выход на маркетплейсы
    • Начало продаж на Ozon
    • Начало продаж на Wildberries
    • Начало продаж на ЯндексМаркет
Кейсы
  • Сайты
  • Индивидуальные разработки
  • Контент
  • SEO
Блог
Жизнь студии
  • Про студию
  • Партнеры
  • Клиенты
  • Вакансии
  • Реквизиты
  • Команда
    Москва
    Подать заявку
    MVPoint
    Услуги
    • Решения для товарного бизнеса
      • Для старта
      • Визитка компании
      • Малому бизнесу
      • Среднему бизнесу
      • Для корпораций
    • Брендинг
      • Имя, логотип и домен
    • SEO и тексты
      • Описание для товаров
    • Выход на маркетплейсы
      • Начало продаж на Ozon
      • Начало продаж на Wildberries
      • Начало продаж на ЯндексМаркет
    Кейсы
    • Сайты
    • Индивидуальные разработки
    • Контент
    • SEO
    Блог
    Жизнь студии
    • Про студию
    • Партнеры
    • Клиенты
    • Вакансии
    • Реквизиты
    • Команда
      Москва
      Подать заявку
      MVPoint
      Телефоны
      +7-999-976-45-70
      Заказать звонок
      MVPoint
      • Услуги
        • Услуги
        • Решения для товарного бизнеса
          • Решения для товарного бизнеса
          • Для старта
          • Визитка компании
          • Малому бизнесу
          • Среднему бизнесу
          • Для корпораций
        • Брендинг
          • Брендинг
          • Имя, логотип и домен
        • SEO и тексты
          • SEO и тексты
          • Описание для товаров
        • Выход на маркетплейсы
          • Выход на маркетплейсы
          • Начало продаж на Ozon
          • Начало продаж на Wildberries
          • Начало продаж на ЯндексМаркет
      • Кейсы
        • Кейсы
        • Сайты
        • Индивидуальные разработки
        • Контент
        • SEO
      • Блог
      • Жизнь студии
        • Жизнь студии
        • Про студию
        • Партнеры
        • Клиенты
        • Вакансии
        • Реквизиты
        • Команда
      Подать заявку
      • Москва
        • Города
        • Москва
      • Кабинет
      • +7-999-976-45-70
        • Телефоны
        • +7-999-976-45-70
        • Заказать звонок
      • Москва, Черноморский б-р, д. 17к1, помещение 1/2/5, офис 2
      • i@seotima.ru
      • Пн. – Пт.: с 10:00 до 18:00

      Ползунок тарифов

      Главная
      —
      Портфолио
      —Ползунок тарифов
      Разработали индивидуальный блок выбора тарифов на html
      Клиент
      MVPoint
      Сайт
      https://mvpoint.ru/
      Заказать проект
      Привет всем! Меня зовут Александр, я отвечаю за техническую часть всех проектов студии. За креатив у нас отвечает Тима, который однажды предложил мне идею сделать оригинальный подбор тарифов на нашем сайте.
      f2d1176a92fd0174574d69d64fe9c478.jpg

      Этот пост про разработку, но я позволю себе небольшое предисловие, без которого он не будет цельным. Так как я рос в 90-ые, то прекрасно помню рекламные креативы тех времён: они были смелые, вызывающие и дерзкие. Таких сейчас не встретишь. Но среди яркой рекламы, были и просто оригинальные, запоминающиеся идеи. Одной из таких, увиденных мной, была обычная рекламная листовка на столбе. Где бригада строителей предлагала «сделать ремонт любой сложности» с условием, что можно выбрать только две опции из трёх, опции были такими:
      • быстро
      • качественно
      • дёшево

      Путём нехитрых вычислений, к потенциальным клиентам данных строителей быстро приходило понимание, что одновременно «быстро, качественно и дёшево» не бывает. Мне тогда эта реклама понравилась, я про неё благополучно забыл и никак не ожидал, что подобная идея всплывёт, спустя несколько десятилетий.

      Итак, подошёл я к реализации идеи Тимы сначала «в лоб» самым простым способом - взять готовую JS-библиотеку и адаптировать её под свои задачи. Однако, одна из популярных библиотек - JqueryUI.slider, имела ряд ограничений, самым важным из которых оказалось отсутствие поддержки некоторыми мобильными устройствами.
      Изобретать велосипед я всё ещё не хотел и следующей на очереди библиотекой была noUIslider. Ирония в том, что библиотека с приставкой noUI в визуальном плане и в поддержке устройств оказалась гораздо лучше первой :)

      Первое, что я сделал, это сверстал макет с 3 ползунками внутри и добавил ниже поля, в которых будет меняться текст, в зависимости от выбранных значений:

      	 <div class="maxwidth-theme"><a name="tariffs"></a>
      	 <h3 class="index-block__title switcher-title">Хорошо, быстро, дёшево, выбери два</h3>
      	 <div class="wrapper">
      	 <div class="slider-text-wrapper">
      	 <div class="slider-text"></div>
      	 <div class="slider-title"><i class="fa big-icon grey s30 fa-check-square"></i>Качество</div>
      	 <div class="slider-text"></div>
      	 </div>
       
      	 <div class="slider-1" id="qual" data-slider></div>
      	 </div>
      	 <div class="wrapper">
      	 <div class="slider-text-wrapper">
      	 <div class="slider-text"></div>
      	 <div class="slider-title"><i class="fa big-icon grey s30 fa-calendar"></i>Срок выполнения (мес.)</div>
      	 <div class="slider-text"></div>
      	 </div>
      <div class="slider-2" id="time" data-slider></div> </div> <div class="wrapper"> <div class="slider-text-wrapper"> <div class="slider-text"></div> <div class="slider-title"><i class="fa big-icon grey s30 fa-rub"></i>Цена в месяц (₽)</div> <div class="slider-text"></div> </div>
      <div class="slider-3" id="price" data-slider></div> </div>
      <div class="col-md-12"> <div class="sum"> <blockquote>Стоимость проекта <div class="month-price" id="tarif"> </div> </blockquote> </div>

      На сайте этот блок выглядит так:


      Сами ползунки находятся внутри блоков с классами slider-1, slider-2 и slider-3, каждому из которых присвоены id: qual, time и price. Сначала на каждой шкале ползунка я разместил минимальные и максимальные значения, но далее от этой идеи пришлось отказаться, так как сроки и цена проектов динамически изменяются в зависимости от выбранного качества.

      Также я добавил иконки и прописал стили для ползунков и текста. Так как скрипт у нас работает внутри Битрикса, то часть стилей (для иконок) удалось заимствовать из темы, остальные я добавил самостоятельно:

       .noUi-horizontal .noUi-handle {
       width: 34px;
       height: 28px;
       right: -17px;
       top: -6px;
       } 
      .noUi-touch-area { height: 100%; margin: 0 auto; }
      .noUi-handle { border: none; border-radius: initial; background: transparent; cursor: grab; box-shadow: none; }
      .list { position: relative; }
      .list::before { content: "Так не бывает!"; position: absolute; left: 0; opacity: 0; visibility: hidden; top: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; background-color: #fff; font-weight: bold; }
      .list.no::before { opacity: 1; visibility: visible; z-index: 99; }

      На странице с тарифами подключаем библиотеку:
      <script src="js/nouislider.min.js"></script>

      Теперь можем перейти к самому скрипту. В первую очередь, выбираем все три ползунка и создаем из них константы, чтобы далее не писать лишний код:
      const qual = document.querySelector('#qual');
      const time = document.querySelector('#time');
      сonst price = document.querySelector('#price');

      Далее создаём все три шкалы и задаём их свойства:
      if(qual && time && price) {
      noUiSlider.create(qual, {
      start: 4,
      behaviour: 'smooth-steps-tap',
      step: 1,
      connect: [true, false],
      range: {
      'min': 1,
      'max': 5
      }
      });
      noUiSlider.create(time, {
      start: 4,
      behaviour: 'smooth-steps-tap',
      step: 1,
      connect: [true, false],
      range: {
      'min': 1,
      'max': 12
      }
      });
      noUiSlider.create(price, {
      start: 1,
      behaviour: 'smooth-steps-tap',
      step: 1,
      connect: [true, false],
      range: {
      'min': 30000,
      'max': 90000
      },
      format: wNumb({
      decimals: 3,
      thousand: '.'
      })
      })

      Теперь началось самое интересное! Мне нужно было понять и прописать зависимости ползунков друг от друга. Признаюсь честно, на подбор правильной логики я потратил несколько дней. Первый вариант заключался в том, что на шкале цен я создал все возможные вариации цен и ползунок должен был перемещаться по ним. Потом я понял, что в разных тарифах цены не делятся на одно число и разбить их ровно по одной шкале не получается.

      Второй вариант логики состоял в том, чтобы изменять шкалу цен динамически, в зависимости от выбранного тарифа. Но теперь загвоздка была в том, что и сроки в тарифах отличаются. Самый простой тариф не имеет смысла растягивать на 3 и более месяцев. В итоге мне пришлось переписать логику изменения цен и сделать новые зависимости шкалы цен и месяцев для каждого из тарифов. Фух, ползунки наконец заработали как надо!

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

      В итоге, казалось бы для простой задачи, суммарно было написано более 1000 строк кода. Изменения затронули файлы JS и CSS в теме Битрикс, была создана включаемая область для блока на главной.
      Снимок экрана 2022-10-17 в 23.03.13.png

      P.S. для разбивки чисел на разряды и улучшения восприятия цен была использована библиотека wNumb:
      <script src="js/wNumb.min.js"></script>

      Назад к списку
      Услуги
      Про студию
      Контакты
      Вакансии
      i@seotima.ru
      © 2023 «Студия Тимы» - Разработки для бизнеса
      Политика конфиденциальности
      Главная Кабинет Услуги Поиск Контакты Сотрудники Партнеры FAQ Проекты Реквизиты Блог