«STARt: Калькулятор PRO» от разработчика ««STARt» разработка сайтов»

Здесь находится два раздела: «Калькуляторы» и «Обратная связь».

В разделе "Обратная связь" сохраняются сообщения, оставленные пользователями через форму обратной связи.

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

Для изменения общих настроек калькулятора, необходимо кликнуть по меню, слева от раздела «Калькуляторы» и выбрать пункт «Изменить».

Разместить решение на странице сайта можно с помощью одноимённого компонента «STARt: Калькулятор услуг». Для этого достаточно из списка справа выбрать необходимый компонент.

Подробнее как установить компонент https://clck.ru/N6oWC.

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

• Откройте нужный файл в режиме редактирования PHP. Внимание! Не забудьте сделать его резервную копию, либо доверьте работу специалисту.
  

• Вставьте в нужный вам блок следующий код http://joxi.ru/E2pdkgYI7LwZx2
  
  <?$APPLICATION->IncludeComponent(
     "star:calculatorpro",
     ".default",
     Array(
         "COMPONENT_TEMPLATE" => ".default",
         "SECTION_ID" => "xxx"
     )
  );?>

• Вместо xxx – вставьте в код ID нужного калькулятора. ID можно узнать в  разделе «Контент - STARt: Калькулятор - Калькуляторы» тут http://joxi.ru/eAO741ZF9PdYLA.
  

• Сохраните файл.

• Раздел активен. Если опция выбрана, то калькулятор активен и будет выводиться на странице, где размещён соответствующий компонент.

• Название. Название калькулятора, которое будет выводиться в списке калькуляторов.

• Изображение. Отображается в шапке рядом с названием калькулятора.
  

• Текст. Выводится в шапке под названием. Например: «Итоговая сумма является приблизительной. Для более точного расчёта свяжитесь с нами».
  

• Подключить jQuery (Поставьте здесь галочку, если калькулятор не работает). На большинстве сайтов уже подключена библиотека jQuery, которая необходима калькулятору для работы. Тем не менее, ее может не быть. Поставьте здесь галочку, если калькулятор не работает.

• Заголовок. Заголовок, который отображается в шапке калькулятора.

• Валюта. Это знак, который должен выводиться после суммы. Туда можно написать руб., ?, $ или любой другой текст.

• Текст в строке с результатом. Произвольный текст, который будет выводиться в строке результата. Например: «Итоговая стоимость», «Сумма», «Результат» и т. п.

• Пояснение к результату. Текст, который будет выводиться сразу под строкой результата. Например: «* Расчет является приблизительным. Окончательную стоимость уточняйте».

