Задача: расставить на страницах сайта калькуляторы расчёта стоимости потолка, балкона, окна, кондиционирования.
Параметры должны быть настраиваемыми.
Сайт на WordPress. Соответственно, настройка в админке.
Яваскриптить четыре калькулятора было в лом, поэтому от себя добавил условие: один универсальный скрипт на все калькуляторы, расчёты программируются параметрами полей ввода.
Загуглил, как устроен плагин WP (и сам WP заодно). На Хабре хорошие примеры. Немного поковырял, получил страницу в админке.
Сохранять и получать массив параметров удобно через вордпрессовские get_option() / update_option().
Вставлять калькулятор в страницу - через shortcode с параметром.
Перешёл к самому интересному: скриптингу расчётов.
Всё, что участвует в расчёте, обозначим классом factor.
Калькуляторы не отнимают и не делят. Только два действия. Соответственно, нужны поля двух классов: add и mul. Первое прибавляет к итогу, второе - умножает итог.
При событиях change, keyup со всем, имеющим класс factor, вызывается пересчёт.
Со сложением всё просто, а с умножением пришлось писать варианты. Если функции умножения передаётся один параметр, умножаем итог на него. Если два - перемножаем их и прибавляем к итогу.
Когда уже всё казалось красивым, возникла проблема: как быть с набором опций, каждая из которых прибавляет процент к итогу? Калькулятор считает поле за полем, итог будет расти, процент тоже.
Покрутил так и эдак, пришёл к схеме: если среди $('.factor') есть что-то с классом freeze, запомнить итог на этот момент. Если дальше что-то имеет класс use-frozen, оперировать не итогом, а его замороженным значением.
Всё гениальное frozen.
Заодно добавим класс cm2m, значения этих полей при пересчёте переводим из сантиметров в метры на лету.
Получился универсальный калькуляторокомплект. Что угодно для несложного расчёта с суммированием и коэффициентами сооружается буквально за несколько минут.
Если это хорошо упаковать (встроенный редактор калькуляторов, шаблоны внешнего вида, адаптив, i18n), годится как самостоятельный товар.
Комментариев нет:
Отправить комментарий