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

Конечно, это мое субъективное мнение, основанное на собственном опыте сайтостроения и эффективности с точки зрения маркетинга.

Содержание


  1. 4 веских причины поставить калькулятор на сайт
  2. Создаем калькулятор для WordPress
  3. Подробная настройка плагина Cost Calculator
  4. Универсальный конструктор калькуляторов для любого сайта
  5. Итоги. Что выбрать.

4 веских причины поставить калькулятор на сайт

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

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

Создаем онлайн-калькулятор на WordPress – Cost Calculator

Пора переходить от теории к практике. В данном разделе я расскажу, какой плагин я использую для создания калькуляторов на WordPress, как его настроить и кастомизировать на примере.

Начну с того, что достойных бесплатных плагинов на момент написания статьи не существует, ну или я плохо искал, в таком случае буду рад, если поделитесь в комментариях.

Лучшим или одним из лучших решений для вордпресс является плагин Cost Calculator. Его можно приобрести на сайте Themeforest за 29$ и использовать сколько угодно раз на скольких угодно сайтах. Конечно его можно попытаться найти бесплатно на некоторых форумах, торрентах и т.д. Лично я категорически не рекомендую устанавливать на свой сайт плагины, скачанные с таких сайтов. И главная причина это вредоносный код, который могут содержать плагины.

Обзор Cost Calculator WordPress

Преимущества Cost Calculator:

  • Простой и понятный интерфейс с мощным функционалом.
  • Свой визуальный редактор и встраивание в любое место сайта с помощью шорткода.
  • Спец элемент для WPBakery Page Builder (в прошлом Visual Composer).
  • Возможность сразу оставить заявку, после расчета стоимости. Интеграция с Contact Form 7 (также есть встроенная форма заявки).
  • 20 демо-примеров позволят быстро настроить нужный вариант и разобраться с функционалом.
  • JS pseudo code позволяет создать уникальную логику расчета под ваши нужды через математические формулы.

Настройка калькулятора Cost Calculator с нуля на примере

Итак, к практике. Создадим с нуля калькулятор как на сайте AT-Group.by.

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

После установки плагина в админ-панели WordPress появится пункт «Cost Calculator», нажимаем на него, а после «Add new».

Настройка плагина Cost Calculator - добавление калькулятора

Вводим название и нажимаем «+»

Настройка плагина Cost Calculator - добавление калькулятора

В данном окне во кладке «GENERAL» нам необходимо выбрать основной цвет, слово которое будет перед ценой и знак валюты.

Настройка плагина Cost Calculator - основные настройки

Во вкладке «CONTACT-FORM» ставим галку напротив «Display Next Button and Contact Form», что добавляет возможность оставить заявку после расчета. Если используем форму CF7, то вставляем id, если нет – оставляем пустым и заполняем «Admin Email» (куда будут приходить заявки) и «Email Subject» (Тема письма).

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

Настройка плагина Cost Calculator - контактная форма

Остальные вкладки «RECAPTCHA», «PAYPAL», «DESIGN» нас не интересуют. Нажимаем «ОТПРАВИТЬ», что в данном случае значит сохранить.

Далее кратко разберем, какие элементы нам доступны: Наводим на созданный калькулятор и нажимаем «+».

Настройка плагина Cost Calculator

Элементы (модули) Cost Calculator:

  • Group – группа элементов, расчет внутри которой происходит по заданной формуле через псевдо-код JS.
  • Multiply – группа, значения элементов которой перемножаются между собой.
  • Raw HTML – любой HTML код для вставки между элементами калькулятора? Как правило: заголовки, отступы и так далее
  • Select – выпадающий список, к каждому пункту можно прикрепить фото.
  • Separator – разделительная линия.
  • Slider – элемент с ползунком.
  • Switch – переключатель.
  • Text – текстовое поле для произвольного ввода значения.
Настройка плагина Cost Calculator - модули (элементы)

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

Настройка плагина Cost Calculator на примере

Поле тип стяжки добавим уже внутри группы через элемент «Select».

Заполняем имя, значения в формате «имя;цифра для расчета;описание» и фото. Изображения добавляются в том же порядке, как и значения.

Настройка плагина Cost Calculator - элемент Select

Следующий элемент «Slider». Заполняем имя, минимальное значение (40), максимальное значение(1000), значение шага (5) и значение для расчета (1).

Настройка плагина Cost Calculator - элемент ползунок

Следующий элемент для толщины стяжки, также «Slider»

Настройка плагина Cost Calculator - элемент ползунок

Два следующих элемента «Switch». Заполняются имя поля, значение в выключенном состоянии и значение во включенном состоянии.

Настройка плагина Cost Calculator - элемент Switch
Настройка плагина Cost Calculator - элемент Switch