• Цвет шапки и иконок. Введите код нужного цвета в системе HEX (прим.: #cc3131, #160aa1, #183b30). Если нужно подобрать цвет или узнать код конкретного цвета, можно воспользоваться ресурсом https://www.csscolor.ru/.

• Цвет подсказок. Введите код нужного цвета в системе HEX (прим.: #cc3131, #160aa1, #183b30). Если нужно подобрать цвет или узнать код конкретного цвета, можно воспользоваться ресурсом https://www.csscolor.ru/.

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

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

• Маска телефона. Шаблон телефона для заполнения в форме обратной связи. Например, для России +7(***)***-**-**.

• Формула. Подробнее см. в разделе инструкции «Справка по использованию формул в модулях «STARt: Калькулятор услуг» и «STARt: Калькулятор PRO».

• Заменить итоговый расчёт кнопкой. Если опция выбрана, вместо итоговой суммы будет отображаться кнопка с заданным текстом. Например: «Рассчитать» и др.

• Текст кнопки. Текст, который будет выводиться на кнопке расчёта калькулятора. Например: «Рассчитать», «Итог» и т.п.

• Произвольный СSS. CSS-код, применяемый для изменения цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов внешнего вида, которые нельзя редактировать при помощи базовых настроек калькулятора. Например, если ввести

   color: #ff0000;
}

То цвет текста изменится.

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

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

• Текст заголовка формы. Текст, который будет отображаться в заголовке формы обратной связи. Например: «Обратная связь», «Оставить заявку» и т.д.

• Текст кнопки. Текст, который будет указан на кнопке в конце формы обратной связи. Например: «Связаться со мной», «Отправить» и т.д.

• Пояснение для формы. Текст пояснения, который будет отображаться в конце формы. Например: «Копия расчёта придёт на указанный вами Е-mail».

• Поля формы (Ваше имя, Номер телефона, E-mail, Комментарий, Прикрепить файл). Поля, которые будут активны в форме обратной связи. Если поле отмечено, то оно будет отображаться в форме обратной связи и пользователь сможет его заполнить.

• Отправлять копию расчёта. Если опция отмечена, копия расчёта, после заполнения формы обратной связи будет выслана на указанный пользователем E-mail.

• Показывать только кнопку. Если опция выбрана, на странице калькулятора будет отображена только кнопка (например, «Оставить заявку»), при нажатии на которую, открывается форма обратной связи. Если опция не выбрана, форма обратной связи будет отображаться сразу.

• Текст согласия на обработку персональных данных. Текст, который должен отображаться в форме обратной связи согласно закону 153-ФЗ. Например, «Я даю согласие на обработку персональных данных».

• Ссылка на соглашение об обработке персональных данных. Здесь указывается ссылка на текст соглашения об обработке персональных данных, чтобы пользователь имел возможность ознакомиться с полным текстом согласно законодательству РФ.

• ID счётчика Яндекс.Метрика. Числовой идентификатор счетчика Яндекс.Метрика, установленного на вашем сайте.
  

• Идентификатор цели (событие JavaScript). Идентификатор цели, необходимый для настройки цели типа "Событие JavaScript" в Яндекс.Метрике. Если вы создали такую цель, указав в настройках калькулятора и счетчика один идентификатор, то Яндекс.Метрика сможет отслеживать количество заявок, отправленных через форму обратной связи калькулятора.
  

• Тип округления. Замена числа на приближенное по значению число с заданной точностью (количество знаков после запятой). Математическое округление – от 0,00 до 0,49 – округление происходит в меньшую сторону, от 0,50 до 0,99 в большую. В большую сторону – в любом случае число будет округляться в большую сторону (прим. 1,45 будет округлено как 2). В меньшую сторону – любое число будет округляться в меньшую сторону (прим. 1,99 будет округляться как 1).

• Количество знаков после запятой. Точность, с которой происходит округление. Например, если число 1,3333, а в настройках округления выбрано «Математическое округление» и 2 знака после запятой, то на странице вы увидите 1,33.

• Заголовок. Заголовок уведомления, которое появится во всплывающем окне, после успешной отправки формы обратной связи. Например: «Заявка отправлена» и др.

• Текст. Текст уведомления, которое появится во всплывающем окне, после успешной отправки формы обратной связи. Например: «Ваша заявка успешно отправлена. Наш менеджер с вами свяжется».

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

Существуют параметры с множественным выбором (можно выбрать несколько вариантов одновременно) и одиночные (можно выбрать только 1 вариант).

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

2. Счетчик. Предназначен для ввода чисел с помощью нажатия на + или -, либо ввода необходимого значения вручную.

3. Выбор одного варианта (Флажки). Для каждого варианта есть два состояния— ? включено и ? отключено. В данном случае можно отметить флажком только один вариант из списка предложенных.

4. Выбор одного варианта (Выпадающий список). Список вариантов оформлен в виде выпадающего списка. Можно выбрать только один вариант из предложенных.

5. Выбор одного варианта (Изображения). Для каждого варианта есть два состояния— ? включено и ? отключено. Для каждого варианта выводится изображение. В данном случае можно отметить флажком только один вариант из списка предложенных.

6. Выбор одного варианта (Переключатель). Тип параметра аналогичен типу "Выбор одного варианта (Флажки)". В данном случае флажки оформлены в виде "переключателей".

7. Множественный выбор (Галочки). Позволяет выбрать несколько вариантов одновременно.

8. Множественный выбор (Выпадающий список). Список вариантов оформлен в виде выпадающего списка. Позволяет выбрать несколько вариантов одновременно.

9. Множественный выбор (Изображения). Для каждого варианта есть два состояния— ? включено и ? отключено. Для каждого варианта выводится изображение. В данном случае можно отметить флажком несколько вариантов из списка.

10. Множественный выбор (Переключатель). Тип параметра аналогичен типу «Множественный выбор (Галочки)». В данном случае флажки оформлены в виде "переключателей".

11. Одиночная галочка. Тип параметра, позволяющий пользователю управлять параметром с двумя состояниями — ? включено и ? отключено.

12. Одиночный переключатель. Тип параметра аналогичен типу «Одиночная галочка». В данном случае галочка оформлена в виде "переключателя".

13. Текст. Позволяет добавить произвольный текстовый блок в нужное место между другими параметрами калькулятора. Подходит для объемных подсказок и пояснений. Не участвует в расчете.

Для перехода к настройкам параметров калькулятора необходимо в левом меню административного раздела выбрать «Контент» -> «STARt:Калькулятор услуг».

Далее нужно выбрать «Калькуляторы услуг».

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

Во вкладке «Элемент» находятся доступные настройки для выбранного параметра.

• Активность. Если настройка отмечена галочкой, то параметр активен и будет выводиться на странице калькулятора.

• Название параметра. Название параметра калькулятора, которое будет выводиться на странице сайта. Например: «Количество окон», «Производитель» и т.п.

• Сортировка. Чем меньше указанное значение, тем выше по порядку будет стоять параметр калькулятора. Например, у параметра «Количество окон» сортировка = 50, а у параметра «Производитель» сортировка = 100. Параметр «Количество окон» будет стоять по порядку раньше (выше), чем параметр «Количество окон».

• Тип параметра. Выберите тип параметр калькулятора, который будет выводиться на сайте. Доступные типы параметра: счётчик, ползунок, галочка, переключатель, текст, выпадающий список.

• Пояснение. Текст пояснения, которое будет выводиться сразу под названием параметра. Например: «Выберите, из какого материала должны быть изготовлены откосы» и т.п. Указывать не обязательно.
  

• Обязательный параметр. Если опция выбрана, параметр будет обязателен к заполнению и без указания в нем нужного значения, расчёт производиться не будет. Если опция не выбрана, при заполнении калькулятора, пользователь может пропустить этот параметр по желанию.
  

• Выводить стоимость шага. Если опция выбрана, стоимость параметра будет выводиться на странице калькулятора справа от вариантов параметра и учитываться при итоговом расчёте. Если опция не выбрана, стоимость выводиться не будет, но будет учитываться при итоговом расчёте.
  

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

• От какого элемента зависим. Подробнее см.в разделе инструкции «Зависимость параметров»
  

• От какого значения. Подробнее см. в разделе инструкции «Зависимость параметров»
  

• Цена за единицу. Настройка для типа параметра «Ползунок». Цена одной единицы товара или услуги. Цена указывается числом без пробелов и единиц измерения. Неправильно: "1 000", "1000 руб.", правильно - 1000.
  

При использовании вами собственной формулы указывать не обязательно.

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

• Минимальное значение. Настройка для типа параметра «Ползунок». Минимальное значение параметра, которое можно указать.

• Максимальное значение. Настройка для типа параметра «Ползунок». Максимальное значение параметра, которое можно указать.

• Шаг. Шаг, на который изменится число, при сдвигании ползунка на 1 деление.

• Единица измерения. Это текст/символ который будет выведен после значения параметра. Например, мм, м. шт и т.д. Указывать необязательно.

• Минимальное значение. Настройка для типа параметра «Счётчик». Минимальное значение параметра, которое можно указать.

• Максимальное значение. Настройка для типа параметра «Счётчик». Максимальное значение параметра, которое можно указать.

• Цена за единицу. Настройка для типа параметра «Счётчик». Цена одной единицы измерения (шт, кг, часа и т.п.) товара или услуги. Цена указывается числом без пробелов и единиц измерения. Неправильно: "1 000", "1000 руб.", правильно - 1000.

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

• Значение по умолчанию. Настройка для типа параметра «Счётчик». Значение, которое будет выводиться по умолчанию на странице сайта, до того, как пользователь его изменит на нужное.
  

• Цена за единицу. Настройка для типа параметра «Одиночная галочка». Число, которое будет прибавлено к итоговой сумме, если галочка отмечена. Цена указывается числом без пробелов и единиц измерения. Неправильно: "1 000", "1000 руб.", правильно - 1000.
  

• Текст. Настройка для типа параметра «Текст». Произвольный текст, который будет выводиться непосредственно в калькуляторе. Например, объемные пояснения или описание дополнительной услуги.
  

• Список вариантов (левое поле – название, правое – цена). В левом столбце указывается название варианта, в правом, напротив нужного варианта – соответствующая цена. Цена указывается числом без пробелов и единиц измерения. Неправильно:          "1 000", "1000 руб.", правильно - 1000.

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

• Подсказки. Подсказки к вариантам параметра, указываются в одном порядке с вариантами. Например, фирма-производитель, материал изготовления варианта и т. п. Если для варианта подсказки нет – поставьте *. Например, в списке вариантов для параметра «Тип окна» у нас стоит следующий порядок:
  

1. Одностворчатое
   
2. Двустворчатое
   
3. Трехстворчатое
   

Подсказки нужно указывать в соответствии с порядком расположения вариантов:

1.      Подсказка для варианта «Одностворчатое».

2.      *

3.      Подсказка для варианта «Трехстворчатое».

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

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

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

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

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

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

Пример:

Нам требуется рассчитать стоимость возведения забора на прямоугольном земельном участке. Известна стоимость погонного метра забора – 3 000 руб. Планируется, что ширину и длину участка укажет пользователь, заполнив соответствующие поля калькулятора.

В таком случае стоимость будет рассчитываться по формуле:

(«Ширина участка в метрах» + «Длина участка в метрах») * 2 * 3000

То есть сначала мы находим периметр земельного участка в метрах (сумма его сторон, умноженная на 2), а затем умножаем его на стоимость погонного метра (3000).

РЕАЛИЗАЦИЯ НА СТОРОНЕ КАЛЬКУЛЯТОРА

«Ширина участка в метрах», «Длина участка в метрах» - нужно создать эти два параметра в нашем калькуляторе. К примеру, их тип – ползунок http://joxi.ru/gmvqegLIqV4oJr.

Чтобы передать эти параметры в формулу, нам нужно знать их ID. Перейдите в раздел с параметрами калькулятора. ID указаны тут http://joxi.ru/BA0p4vyfMaEnwA.

Теперь запишем формулу с использованием ID.

({1539} + {1540}) * 2 * 3000

Где 1539 – это ID параметра «Ширина участка в метрах», а 1540 - ID параметра «Длина участка в метрах». Фигурные скобки {} показывают калькулятору, что речь идет о переменной, а не о простом числе.

Таким образом, чтобы передать параметр в калькулятор, нужно скопировать его ID и заключить в фигурные скобки – вот так {ID}.

ДОСТУПНЫЕ ОПЕРАЦИИ

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

БАЗОВЫЕ ОПЕРАЦИИ

Некоторые другие математические функции

Математические константы

Полный перечень доступных функций https://mathjs.org/docs/reference/functions.html. Для использования уберите приставку math. перед названием функции.

ОСОБЕННОСТИ СОСТАВЛЕНИЯ ФОРМУЛ

Например, нам нужно извлечь кубический корень числа. Данное действие выполняет функция math.cbrt(x). Теперь вставим ее в формулу, отбросив math. из названия функции и подставив вместо x нужное число или переменную - пусть это будет число 27:

cbrt(27)

В качестве результата калькулятор вернет число 3.

• В числах в качестве десятичного разделителя должна использоваться точка. Например, 2,51 – неправильно, верная запись - 2.51
  
• Запись выражения с пробелами и без них - равнозначна. То есть, (1 + 2) * 3 – это тоже самое что и (1+2)*3
  
• Аналогично можно использовать перенос строки – на работу формулы это не повлияет. Например, (1+2)*3+4*3.5 можно записать так:
  

(1+2)*3

+

4*3.5

Такая запись может упростить чтение сложных формул, логические части которых можно разнести в разные строки.

УСЛОВИЯ

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

Для этого нужно использовать конструкцию <if id="" value="" type=""></if>

• id – это ID параметра, от значения которого зависит выполнение условия.

• value - слово, словосочетание или число, с которым мы сравниваем выбранный пользователем вариант.

• type - может принимать значения = (равно), != (не равно), > (больше), < (меньше).

Пример:

<if id="795" value="Двустворчатое" type="!=">({797} + {800}) * 5</if>

Расшифровка: если значение параметра с ID 795 не равно «Двустворчатое», то следует выполнить выражение ({797} + {800}) * 5.

Вернемся к знакомому нам примеру с расчетом стоимости забора:

Добавим в калькулятор еще один параметр под названием «Материал забора» с ID 1541 и двумя вариантами выбора: «Кирпич» и «Профлист». Стоимость метра забора из кирпича – 3 000 руб., а из профлиста – 1 000 руб.

<if id="1541" value="Кирпич" type="=">

({1539} + {1540}) * 2 * 3000

</if>

<if id="1541" value="Профлист" type="=">

({1539} + {1540}) * 2 * 1000

</if>

Внимание! Условия поддерживают вложенность. То есть при необходимости можно реализовать конструкцию, где одно условие находится внутри другого:

<if>

   <if></if>

</if>

КОММЕНТАРИИ К ФОРМУЛЕ

Вы можете добавлять поясняющие комментарии в любую часть формулы. Текст комментария нужно заключить в конструкцию <!-- -->.

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

Дополним последний пример комментариями:

<!-- Расчет стоимости забора из кирпича по цене 3 000 руб. за метр -->

<if id="1541" value="Кирпич" type="=">

({1539} + {1540}) * 2 * 3000

</if>

<!-- Расчет стоимости забора из профлиста по цене 1 000 руб. за метр -->

<if id="1541" value="Профлист" type="=">

({1539} + {1540}) * 2 * 1000

</if>

<!-- Список переменных

1539 - Ширина участка в метрах

1540 - Длина участка в метрах

1541 - Материал забора

-->

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

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

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

Важно! Название варианта должно быть указано целиком, иначе функция не сработает. Также следите за размером букв (заглавные или строчные) - все должно быть как в оригинале. После названия или перед ним не должно быть лишних пробелов.

КАК ЭТО МОЖНО ИСПОЛЬЗОВАТЬ

Рассмотрим пример с калькулятором расчета окон.

Пользователю предложено выбрать "Опции".

В этом параметре есть варианты: "Москитная сетка", "Детский замок", "Микропроветривание", "Солнцезащитный стеклопакет".

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

Создаем соответствующий параметр с счетчиком количества и настраиваем его зависимость от параметра "Опции" и варианта "Москитная сетка"

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

Теперь зависимый параметр отображается в калькуляторе при соответствующем выборе.

При выборе другого варианта его уже нет.

Можно указывать зависимость параметра сразу от нескольких вариантов родительского параметра.

Тогда их нужно записать через вертикальную черту, например, Москитная сетка|Детский замок|Микропроветривание - при выборе любого из этих вариантов, зависимый параметр будет будет отображен на сайте. А при выборе варианта "Солнцезащитный стеклопакет" - останется скрыт.