Калькулятор для сайта на WordPress и не только – лучшие решения 2019 года

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Два следующих элемента «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;

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

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

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».

После переходим настройки элемента «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 Raw HTML» и перетянем мышкой вверх

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

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

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

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

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

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

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

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

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

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

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

Минусы uCalc:

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

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

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

Подробного разбора работы Ucalc в этой статье не будет, но обязательно будет в следующей. Подписывайтесь на нашу мега-рассылку, чтобы не пропустить

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

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

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