Итак, мы добавили все нужные элементы для нашей группы – пора написать правила (формулу) для нее.

Заходим в настройки группы и пишем формулу, в нашем случае она выглядит так

1
2
3
4
5
6
7
8
var type = $1;
var sq = $2;
var depth = $3;
var mat = $4;
var izo1 = $5;
if (100 < sq) final_res = (((type+izo1) * sq) + ((depth - 3.5) * depth)) *mat;
if (200 < sq) final_res = (((type+izo1) * sq * 0.9) + ((depth - 3.5) * depth)) *mat;
return final_res;
Настройка плагина Cost Calculator - формула группы

А теперь разберемся что здесь к чему. Первые 5 строк, которые начинаются с var задают переменные для элементов калькулятора:

var (говорит о том, что создается переменная)  

type (задаем название нашей переменной)

 = $1; (наша переменная получает значение первого элемента в группе, т.е. тип стяжки)

И так далее.

Следующие строки задают условия и формулы расчета, используя названия наших переменных. Русским языком:

если значение площади больше 100, то использовать формулу такую

1
if (100 < sq) final_res = (((type+izo1) * sq) + ((depth - 3.5) * depth)) *mat;

если значение площади больше 200, то использовать такую формулу

1
if (200 < sq) final_res = (((type+izo1) * sq * 0.9) + ((depth - 3.5) * depth)) *mat;

Сами формулы – это чистая математика.

И последняя строка в коде «return final_res;» возвращает результат пользователю. Выглядит все это сложно, но на самом деле все просто.

Как скрыть один из элементов калькулятора

В нашей группе существует еще одна особенность, поскольку у бетонной стяжки толщина не меняется, то нужно ее скрыть при выборе. Делается это очень просто.

Заходим в настройки элемента «Slider», который отвечает за толщину, открываем вкладку «DESIGN» и заполняем поле «Custom Id Attribute».

Настройка плагина Cost Calculator - ID элемента (модуля)

После переходим настройки элемента «Select», который отвечает за тип стяжки, во вкладке «GENERAL» заполняем поле «Change Event Condition» следующим кодом:

1
2
3
4
==4.5;slider2;hide();
==4;slider2;hide();
==5;slider2;show();
==5.5;slider2;show();

Расшифруем первую строку кода:

== если значение типа стяжки равно 4.5 скрыть элемент с id slider2

Таким образом мы скрыли поле толщина стяжки для значений 4.5 и 4, которые принадлежат бетонной и керамзитобетонной стяжке пола.

Настройка плагина Cost Calculator - скрываем модуль

Все что осталось сделать для того чтобы наш калькулятор приобрел законченный вид – это добавить заголовки и два поля в дополнительных работах.

Настройка плагина Cost Calculator - заголовки HTML

Для того, чтобы добавить заголовок «Расчет стяжки пола» добавим к нашему калькулятору поле элемент «Cost Calculator Raw HTML» и перетянем мышкой вверх

Настройка плагина Cost Calculator - заголовки HTML

А после пропишем там заголовок, используя форматирование HTML

Настройка плагина Cost Calculator - заголовки HTML

Проделываем тоже самое для заголовка «Дополнительные работы»

Настройка плагина Cost Calculator - заголовки

Осталось добавить два слайдера «Подсыпка песка» и «Демонтаж стяжки», по старой схеме. Добавляем их вне группы, ниже. Готово!

Также стоит сказать отдельные элементы просто суммируются между собой. Принцип работы на скрине ниже.

Настройка плагина Cost Calculator - логика работы

Итак, мы создали мощный калькулятор для нашего сайта на wordpress. Бюджет 29$. Последующие калькуляторы не будут нам стоить ничего. Ну а с этой инструкцией справится даже новичок. Будут вопросы – жду в комментариях.

Но неужели это единственный вариант?

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

uCalc — универсальный конструктор калькуляторов

uCalc – это сервис, который позволяет создать калькулятор вообще без навыков программирования и встроить его на любой сайт. Для wordpress есть специальный плагин, который упрощает вставку.

Преимущества uCalc:

1. Много модулей: ползунок, список, галочки, сбор контактов и прием оплат — все под рукой в визуальном редакторе.

Обзор конструктора калькуляторов uCalc - модули

2. Графический редактор формул (никакого кода, только математика)

Обзор конструктора калькуляторов uCalc - формула

3. Интеграция с социальными сетями и месседжерами. Например, можно добавить калькулятор в вашу группу Вконтакте.

Обзор конструктора калькуляторов uCalc - пример

4. Около 60 шаблонов для разных сфер бизнеса.

Обзор конструктора калькуляторов uCalc - шаблоны

Минусы uCalc:

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

