У Тильды есть блок BF924 с готовыми суммами взносов, но он рисует их сам и почти не поддаётся изменению. Модификация решает задачу иначе: форму вы собираете любую — в стандартном блоке или в Zero, — а сумму из поля она превращает в товар и отправляет на оплату.
Что настраивается
- Название и картинка товара, который увидит жертвователь в корзине.
- Минимальная и максимальная сумма и тексты сообщений, если сумма не подходит.
- Кнопки с готовыми суммами — любые элементы с вашим классом: клик подставляет сумму в поле.
- Цвет выбранной кнопки — фон и текст. Задаются здесь, потому что оформить их своим CSS в Zero-блоке нельзя.
- Способ оплаты: корзина или блок прямой оплаты ST105.
Как это работает
Сумма из поля попадает в кнопку формы, а дальше её обрабатывает сама Тильда — тем же механизмом, что и обычные кнопки «Купить». Поэтому корзина, платёжные системы, промокоды и уведомления работают как всегда, а обязательные поля формы (имя, почта, согласие) Тильда проверяет до того, как товар попадёт в корзину.
Что учтено
- Выбранная кнопка действительно подсвечивается. В Zero-блоке класс висит на обёртке, а красит кнопку внутренний слой с правилом от самой Тильды — своим CSS его не перебить. Модификация красит именно этот слой, и цвет переезжает с кнопки на кнопку плавно, тильдиным же переходом.
- Кнопка, отмеченная как выбранная в редакторе, работает сразу. Её сумма подставляется в поле при загрузке страницы, без клика.
- Решётка из ссылки убирается. Кнопке в Zero нужна ссылка, иначе Тильда не считает её кликабельной; после запуска скрипт снимает
href, оставляя кнопке вид, курсор и работу с клавиатуры, — клик больше не прокручивает страницу вверх и не добавляет решётку в адрес.
- Ошибка видна в любой форме. Сообщение показывается всплывающей подсказкой у поля, а не строкой под ним: в горизонтальной форме Тильда такую строку прячет своими стилями, а в Zero-блоке её обрезает край артборда. Подсказка живёт вне блока и сама переворачивается вниз, если сверху нет места.
- Из поля на лету убираются буквы и лишние знаки, а «1 500,50» понимается как 1500,50.
- Enter в поле суммы работает так же, как нажатие кнопки.
- Код не привязан к моменту загрузки: форма может появиться позже — в попапе, в Zero-блоке или после подгрузки страницы.
- Несколько форм на странице работают независимо друг от друга.
Некодим