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

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

Содержание


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

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

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

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

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

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

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

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

Обзор Cost Calculator WordPress

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

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

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

Итак, к практике. Создадим с нуля калькулятор как на сайте Napoly.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
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 (говорит о том что 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».

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

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

1
2
3
4
==4.5;slider2;hide();
==4;slider2;hide();
==5;slider2;show();
==5.5;lider2;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. Бюджет 30$. След калькуляторы не будут нам стоить ничего. Ну а с этой инструкцией справится даже новичок. Будут вопросы – жду в комментариях.

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

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

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 раз за 30$ и все. Ucalc обойдется Вам в 48$ в первый год (если оплатите сразу за год) или в 60$, если будите платить по месяцам.
  • Если ваш сайт не на WordPress используйте uCalc (При условии отсутствия достойного плагина для вашей CMS)
  • Если активно занимаетесь SMM и ведете группы используйте uCalc для интеграции калькулятора в социальные сети.

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

4 мысли о “Калькулятор для сайта на WordPress и не только – лучшие решения 2018 года

  1. Алекс сказал:

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

    • Агнищенко Евгений сказал:

      Добрый день. WordPress по умолчанию работает с дробными числами через точку, не думаю что это можно изменить без глобальных правок. Но глубоко эту тему не изучал, возможно варианты есть.

  2. Левик сказал:

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

    • Агнищенко Евгений сказал:

      Нужно использовать условие «if» и писать разные формулы. В статье описан этот процесс — поищите. Если нужна помощь в настройке под ключ пишите на 2604511mts@gmail.com

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *