Калькулятор для сайта WordPress

Калькулятор для сайта WordPress

Приветствую вас, дорогие читатели!

Сегодня, я расскажу о том, как можно сделать калькулятор расчета стоимости товара или услуги для вашего сайта работающего на WordPress.

Создавать этот калькулятор мы будем при помощи специального плагина WP-Creator-Calculator. Он есть в репозитории WordPress.

Плагин WP-Creator-Calculator
Обратите внимание! К нему есть предупреждение, что данный плагин не обновлялся в течении последних двух лет. Но несмотря на это, он достаточно хорошо работает с современными версиями WordPress, поэтому его можно использовать.

Для его установки, как обычно, копируем название и переходим в административную панель сайта в раздел «Плагины» => «Добавить новый». Вставляем название в строку поиска и нажимаем «Enter». Далее выбираем нужный нам плагин и нажимаем на кнопку «Установить», а затем, активируем его.

Настройка полей калькулятора

После активации данного плагина у вас в левом меню появится пункт «WPCC»,

Настройка полей калькулятора

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

Нажимаем на кнопку «Установить калькулятор», плагин создает новую таблицу в базе данных, затем нужно нажать на кнопку «Новый калькулятор»

создание нового калькулятора в WP-Creator-Calculator

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

Вся панель настроек разбита на 4 вкладки, это:

  1. 1.Конструктор
  2. 2.Экспорт формулы
  3. 3.Импорт формулы
  4. 4.Настройки

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

Мы будем использовать вкладку «Конструктор», для создания нашего калькулятора, и вкладку «Настройки» для задания необходимых параметров.

Итак, рассмотрим вкладку «Конструктор».

В самом верху мы видим название калькулятора, которое можно изменить.

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

выбор типа поля в WP-Creator-Calculator

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

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

Добавление поля Input hidden

Добавляем скрытое поле. Выбираем, в разворачивающемся списке, тип поля «Input hidden», и нажимаем кнопку «Добавить».

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

добавление поля WP-Creator-Calculator

Здесь мы можем:

  1. 1.Ввести заголовок.
  2. 2.Выбрать цвет для формы.
  3. 3.Так как данное поле у нас будет самым первым в форме, то в графе «Знак до» мы ничего не ставим.
  4. 4.«Знак после» — тоже, пока что не указываем.
  5. 5.Далее, указываем базовую стоимость в поле «Цена».
  6. 6.В поле «Данные», оставляем как есть, «Полученные данные».
  7. 7.Далее, можно задать возможность учитывать это поле в расчетах или не учитывать. В нашем случае, мы его будем учитывать.

После задания параметров нажимаем на кнопку «Сохранить параметры полей».

добавление поля Input hidden

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

Использование поля Select

Первый параметр, который мы зададим — объем жесткого диска. Для объема жесткого диска мы будем использовать тип поля «Select», т. е. это будет раскрывающийся список.

Выбираем тип поля «Select», нажимаем «Добавить». Для того, чтобы задать его настройки:

  1. 1.Нажимаем на значек +
  2. 2.Далее, вводим заголовок.
  3. 3.В поле «Знак до» ставим +, т. е. у нас значение этого поля будет складываться со значением предыдущего поля.
  4. 4.«Знак после» — пока что не трогаем.
  5. 5.После чего добавляем список значений, который будет у нас высвечиваться в раскрывающемся списке.
  6. 6.Первый вариант для выбора, который я добавлю, будет объем жесткого диска 500 Гб. В поле текст, пишу 500Гб
  7. 7.В поле значение мне нужно задать стоимость данного жесткого диска, которое будет прибавляться к базовой стоимость ноутбука. К примеру, у меня здесь будет 1000.
    настройка полей Использование типа Select
  8. 8.Для того чтобы добавить новый вариант, я нажимаю на ссылку «Добавить строку».
  9. 9.Следующий вариант — 1 TB. Его стоимость будет равна, к примеру, 1500. И дальше, аналогично, добавляем 2TB, 4TB и т. д.
  10. 10.В поле данные у нас так и должно оставаться «Полученные данные».
  11. 11.В «Поле участвует при расчетах», оставляем «Да».
  12. 12.«Визуально скрыть поле» оставляем «Нет».
  13. 13.После того как мы задали все настройки — нажимаем «Сохранить параметры полей».

Поле Radio

Следующее поле, которое нам понадобится — поле для выбора цвета ноутбука. Для этого параметра мы воспользуемся типом поля «Radio».

  1. 1.Выбираем этот тип и нажимаем на кнопку «Добавить». А затем нажимаем на знак + и задаём настройки.
  2. 2.Указываем заголовок
  3. 3.«Знака до» — ставим +
  4. 4.«Знак после» — оставляем пустым
  5. 5.А дальше, нам нужно точно так же задать список значений
  6. 6.Так же здесь можно выбрать изображение для каждого варианта, для этого просто щелкаем по полю со ссылкой и открывается библиотека медиафайлов, через которую мы можем выполнить загрузку изображения.
  7. 7.Для добавления вариантов аналогично, нажимаем на ссылку «Добавить строку».
  8. 8.Значение поля «Данные» остается по умолчанию.
  9. 9.«Поле участвует при расчетах» — также, остается по умолчанию.
  10. 10.Нажимаю на кнопку «Сохранить параметры полей».