Стоимость от 2,5$ в месяц при оплате сразу на 5 лет и 5$ в месяц при помесячной оплате.

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

Обзор конструктора калькуляторов uCalc - тарифы

Подробного разбора работы Ucalc в этой статье не будет, но, возможно, будет в следующей.

Создайте в uCalc адаптивный калькулятор для сайта любой платформы

Итоги. Что выбрать. Как быть.

  • Если Вас устраивает бесплатная версия uCalc – используйте этот сервис. Однако я все же советую протестировать калькулятор с изображениями, купив платную версию – возможно конверсия будет выше.
  • Если бесплатная версия uCalc не устраивает и ваш сайт на wordpress, я бы рекомендовал Cost Calculator. Покупаете 1 раз за 29$ и все. Ucalc обойдется Вам в 48$ в первый год (если оплатите сразу за год) или в 60$, если будите платить по месяцам.
  • Если у вас совсем плохо с кодом, то лучше использовать uCalc, пусть даже и платную версию. Вы сможете сами все настроить и изменять при необходимости, не нужно будет платить каждый раз за настройку сторонним специалистам.
  • Если ваш сайт не на WordPress используйте uCalc (При условии отсутствия достойного плагина для вашей CMS)
  • Если активно занимаетесь SMM и ведете группы используйте uCalc для интеграции калькулятора в социальные сети.

На этом все. Спасибо за внимание. Вопросы задавайте в комментариях.

5 3 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

63 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Алекс
Алекс
4 лет назад

Спасибо за полезную статью! Попутно возник вопрос, можно ли в cost calculator разделять дробные значения не только точкой но и запятой. Потому как один человек вводит точку а другой запятую, хотель бы чтобы работало и то и то! Спасибо

Левик
Левик
4 лет назад

Автору респект за плагин, искал нечто подобное. Скачал в сети и пытаюсь разобраться как сделать slider с ценой = 1 день цена 20 если от 2х дней цена уже по 15…

Андрй
Андрй
4 лет назад

Интересный плагин , спасибо….

Максим
Максим
4 лет назад

Спасибо за информацию.

Владимир
Владимир
4 лет назад

Интересно, а можно добавить еще одно поле в котором будет отображаться калькуляция, помимо цены? То есть у калькулятора будет несколько данных для вывода, например пользователь вводит высоту и ширину, а ему выводится площадь и цена

Vladmir
Vladmir
4 лет назад

Клёво, спасибо за мануал, а то надо по быстрому сляпать калькулятор и вот наткнулся на статью)

Тоже интересует вопрос того что бы допустим на 100 изделий одна, а от 100 изделий что бы цена изменилась допустим в другую сторону.

Marina
Marina
3 лет назад

Спасибо за развернутую статью по настройке плагина cost calculator!

Возник вопрос, возможно ли вместо элемента Slider (ползунок) использовать пустое пуле, куда вручную вводишь цифры, поскольку ползунком не удобно устанавливать нужное тебе значение.

Юрий
Юрий
3 лет назад

Добрый день, Евгений. Позволяет ли этот калькулятор отправлять расчет в форме обратной связи?

Юрий
Юрий
3 лет назад
Ответить на  Евгений Агнищенко

Не нашел, где это настраивается, не подскажете?

Юрий
Юрий
3 лет назад
Ответить на  Евгений Агнищенко

Спасибо за ответы. Евгений еще вопрос, если не затруднит. Как для расчетов извлечь значение value? Например, есть слайдер..двигаешь ползунок – указываешь количество товара, а он выдает сумму . Для расчетов нужно получить не сумму, а количество.

Юрий
Юрий
3 лет назад
Ответить на  Евгений Агнищенко

П.С. Во вкладке Contact Form такой возможности не нашел (

Юрий
Юрий
3 лет назад
Ответить на  Евгений Агнищенко

Я про CostCalculator )

Павел Чазов
3 лет назад

Евгений спасибо большое!

Одна проблема не решается) не знаю, как слово “select…” заменить на “выбрать…” в селекте

Павел Чазов
3 лет назад
Ответить на  Павел Чазов

и “оставить заявку” вместо “NEXT”

Катя Седых
3 лет назад

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

xcoder
3 лет назад

Как сделать чтоб всегда была открыта обратная форма, которая открывается кнопкой “Next” ?

Лев
Лев
3 лет назад

Евгений, приветствую. Можете помочь с формулой? стоит cost calc. на емаил приходит письмо с цифрой без умножения. то есть есть цена за сутки. при выборе суток 5*цену на мыло приходит как 5, а не итоговая сумма.

Lev Kuminov
3 лет назад
Ответить на  Евгений Агнищенко

var dur = $1;

var sel1 = $2;

var sel2 = $3;

var seat = $4;

var navigator = $5;

