Как сделать калькулятор на тильде
Перейдите к редактированию — нажмите «Контент» в левой верхней части блока.
Измените заголовок и описание на вкладке «Шапка блока».
Создайте поле для длины столешницы:
— Добавьте новое поле с типом «Количество(ползунок)».
— Задайте имя переменной — оно будет использовано для расчёта в формуле.
В примере задаем length.
Аналогичным образом добавьте поле с именем переменной width для выбора ширины.
Как сделать калькулятор на тильде
Калькулятор, пароль на страницу, боковое меню и новые эффекты анимации
Калькулятор в форме заявки
В вертикальных формах можно добавить расчёт цены по параметрам. Для этого используйте поле с типом «Калькулятор». Параметры для расчёта можно задать в виде выпадающего списка, ползунка, чекбокса или поля ввода в одну строку.
Пароль на страницу
Доступ к отдельной странице можно ограничить в настройках страницы на вкладке «Дополнительно».
Фиксированное боковое меню
В меню можно добавить подразделы (второй уровень). Категория «Меню», блок МЕ901
| Перейти в свой сайт Перейти в свой сайт |
Анимация: эффект «галактики», 3 типа слайдшоу в обложке и анимация чисел
Анимация для обложек добавляется через модификаторы: блоки Т826 и T833. Анимация чисел настраивается в блоках с числами из категории «Преимущества» и «Колонки».
| Перейти в свой сайт Перейти в свой сайт |
Новые шаблоны для для ваших проектов
tilda — кастомный калькулятор на zero блоке
Основная задача — сделать калькулятор на базе zero блока, без использования конструкторов по типу uclalc.
Было 2 важных вопроса:
1. Как реализовать расчет по условию;
2. Как передать данные о заказе с выбранными параметрами.
Вводные данные
Калькулятор предназначен для расчета стоимости изготовления портретов на холсте. В качестве параметра-условия, был принят размер картины. Необходимо было сделать так, чтобы при выборе того или иного размера, автоматически менялись значения остальных параметров (стоимость дополнительных услуг) в калькуляторе.
Ограничения tilda
- В вычисляемом поле формы возможно использовать только простые математические действия (суммирование, вычитание, деление, умножение);
- Возможности стандартной и step by step анимации не позволяют показывать или скрывать элементы, и создавать действия по триггеру;
Как было сделано
Для каждого размера создан zero блок с формами разного типа:
- формы с выбором дополнительных услуг;
- форма с выбором даты;
- форма с вычисляемым полем;
- форма с вводом контактных данных и кнопкой отправки.
Функционал переключения между размерами реализован как клики по табам в слайдере, т.е. по сути помещаем наши zero блоки в слайдер. За основу был взят кейс https://mo-tilda.ru/slidercopy. Ниже будет приведен мой код.
Вычисляемое поле суммирует все присвоенные значения у выбранных параметров. Для этого, в каждой форме прописываем имя переменной, куда будут передаваться значения выбранных параметров
В вычисляемом поле прописываем имена переменных, и какие действия над ними должны производиться.
Таким образом мы решили вопрос №1
Что получилось
Потрогать калькулятор можно по ссылке http://kupiportret.ru/calc-copy
Передача параметров в заявку
Логика в том, что выбранные параметры будут передаваться в скрытые поля формы, которая производит отправку данных. В этой форме необходимо добавить скрытые поля, и дать им такие же названия, как и у переменных, в которые передаются выбранные параметры, имена которых задавали ранее (a, b, c …..), за исключением формы с калькуляцией. Здесь необходимо указать название “calc”.
Осталось добавить код на страницу
Проблемы
На данный момент не передаются данные о выбранной дате, и некорректно передается итоговая сумма по заказу. По мере решения данных проблем информация будет обновляться.
Благодарности
Выражаю благодарность Андрею Балыбердину, за помощь в написании кода для передачи параметров в заявку.
Вопросы и предложения
Как добавить калькулятор?
Чтобы добавить калькулятор, используйте поле «Калькулятор» в вертикальных формах с несколькими полями (BF204N, BF310N, BF311N, BF402N, BF403N и BF502N). Параметры для расчёта можно задавать в поле «Количество», выпадающем списке, чекбоксе, поле ввода в одну строку.
Похожие вопросы
- Как отправлять заявки себе в Telegram?
- Как отправлять заявки себе на почту?
- Заявки из форм не приходят
- Как поменять цвет текста или фона в сообщении об успешной отправке формы?
- Как отправлять заявки в SMS?
Этот ответ был вам полезен?