Добавление поля Slider

Следующий параметр, по которому будет выполняться расчет — это объем оперативной памяти.
Добавим еще одно поле, на этот раз это будет поле «Slider».

  1. 1.Выбираем тип поля и нажимаем «Добавить». Slider представляет собой ползунок, двигая который у нас будет изменяться числовое значение.
  2. 2.Нажимаем на значок + для настройки параметров.
  3. 3.Задаем заголовок.
  4. 4.«Знак до» — ставим +.
  5. 5.«Минимальное значение» — 2.
  6. 6.«Максимальное значение» — 12.
  7. 7.«Шаг» будет равняться 2, т. е. у меня будет объём 2 Gb, 4 Gb, 6Gb и т. д. до 12Gb.
  8. 8.Далее, нужно выбрать положение, горизонтальное либо вертикальное.
  9. 9.После чего, необходимо указать значение по умолчанию. Так как у нас здесь идет минимальное значения 2Гб, мы задаем значение 2. Если у вас нет какого-то значения по умолчанию то вы здесь должны поставить 0.
  10. Поле «Значение по умолчанию» ни в коем случае не должно оставаться пустым, иначе расчет будет выполняться не правильно.
  11. 10.Поля «Данные», «Поле участвует при расчетах» и «Визуально скрыть поле» оставляем по умолчанию.
  12. 11.Нажимаем «Сохранить параметры полей».
настройка поля Slider

Для расчёта стоимости оперативной памяти и дальше выбранное значение будет умножаться на стоимость 1Гб оперативной памяти.

Добавляем еще одно поле «Input hidden»:

  1. 1.Выбираем тип поля, нажимаем «Добавить».
  2. 2.Вписываем заголовок «Цена за 1 Гб».
  3. 2.«Знак до» будет стоять *.
  4. 2.«Знак после» — не ставим.
  5. 2.«Цена» — 250 рулей, к примеру.
  6. 2.Нажимаем «Сохранить параметры полей».

Добавление поля Checkbox

Теперь к нашему ноутбуку мы еще добавим поле, которое называется «Checkbox».

  1. 1.Выбираем этот тип поля и нажимаем на кнопку «Добавить», далее нажимаем на +, чтобы задать нужные параметры. В поле checkbox мы дадим возможность выбирать дополнительные аксесуары для ноутбука.
  2. 2.«Знак до» — ставим +.
  3. 3.«Знак после» — ничего не ставим.
  4. 4.Далее, задаем список вариантов. Здесь так же можно добавлять изображение при необходимости.
  5. 5.Далее, «Значение по умолчанию», ставим 0. Как видите, настройки этого поля очень похожи на настройки поля «Radio», но в отличии от этого типа полей, здесь есть еще такое поле, как «Действие с данными».
  6. Дело в том, что поле «Checkbox» позволяет выбрать не один вариант, а несколько. И нам здесь нужно выбрать действие которое будет выполняться со всеми выбранными данными. В данном случае они у нас будут складываться. .
  7. 6.Все остальные поля остаются по умолчанию.
  8. 7.Нажимаем на кнопку «Сохранить параметры полей».

Поле Input text

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

И еще одно поле, которое я вам покажу — называется «Input text».

  1. 1.Добавляем этот тип поля и нажимаем +.
  2. 2.Указываем заголовок.
  3. 3.«Знак до» — ставим +.
  4. 4.«Цена» — к примеру, 200 рублей.
  5. 5.«Действия с данными» — +.
  6. 6.«Значение по умолчанию» — 0.
  7. 7.Так же, здесь можно задать «Placeholder». Это, текст, который будет высвечиваться в случае, если поле не заполнено.
  8. 8.Также здесь можно задать максимальное количество символов вводимых в поле, если нужно.
  9. 9.Далее, в поле «Валидация» можно выбрать тип проверки, т. е. в поле можно будет вписывать к примеру, только цифры, либо любые символы.
  10. 10.Последние три поля оставляем по умолчанию.
  11. 11.Нажимаем на кнопку «Сохранить параметры полей».

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

В верху у нас отображается текстовая формула, которая показывает, что происходит с нашими полями. Цифрами 1,2, 3 и т.д. обозначаются идентификаторы добавленных нами полей.

окно предпросмотра WP-Creator-Calculator

Вставка калькулятора на страницу