var price = 0;

var fin_price=0;

if (dur == 1) price = 40;

if (dur > 1) price = 35;

if (dur > 4) price = 33;

fin_price = dur * price + sel1 + sel2 + dur * (seat + navigator);

return fin_price;

Спасибо Евгений!

Захар
Захар
3 лет назад

Не подскажите, что делать если у поля Селект летит верстка на мой теме вордпрес? Ставлю стандартную тему – всё ок, ставлю Страйкин Мультифлекс – получается выпадающий список кривой

Наталья Панькова
3 лет назад

Добрый день, не отображается у поля Селект выпадающий список. Тема пустая. Пишу сайт с нуля. Подскажите, что делать в данном случаи?

Роман
Роман
3 лет назад

Благодарю за полезную статью, добавил в закладки. Для WordPress есть куча плагинов, которые помогают создать калькулятор. А среди сервисов сколько ни искал, только Юкалк нормальный. Вот недавно еще stepform.io нашел, хотя это больше формы, но калькуляцию там тоже можно сделать без проблем.

Дмитрий
Дмитрий
3 лет назад

Не работают формулы, какая логика имён переменных? Можете показать более простой вариант, как написать формулу пересчитать площадь на стоимость м2?

Максим
Максим
3 лет назад

здравствуйте евгений а можно ли писать условие типа if (q=10 and s=10) final_res = 5

Александр
Александр
3 лет назад

Добрый вечер. Можно ли на основе этого плагина сделать как итог не одну цифру, а несколько.

Хочу для одного проекта сделать зарплатный калькулятор и как результат всех вычислений надо вывести ряд результатов – сама зп, пенсионные отчисления, медстраховка и прочие вычеты.

Пример калькулятора culs. kz/zarplata/calc/

пробел в ссылке убрать.

Иван
Иван
2 лет назад

Можно ли у вас закзать настройку калькулятора?

Алексей
Алексей
2 лет назад

Здравствуйте! Возможно ли как-то объявить в селекте несколько значений для option value и потом подтягивать их в общий код группы?

Роман Дубовик
2 лет назад

Всем привет, помогите пожалуйста с кодом…

мне нужно что бы если включалась галочка она умножалась на количество отзывов.

Например без фото отзыв 50 грн. с отзывом 100.

Так выходит а если уже 5 отзывов все равно добавляет только 50.

Роман Дубовик
2 лет назад
Ответить на  Евгений Агнищенко

Спасибо но в данном случаи оно просто умножает количество “Отзывов на 2”.

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

Если например отзывов 5, а стоимость 1 отзыва 65грн. а стоимость фото 30 грн..

Он должен работать так: 5*(65+30)=

А у меня так не выходит прописать(

Роман Дубовик
2 лет назад
Ответить на  Евгений Агнищенко

Смотри какая штука все работает.

Но если тянуть только один ползунок он не по 65 считает, а по 66

Роман Дубовик
2 лет назад
Ответить на  Евгений Агнищенко

Спасибо большое.

Мой косяк.

Арсений
Арсений
2 лет назад

Доброго дня. Давно не пользовался данным плагином, не подскажите как настроить следующую функцию?

при выборе мин и макс суммы – коэфициен

при выборе дней – также свой кэф

при этом есть начальные значения, где нету умножения на кэф

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

Проще посмотреть на примере, не особо умею объяснять:

точная реализация – belkacredit ру

вот в точь-точь нужно. Только свои значения подставить. Можно даже на их примере показать, если не сложно.

Арсений
Арсений
2 лет назад
Ответить на  Евгений Агнищенко

уже сделал, спасибо

Арсений
Арсений
2 лет назад
Ответить на  Евгений Агнищенко

уже сделал, спасибо

Олег
Олег
2 лет назад

Добрый день.

Возможно ли настроить калькулятор так чтобы результат TOTAL можно было бы направить в корзину? Добавить “ADD TO CART” кнопку с результатом вычислений? Оплата через PAYPAL или контактную форму не подходит. Калькулятор хороший. Спасибо

Andrey Pavlov
1 год назад

Здравствуйте. Подскажите, посоветуйте.

Задача рассчитать стоимость натяжного потолка для нескольких помещений.

Например:

  1. Гостиная
  2. Коридор
  3. Ванная
  4. Кухня
  5. Спальня

Для каждого помещения нужно выбрать:

  • материал потолка, (фото с описанием каждого варианта),
  • дополнительеые работы (фото с описанием каждого вида работ)
  • освещение (возможность выбора по фото с ценой и описанием)
  • площадь разумеется.

Подскажите выполнима ли такая задача и если да, то с помощью какого плагина. Заранее благодарю.

Andrey Pavlov
1 год назад

Спасибо

63
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x