Мы уже привыкли к виджетам на сайтах. Выпрыгиваюшие онлайн-консультанты и кнопки обратного звонка. Предлагаю к ознакомлению еще один интересный способ собирать заявки на сайте — онлайн-калькуляторы. Конечно, можно заказать разработку собственного калькулятора, но есть сервисы, предоставляющие готовые решения. Это отличный способ быстро внедрить и протестировать новый инструмент на сайте.
Где применить онлайн-калькулятор?
В некоторых отраслях калькуляторы на сайтах начали применяться задолго до моды на «виджетизацию». Например, в строительных услугах и продаже строй-материалов:
- Калькуляторы стоимости ремонта квартиры
- Калькулятор строительства загородного дома
- Калькулятор расчета утеплителя
- Различные расчеты пластиковых окон
Другие сферы, где очень часто можно встретить онлайн-расчеты: кредиты, страховка, продажа автомобилей, продажа билетов и туров, службы такси и грузоперевозок, клининг и так далее. Калькулятор можно внедрить практически в любую сферу бизнеса. Это добавит сайту интерактива и поможет собирать больше заявок.
Moclients.com
Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.
Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.
Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.
Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.
Сайт предоставляет 5 различных способов оплаты, техническая поддержка быстро консультирует через чат или почту. Я сам пользуюсь этим виджетом несколько месяцев и мой отзыв: стоит попробовать. Встречались ошибки в программной/фронт-енд части, но их довольно быстро устраняли. Интерфейс админ-панели можно назвать «сыроватым».
uCalc.pro
Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.
- Настоящий калькулятор. В админ-панели настраиваются формулы, клиент получает реальный расчет на сайте.
- Есть возможность редактировать код калькулятора.
- Интеграции. Есть модули для всех популярных CMS-систем. Можно передавать события в Яндекс Метрику и Google Analytics + данные из этих систем аналитики передаются в красивые дашборды на сервисе.
- Есть шаблоны калькуляторов для различных отраслей бизнеса: такси, ОСАГО, доставка пиццы, уборка помещений, праздники.
- На мой взгляд, лучший дизайн из всех сервисов в этой статье. Это касается и интерфейса админ-панели и виджетов.
- SMS/E-mail уведомления о новых заявках из калькулятора.
Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.
В платном тарифе стоимость составляет $5 в месяц на один сайт. Интересно, что если вы готовы сразу заплатить $150, то эта сумма зачтётся за 5 лет, таким образом получается уже $2,5 в месяц. 7 дней дается на тестирование платной версии.
Calccreator.com
Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.
Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.
Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.
BitCalc
Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.
Дизайна как такового нет. Но наиболее удобным признаётся выбор любого калькулятора прямо из имеющегося набора шаблонов, пока без привязки к конкретному сайту. Пользователь просто выбирает шаблон, указывает его параметры и «опускает в корзину». Таким образом, появляется возможность собрать целый пакет, который можно будет потом распределить по сайтам.
Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.
Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.
Web-forms.ru
Сервис от создателей CMS Webasyst. Данный конструктор ориентируется на реализацию форм любого назначения. Можно строить формы заказов, опросов, обратной связи.
В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.
gruzdevv.ru
Настройка полей калькулятора
После активации данного плагина у вас в левом меню появится пункт «WPCC»,
На странице плагина мы видим сообщение, о том что у нас не создано ни одного калькулятора.
Нажимаем на кнопку «Установить калькулятор», плагин создает новую таблицу в базе данных, затем нужно нажать на кнопку «Новый калькулятор»
Вводим название калькулятора и нажимаем кнопку «Добавить».
Далее нажимаем на ссылку «Перейти к настройкам»
Вся панель настроек разбита на 4 вкладки, это:
- 1.Конструктор
- 2.Экспорт формулы
- 3.Импорт формулы
- 4.Настройки
Если вы в первый раз работаете с данным калькулятором, то вкладки экспорт формулы и импорт формулы вам пока что не понадобятся.
Мы будем использовать вкладку «Конструктор», для создания нашего калькулятора, и вкладку «Настройки» для задания необходимых параметров.
Итак, рассмотрим вкладку «Конструктор».
В самом верху мы видим название калькулятора, которое можно изменить.
После названия идет раскрывающийся список из которого мы будем выбирать типы полей, которые нам будут нужны для нашего калькулятора. Если мы раскроем этот список, то увидим, что здесь достаточно большой выбор различных типов полей, но в большинстве случаев, нам понадобится всего несколько из этих полей.
Для примера мы создадим калькулятор для расчета стоимости покупки ноутбука, и будем выполнять расчет конечной стоимости в зависимости от выбранных параметров.
Прежде всего, мы зададим базовую стоимость для нашего ноутбука, и затем, в зависимости от того, какие параметры будет выбирать пользователь, эта стоимость будет увеличиваться.
Добавление поля Input hidden
Добавляем скрытое поле. Выбираем, в разворачивающемся списке, тип поля «Input hidden», и нажимаем кнопку «Добавить».
Далее, в разделе «Добавленные поля» у нас появляется выбранное поле. Для того, чтобы задать для него какие-то настройки необходимо нажать на значек +
Здесь мы можем:
- 1.Ввести заголовок.
- 2.Выбрать цвет для формы.
- 3.Так как данное поле у нас будет самым первым в форме, то в графе «Знак до» мы ничего не ставим.
- 4.«Знак после» — тоже, пока что не указываем.
- 5.Далее, указываем базовую стоимость в поле «Цена».
- 6.В поле «Данные», оставляем как есть, «Полученные данные».
- 7.Далее, можно задать возможность учитывать это поле в расчетах или не учитывать. В нашем случае, мы его будем учитывать.
После задания параметров нажимаем на кнопку «Сохранить параметры полей».
Итак, теперь у нас есть базовая стоимость ноутбука и нам нужно задавать для него определенные параметры.
Использование поля Select
Первый параметр, который мы зададим — объем жесткого диска. Для объема жесткого диска мы будем использовать тип поля «Select», т. е. это будет раскрывающийся список.
Выбираем тип поля «Select», нажимаем «Добавить». Для того, чтобы задать его настройки:
- 1.Нажимаем на значек +
- 2.Далее, вводим заголовок.
- 3.В поле «Знак до» ставим +, т. е. у нас значение этого поля будет складываться со значением предыдущего поля.
- 4.«Знак после» — пока что не трогаем.
- 5.После чего добавляем список значений, который будет у нас высвечиваться в раскрывающемся списке.
- 6.Первый вариант для выбора, который я добавлю, будет объем жесткого диска 500 Гб. В поле текст, пишу 500Гб
- 7.В поле значение мне нужно задать стоимость данного жесткого диска, которое будет прибавляться к базовой стоимость ноутбука. К примеру, у меня здесь будет 1000.
- 8.Для того чтобы добавить новый вариант, я нажимаю на ссылку «Добавить строку».
- 9.Следующий вариант — 1 TB. Его стоимость будет равна, к примеру, 1500. И дальше, аналогично, добавляем 2TB, 4TB и т. д.
- 10.В поле данные у нас так и должно оставаться «Полученные данные».
- 11.В «Поле участвует при расчетах», оставляем «Да».
- 12.«Визуально скрыть поле» оставляем «Нет».
- 13.После того как мы задали все настройки — нажимаем «Сохранить параметры полей».
Поле Radio
Следующее поле, которое нам понадобится — поле для выбора цвета ноутбука. Для этого параметра мы воспользуемся типом поля «Radio».
- 1.Выбираем этот тип и нажимаем на кнопку «Добавить». А затем нажимаем на знак + и задаём настройки.
- 2.Указываем заголовок
- 3.«Знака до» — ставим +
- 4.«Знак после» — оставляем пустым
- 5.А дальше, нам нужно точно так же задать список значений
- 6.Так же здесь можно выбрать изображение для каждого варианта, для этого просто щелкаем по полю со ссылкой и открывается библиотека медиафайлов, через которую мы можем выполнить загрузку изображения.
- 7.Для добавления вариантов аналогично, нажимаем на ссылку «Добавить строку».
- 8.Значение поля «Данные» остается по умолчанию.
- 9.«Поле участвует при расчетах» — также, остается по умолчанию.
- 10.Нажимаю на кнопку «Сохранить параметры полей».
Добавление поля Slider
Следующий параметр, по которому будет выполняться расчет — это объем оперативной памяти.
Добавим еще одно поле, на этот раз это будет поле «Slider».
- 1.Выбираем тип поля и нажимаем «Добавить». Slider представляет собой ползунок, двигая который у нас будет изменяться числовое значение.
- 2.Нажимаем на значок + для настройки параметров.
- 3.Задаем заголовок.
- 4.«Знак до» — ставим +.
- 5.«Минимальное значение» — 2.
- 6.«Максимальное значение» — 12.
- 7.«Шаг» будет равняться 2, т. е. у меня будет объём 2 Gb, 4 Gb, 6Gb и т. д. до 12Gb.
- 8.Далее, нужно выбрать положение, горизонтальное либо вертикальное.
- 9.После чего, необходимо указать значение по умолчанию. Так как у нас здесь идет минимальное значения 2Гб, мы задаем значение 2. Если у вас нет какого-то значения по умолчанию то вы здесь должны поставить 0.
- 10.Поля «Данные», «Поле участвует при расчетах» и «Визуально скрыть поле» оставляем по умолчанию.
- 11.Нажимаем «Сохранить параметры полей».
Для расчёта стоимости оперативной памяти и дальше выбранное значение будет умножаться на стоимость 1Гб оперативной памяти.
Добавляем еще одно поле «Input hidden»:
- 1.Выбираем тип поля, нажимаем «Добавить».
- 2.Вписываем заголовок «Цена за 1 Гб».
- 2.«Знак до» будет стоять *.
- 2.«Знак после» — не ставим.
- 2.«Цена» — 250 рулей, к примеру.
- 2.Нажимаем «Сохранить параметры полей».
Добавление поля Checkbox
Теперь к нашему ноутбуку мы еще добавим поле, которое называется «Checkbox».
- 1.Выбираем этот тип поля и нажимаем на кнопку «Добавить», далее нажимаем на +, чтобы задать нужные параметры. В поле checkbox мы дадим возможность выбирать дополнительные аксесуары для ноутбука.
- 2.«Знак до» — ставим +.
- 3.«Знак после» — ничего не ставим.
- 4.Далее, задаем список вариантов. Здесь так же можно добавлять изображение при необходимости.
- 5.Далее, «Значение по умолчанию», ставим 0. Как видите, настройки этого поля очень похожи на настройки поля «Radio», но в отличии от этого типа полей, здесь есть еще такое поле, как «Действие с данными».
- 6.Все остальные поля остаются по умолчанию.
- 7.Нажимаем на кнопку «Сохранить параметры полей».
Поле Input text
Данные, вводимые в это поле будут просто прибавляться к общей сумме.
И еще одно поле, которое я вам покажу — называется «Input text».
- 1.Добавляем этот тип поля и нажимаем +.
- 2.Указываем заголовок.
- 3.«Знак до» — ставим +.
- 4.«Цена» — к примеру, 200 рублей.
- 5.«Действия с данными» — +.
- 6.«Значение по умолчанию» — 0.
- 7.Так же, здесь можно задать «Placeholder». Это, текст, который будет высвечиваться в случае, если поле не заполнено.
- 8.Также здесь можно задать максимальное количество символов вводимых в поле, если нужно.
- 9.Далее, в поле «Валидация» можно выбрать тип проверки, т. е. в поле можно будет вписывать к примеру, только цифры, либо любые символы.
- 10.Последние три поля оставляем по умолчанию.
- 11.Нажимаем на кнопку «Сохранить параметры полей».
Теперь, если спустится вниз страницы, то мы сможем увидеть на предпросмотре как будет выглядеть наш калькулятор.
В верху у нас отображается текстовая формула, которая показывает, что происходит с нашими полями. Цифрами 1,2, 3 и т.д. обозначаются идентификаторы добавленных нами полей.
Вставка калькулятора на страницу
Для того чтобы это сделать нам нужно:
- 1.Возвращаемся в самый верх страницы и копируем шорткод.
- 2.Создаем новую страницу с названием «Калькулятор».
- 2.Вставляем шорткод калькулятора во вкладку «Текст».
- 2.Нажимаем на кнопку «Опубликовать».
- 2.Переходим на страницу и смотрим как выглядит наш калькулятор.
Мне не очень понравилось что поля растягивает на всю ширину и картинки с выбором цветов размещены одна под другой, поэтому я добавила в самом конце файла стилей своей темы следующий код:
После сохранения изменений и обновления страницы, мой калькулятор приобрёл следующий вид:
Также в этом калькуляторе есть много других полей, но для большинства проектов будет вполне достаточно и тех, которые мы рассмотрели в данной статье.
Видеоинструкция
Я также подготовила для Вас подробную инструкцию по созданию данного калькулятора.
Помимо вычислений этот калькулятор также умеет отправлять полученные данные на e-mail, причём не только администратору, а и пользователю.
Более подробно о том, как настроить эту возможность я расскажу в одной из следующих статей.
Подписывайтесь на обновления, чтобы ничего не пропустить.
Если статья была для вас полезной, то не забудьте поделиться ею в соцсетях. Также буду благодарна вам за ваши комментарии 🙂
С уважением Юлия Гусарь
impuls-web.ru
rasschitai.ru
Для чего нужен калькулятор на сайте?
Калькуляторы чаще используются коммерческими сайтами, которые предоставляют товары или услуги. В зависимости от направления деятельности будет отличаться и функционал калькулятора для сайта, его свойства, количество полей и прочее. Информационные сайты и блоги также могут быть оснащены полезными для посетителей виджетами для расчетов, тем самым увеличивая время пребывания на ресурсе, улучшая поведенческие факторы.
В основе каждого из калькуляторов лежат формулы расчета, определенные функции и алгоритмы, по которым происходит выполнение операции.
Так, к примеру, для просчета среднего расхода топлива автомобиля, нужно указать количество пройденных машиной километров и потраченного на этот путь бензина. Предположим, мы проехали 3000 км и при этом сожгли 250 литров бензина. Для просчета среднего расхода топлива на 100 км нам нужно составить следующую пропорцию.
250/3000=x/100, где x – искомый нами средний расход в литрах
Итак, x = 250*100/3000 = 8,3 л
Т.е. в основе вычисления X будет лежать следующая формула:
X = Расход топлива за путь * 100 / Километраж
Это один из самых простых примеров вычислений, но именно подобные формулы берутся за основу при создании калькулятора для сайта на WordPress, или других платформ.
Попробуем разделить наиболее популярные калькуляторы по направлениям деятельности:
- денежные — конвертеры валют, расчет динамика курса валют, банковских процентов, времени погашения кредита, начислений депозита, налогов и т.д.;
- здоровье – расчет веса, калорий, физических нагрузок, количества выпитой воды и прочее;
- строительные – расчет количества необходимых материалов для тех или иных работ;
- калькуляторы времени – количество дней до лета или до Нового года, количество дней между датами и т.п.;
- математические – для вычисления различных величин (объем, периметр, степень, расстояние и прочее);
- кулинарные – для просчета количества ингредиентов в рецепте.
Кроме перечисленных видов калькуляторов есть также специализированные для отдельных сфер и отраслей, направлений бизнеса. И если для более популярных расчетов можно найти уже готовые решения, для специфических типов калькуляторов необходимо прописывать функционал индивидуально.
Плагины WordPress для создания калькулятора для сайта
Вордпресс-плагины для установки калькуляторов также распределены по направлениям. К примеру, среди денежных можно выделить: Loan calculator Pro (ипотека), FC's Auto Loan Calculator (автокредит), Debt Reduction Calculator (депозит), CC Savings Calculator (калькулятор сбережений), Responsive Mortgage Calculator (адаптивный кредитный кальулятор). А вот несколько устаревшие калькуляторы здоровья: BMI BMR Calculator (калькулятор веса), Fitness Tracker (расчет нагрузок, калорий).
Но на сегодняшний день существуют универсальные плагины WordPress для создания калькуляторов. Они позволяют самостоятельно формировать нужный тип и внешний вид данного элемента на сайте.
Один из них мы уже рассматривали раннее – плагин WP Creator Calculator. Однако последнее его обновление было три года назад.
Следующий плагин имеет свежие обновления — WpCalc. Он позволяет совершать расчеты с любым количеством вводных. Здесь есть масса функций, с помощью которых можно создать калькулятор для большого количества потребностей. На официальном сайте создателей WpCalc есть множество готовых примеров: от конвертеров валют до преобразования Атомов в Моли. Однако, чтобы скачать готовое решение потребуется зарегистрироваться, а регистрация стоит 10 долларов. Без оплаты придется сделать свой калькулятор на WordPress-сайт самостоятельно. Скачать сам плагин можно бесплатно. Вот пример одного из калькуляторов сделанных с помощью WpCalc:
Еще один бесплатный плагин калькулятора для WordPress — Calculated Fields Form. Кроме всего прочего, он позволяет работать с вводными в виде дат. Это в свою очередь дает возможность просчитывать операции, где фигурируют сроки, привязка ко времени, месяцу, году и т.д.
Inquiry Calc – калькулятор, который подойдет для установки на Landing Page. Он позволяет посетителю выбирать опции пошагово, а после – выдавать результат просчета. После получения стоимости, пользователь может отправить запрос на обработку админу сайта.
Еще один простой бесплатный плагин — Offer Calc. Он позволяет вычислять стоимость услуг или товаров, учитывая прайсовую цену и заданное количество. Удобен для использования в качестве корзины на сайте.
Кроме приведенных выше бесплатных плагинов, есть также платные варианты с расширенными функциями: Cost Calculator, ez Form Calculator. Их стоимость колеблется в районе 20 долларов. Часто они используются с Woocommerce темами.
Конструкторы для сборки калькулятора
Кроме подготовленных для WordPress плагинов, есть также онлайн-конструкторы, которые помогают создать калькулятор для сайта или блога. Рассмотрим принцип их работы на примере двух популярных ресурсов: UCalc и CalcCreator.
UCalc
Это сервис для создания калькуляторов для сайтов на любых платформах, в том числе на CMS WordPress.
Кроме того, с помощью UCalc можно делать калькуляторы и для социальных сетей.
Для размещения созданного виджета вам потребуется внедрить, выданный системой код. Но для начала необходимо пройти регистрацию. Есть два вариант работы с сервисом: платный и бесплатный. Разница между ними представлена на скриншоте ниже:
Попробуем создать простой бесплатный калькулятор для своего блога на Вордпресс с помощью UCalc.
Проходим регистрацию. Для этого нужно ввести Имя, Email и пароль. В следующем окне нам предложат выбрать между двумя опциями: Использовать шаблон или Собрать самостоятельно. Мы выберем готовый шаблон.
Здесь можно выбрать варианты в разных категориях, но количество готовых калькуляторов небольшое.
Из раздела «Экономика и финансы» кликаем на расчет CTR.
Здесь можно внести изменения во внешний вид, добавить дополнительные элементы из левой колонки путем перетаскивания объектов (список, ползунок, флажок и т.д.).
Чтобы изменить формулу расчета, нужно кликнуть на значок «Формула» в левом верхнем углу. Перейти от «Дизайна» к «Формуле».
После внесения правок, нажимаем «Предпросмотр» и если все устраивает «Сохранить».
Далее созданный нами калькулятор появится в разделе «Мои проекты». Кликаем на значок с тремя точками и выбираем «Получить код». Перед нами появится код для внедрения на сайт.
Для того, чтобы вставить код на своем WordPress-блоге, вам потребуется установить плагин от uCalc:
После установки и активации плагина, необходимо его привязать к предварительно созданному вами аккаунту в системе uCalc. Если установка и активация прошла успешно, то в визуальном редакторе появится вот такая кнопка:
Нажимая на нее, вы сможете выбрать созданный вами ранее в сервисе калькулятор и вставить его на страницу блога.
Если вы создаете калькулятор в сервисе самостоятельно, без использования шаблонов, можно посмотреть подсказки по построению формул, свойствам виджетов и прочим функциям uCalc в разделе «База знаний». Там же вы найдете инструкции по добавлению калькулятора на сайты на других CMS, типа Joomla, Drupal и т.д.
Также в сервисе можно заказать создание готового индивидуального калькулятора для ваших целей.
pro-wordpress.ru
Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.
Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет. Вот и возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.
В процессе работы над проектом нам удалось реализовать несколько находок в логике работы и дизайне калькулятора. Ими, а также полезными инструментами, и хотим поделиться с сообществом.
По сути, у нас получился довольно универсальный онлайн-конструктор калькуляторов, результат работы в котором можно встроить на любую платформу, поддерживающую вставку HTML.
Как устроен конструктор калькуляторов
Пишем свою адаптивность
Лайфхак: как упростить формулы до азбуки
Чистим код с GULP (а не тем, о чем вы могли подумать)
Есть ли жизнь после жизни?
Начиная проект, мы обсуждали довольно хардкорные идеи, но в итоге пришли к drag-n-drop интерфейсу сборки, плюс админке, в которой человек может хранить и настраивать свои калькуляторы.
В начале было пустое поле. Регистрируясь на сервисе впервые, человек действительно видит пустую страницу с единственной кнопкой добавления нового проекта-калькулятора.
В будущем на этой странице будут появляться снимки-ссылки на калькуляторы пользователя, вот как тут:
Для создания скриншота-превью калькулятора в кабинете мы использовали PhantomJS. Штука очень удобная, когда ты уже создал несколько калькуляторов, — при входе в кабинет сразу понятно, где какой из проектов.
Люди любят ползунок. Это стало понятно, когда мы запустили первых людей на сервис, и они стали выбирать, из каких элементов создать виджет.
Сам интерфейс создания калькулятора устроен похоже с ЛК — есть большое пустое поле, на которое можно добавлять элементы из боковой панели. Для старта мы выбрали 8 элементов. Пять отвечают непосредственно за калькулятор — это ползунок, выпадающий список, галочка, текстовое поле (для сбора почт, адресов и т.д.) и переключатель. Еще три — за привлекательность (картинка) и опцию заказа — текстовый блок и кнопка. Самым востребованным элементом из всех оказался ползунок.
Сначала для создания ползунка мы выбрали расширения jQuery Scrollbar, но штука странно себя вела на мобильных. Поэтому мы взяли и модифицировали расширение JQuery-Range-Slider. Остальные элементы написали и стилизовали сами
Манипуляции с элементами и данными калькуляторов производятся на клиентской части проекта — поэтому в процессе важно было придумать, как максимально экономить ресурсы браузера.
Этот момент стал одним из самых хлопотных при отладке. Но зато сейчас запись процессов, происходящих на странице, когда человек перетаскивает элемент в калькулятор (это самый ресурсозатратный момент), выглядит так:
Мы максимально порезали обработчики, оставив только необходимый минимум. С оптимизацией на клиентской части нам здорово помог инструмент Timeline из Google Chrome Developer Tools.
Исходно все элементы хранятся в объекте FIELDS — у каждого есть типовой HTML-шаблон и список опций. После перетаскивания элемента в рабочую область, нужные опции прилетают с сервера и подставляются в шаблон — например, на кнопку навешены отправка информации о заказе владельцу и клиенту: по почте через наш сервер, либо по смс — пока через API SmsSimple, но мы ищем другой сервис (и будем рады рекомендациям).
Чтобы подставлять опции, к прототипу строки мы написали свой метод Signe. Работает он так:
При этом мы стараемся защититься от вставки исполняемых кодов в шаблон: прежде всего на стороне сервера удаляются теги <скрипт>, а основная защита построена на экранировании спецсимволов + эскейп тегов.
Drag’n’drop по-своему. Идея «бери больше — кидай дальше», на наш взгляд, это самый удобный способ сборки чего бы то ни было для обычного пользователя. Ну хотя бы потому, что красиво.
Когда мы рассматривали существующие решения для создания калькуляторов, в них смущала некая «прибитость элементов гвоздями» — факт, что элементы можно расположить довольно строго определенным образом: например, только друг под другом, а не рядом. Хотелось уйти от этого, для чего мы придумали систему точек.
Cетка невидимых пользователю точек
Перед перетаскиванием нового элемента мы формируем карту точек, в которые можно добавить новое поле — для этого скрипт обращается ко всем элементам рабочей области и оценивает их границы.
Что это дает? Пользователь сразу может выбрать между таким:
И вот таким вариантом расположения элемента:
При движении мы постоянно проверяем, находится ли мышь над калькулятором, а под капотом запоминаем тип перетаскиваемого поля и позицию, в которую нужно его бросить.
Перетаскивание элемента само по себе не затрачивает много ресурсов браузера, однако проверка того, куда прицелился пользователь, прямо зависит от количества полей, которые уже добавлены в калькулятор. Чтобы сэкономить ресурсы браузера, мы стали определять только координаты полей, которые находятся рядом с мышью, и выявлять ближайшее к ней поле:
Для создания самих визуальных эффектов при сборке калькулятора мы использовали jQuery UI и Animate.css
Абстрагируемся от системы мер и весов. Поскольку решение хотелось сделать универсальным и простым, мы отказались от дополнительных полей, в которых при создании калькулятора человек бы выбирал метры, граммы или рубли. Условные обозначения можно вписать — но чисто для удобства и ориентира. Для всех текстовых элементов мы использовали движок Medium Editor – очень удобный и простой текстовый редактор.
Чтобы доказать, что конструктор подходит для чего угодно, мы наделали разных примеров. А один из примеров наделал шума среди первых тестеров:
«Шаблон «расчет количества мяса» — просто убил: по картинке понятно, что шашлык, а по градациям — такое впечатление, будто из всех этих людей собрались шашлык делать) Ржали всем отделом».
Пощупать калькулятор-шаблон, который развеселил целый отдел, можно здесь
Картинки — это важно. Для лучшего знакомства с товаром или услугой логично добавить изображения над теми же галочками или иным полем, отвечающем за выбор. Благодаря сетке точек, получилось реализовать вставку картинки в любую область рабочего поля. Иногда это полезно:
За тему с ёлочками спасибо Владимиру Гынгазову, автору канала “Adobe Muse по-русски”
Сама реализация загрузки картинок сделана через FileSystem API&File API — весь процесс отлично описан в этой статье.
«А поиграться с…?» Логично дать пользователю возможность подстроить цвета текстов, кнопок, фона и т.д. под цвета сайта. Для вызова и создания цветовой палитры мы использовали виджет Spectrum.
Хранение данных и автосохранение. Данные о клиентской части калькулятора хранятся в формате JSON. Вы можете увидеть их структуру, просто написав в консоли SAVER.json на сервисе.
Автосохранение происходит при каждом действии, если в калькуляторе есть активность. Изменения параллельно сохраняются и в DOM, причем каждый раз мы проверяем:
- Есть ли в JSON все данные из DOM.
- Есть ли в DOM все данные из JSON.
Если же в пределах 4 секунд ничего не происходит, калькулятор останавливает автосохранение до новых правок — так мы избавляемся от бессмысленных запросов к серверу.
Превью. Чтобы не затрачивать ресурсы браузера клиента, мы решили не анимировать интерфейс предпросмотра с помощью jQuery — поскольку с анимацией отлично справляется и CSS3: достаточно поменять класс в корне интерфейса, и у области просмотра изменится ширина и наружное оформление, стилизованное под смартфон и планшет.
Внимание на консоль
Само создание адаптивной версии калькулятора стало отдельной песней.
В конструкторе сайтов uKit, для которого исходно создавался наш проект, используется сетка Twitter Bootstrap — популярное и заслуженное решение, чтобы адаптировать веб-элементы под экран посетителя. Но бутстреп предполагает два варианта дизайна: таблицу или колонку. Поэтому мы разработали собственный вариант адаптации калькулятора.
Т.к. структура калькулятора хранится в JSON, у нас есть родительский массив со строками, а в каждой строке — массив ячеек. Помимо этого, в ячейке есть массив суб-строк (и суб-ячеек), чтобы внутри было не одно поле, а несколько. Структура ячеек показана ниже:
У калькулятора есть родительский блок со стилем display: table, внутри у него есть table-row и table-cell, соответственно. Сам калькулятор отрисовывается на сайте во фрейме. Внутри фрейма размещены стили для адаптации — и когда фрейм становится достаточно узким, калькулятор без изменения HTML-сетки перебрасывает поля на новые строки. Сделано это с помощью изменения стиля display: если на широком калькуляторе это table-cell, то на узком становится block, и наше поле оказывается на новой строке.
Исходно-десктопный вид калькулятора зависит от ширины контейнера, в котором он находится, а калькулятор стремится показать в одной строке как можно больше полей. При сужении экрана функция, которая перестраивает сетку, проходит по всем строкам калькулятора, и если в строке есть «лишние» ячейки, ниже создается новая строка.
- Если сам сайт с калькулятором адаптирован под мобильные устройства, контейнер с калькулятором будет занимать всю ширину устройства без масштабирования.
- Если же сайт не адаптирован под мобильные устройства, калькулятор будет отображаться в меньшем масштабе — а его вид повторять вид для ПК.
Аналогично и в редакторе: когда пользователь меняет ширину своего проекта, перед ним отображается фрейм с копией его калькулятора. Как только ресайз завершен, под фреймом рисуется новая сетка, фрейм незаметно для пользователя скрывается — и можно продолжать работу с полями и формулами.
Так как у нас есть полноценный кабинет управления калькулятором, мы решили отказаться от использования чего-то внешнего и экселеподобного, а в идеале — и сложных формул при создании и редактировании форм.
Вместо этого всего в отдельной вкладке есть элементы калькулятора в виде схемы. Схема содержит названия переменных и диапазоны значений для каждого из элементов калькулятора.
Чтобы задействовать какое-то поле в расчете, достаточно указать его переменную в окошке слева. Формул может быть несколько: в этом случае в калькуляторе отображается несколько результатов, например “Обычная цена” и “Цена со скидкой”.
Переменные начинаются с буквы “A”. Если полей больше, чем букв в латинском алфавите, к имени переменной добавится еще одна буква: “AA” и так далее. Каждая буква связана с числовым id конкретного поля в калькуляторе. Найти готовое решение для преобразования числа в латинские буквы и комбинации букв нам не удалось. Поэтому мы написали следующий метод:
DAT.varName(9) // I
DAT.varName(39) // AM
DAT.varName(9650215) // UCALC
Будем рады, если он вам пригодится (с вопросами можно стучаться к condor-bird).
Чем дальше, тем больше мы занимались интерфейсом сервиса. Но конечная цель — чтобы человек не только собрал у нас свой калькулятор, но и поставил его к себе на сайт в виде виджета (хотя можно и опубликовать калькулятор по ссылке и использовать в каком-нибудь соцсети).
То есть, пора было отрезать ломоть калькулятор от сервиса. Встал выбор между двумя путями:
Быстрым. В том же превью грузится виджет калькулятора — можно скрыть все элементы интерфейса конструктора, оставив поля, сетку и калькулирование — и вот он, по сути, виджет для стороннего сайта.
Но быстрый путь был отвергнут — потому что он замедлял загрузку: мы получили бы 1959 килобайт, 269 из которых заняли бы все CSS-ки, используемые в сервисе. А ведь одно из главных требований к виджету на сайте — чтобы он грузился быстро.
И правильным. Тут мы пошли к GULP — чтобы обрезать все лишнее, вроде переноса строк, и собрать один минифицированный файл с максимально чистым кодом. Почему GULP? На то есть важная причина — у нас был 41 файл (и, соответственно, 41 запрос к серверу), а мы хотели уместить все в один запрос. И мы получили то, что хотели.
Это наш дефолтный шаблон. Была скорость загрузки курильщика
Стала скорость загрузки здорового человека
Теперь мы оставляем от 140 до 180 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.
А что насчет скорости исполнения скрипта, спросите вы?
Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.
Тот же проект. Стало так
Как видно на картинке ниже, самым тяжеловесным остается текстовое поле — его мы будем оптимизировать дальше, отдавая на сайт только опцию, которую выбрал пользователь (в настройках поля есть выбор между телефоном, почтой, текстом, числовым значением и т.д.). В остальном для каждого калькулятора мы подключаем только используемые модули.
После загрузки на стороннем сайте калькулятор больше не обращается к нашему серверу: все формулы и прочее необходимое зашиты в загруженный на сайте код.
В идеальном случае пользователь собрал калькулятор, получил код для встраивания на сайт — и наступило счастье.
Но установка на сайт не всегда значит, что человек больше не будет трогать готовый калькулятор. Самый очевидный случай, когда требуется внести изменения, — это рост или снижение цены на услугу.
Поэтому для каждого встроенного калькулятора мы делаем две версии:
- Опубликованную — ту, что непосредственно встроена на сайт.
- Редактируемую — ту, которую можно открыть и начать править в личном кабинете.
Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.
habr.com