Для того чтобы это сделать нам нужно:

  1. 1.Возвращаемся в самый верх страницы и копируем шорткод.
  2. 2.Создаем новую страницу с названием «Калькулятор».
  3. 2.Вставляем шорткод калькулятора во вкладку «Текст».
  4. 2.Нажимаем на кнопку «Опубликовать».
  5. 2.Переходим на страницу и смотрим как выглядит наш калькулятор.

Мне не очень понравилось что поля растягивает на всю ширину и картинки с выбором цветов размещены одна под другой, поэтому я добавила в самом конце файла стилей своей темы следующий код:

После сохранения изменений и обновления страницы, мой калькулятор приобрёл следующий вид:

внешний вид формы калькулятора

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

Видеоинструкция

Я также подготовила для Вас подробную инструкцию по созданию данного калькулятора.

Помимо вычислений этот калькулятор также умеет отправлять полученные данные на e-mail, причём не только администратору, а и пользователю.
Более подробно о том, как настроить эту возможность я расскажу в одной из следующих статей.
Подписывайтесь на обновления, чтобы ничего не пропустить.

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

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

18 комментариев

  1. День добрый! Почему то не получается изменить вид при помощи CSS, как указано в примере.

    • Здравствуйте! Видимо дело в стилях Вашей темы.
      У Вас стили вообще не применяются или применяются, но не полностью?

  2. Если бы не посмотрел Ваше видео https://www.youtube.com/watch?v=eNQ9TY74AuY как сделать калькулятор, то ещё долго бы мучился. Пожалуй это единственное видео доступно раcсказывающее как сделать самому калькулятор для WP.

    Пожалуйста, подскажите как сделать «Второй результат»? Например, имеется три поля: длина, ширина. Основной результат — Площадь(ID1*ID2), калькулятор считает хорошо. А вот  как сделать что бы вторым результатом считался периметр (ID1+ID2)*2, что не получается.

     

    Пожалуста,

    • Разобрался.
      В ячейку Арифметическое выражение надо написать  следующую формулу для расчёта периметра: $_SESSION[wpcc_2][1]*2+$_SESSION[wpcc_2][2]*2,
      где:
      [wpcc_2] — номер калькулятора (у меня этот был калькулятор № 2)
      [1], [2] — номер данных полей ID-1 и ID-2 (у меня ID-1 это длина, а ID-2 ширина).

      Если написать так: 2*($_SESSION[wpcc_2][1]+$_SESSION[wpcc_2][2]), то формула у меня почему-то не работает.

      • Вы молодец, что со всем разобрались! Так в итоге калькулятор выполняет расчёт стоимости или нет?

  3. Добрый день!

    Подскажите пожалуйста, как можно изменить размер (в частности длину) окна SELECT?

    Пробовал ваши кодом, но вставилась лишь рамка толщиной в 1px.

    В других параметрах получилось изменить только размер названия окна select, а само окно никак.

    • Скиньте, пожалуйста ссылку на страницу с формой.

      • Общий доступ к сайту сейчас к сожалению закрыт.

        • Для изменения ширины поля select попробуйте в файле стилей Вашей темы дописать следующее свойство:
          .wpcf7 select {
          width:200px!important;
          }

          Вместо 200px выставляете своё значение ширины в пикселях.

  4. Здравствуйте, мне нужен калькулятор как здесь: http://lp.kkbk.com.ua/#cost

    Возможно ли такой калькулятор сделать на этом плагине?

    • Здравствуйте! Данный плагин осуществляет расчёт после нажатия на кнопку, а в предложенном примере цена формируется «на лету». Так что данный плагин скорее всего не подойдёт.

      • А можете посоветовать плагин такой который я показывал в примере? Или скрипт какой нибудь?

  5. Не могу ввести название в текстовый блок. Только могу поменять цвет

    • Здравствуйте, Евгений! О каком именно блоке идёт речь? Можете ссылку на сайт дать или скриншот прислать?

  6. Юлия, подскажите каким способом реализован этот калькулятор http://argest.in.ua/kalkulyator/ , а именно в самом верху в поле  «формы» сам поиск и как вставлены слайдером формы? Это отдельный плагин? Если да , то какой?

    Спасибо.

    • Здравствуйте, Геннадий! Да, видимо там отдельным плагином слайдер сделан или полностью самописный калькулятор. При помощи сервиса WordPress Theme Detector можно определить набор плагинов, установленных на сайте.

  7. плагин слайдера есть на этом сайте , а вот как увязать что-бы с другого плагина с начальной стоимости прибавлялись все остальные с созданных полей? Может вы в курсе, можно ли как-то реализовать зависимые поля, если выбираешь с одного поля, то другое становится не активно…???

    • То есть в зависимости от того какое поле выбрано будет изменяться контент другого поля или появляться другое поле? Или пока одно поле не заполнишь следующее не было активно?

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

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

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif