Как сделать карточку товара с кнопкой заказа и всплывающей формой в Tilda
Платформа Tilda Publishing позволяет создавать интерактивные элементы как через стандартные блоки, так и через конструктор Zero Block. Если вам нужна карточка товара, при клике на кнопку которой появляется форма обратной связи (pop-up), это можно реализовать несколькими способами. Разберём оба варианта - от простого к продвинутому.
Стандартный блок Tilda для карточки товара
Самый быстрый способ - использовать готовый блок из библиотеки Tilda. Выберите блок категории «Товары» или «Карточки» (например, TO101 или TO201). В настройках кнопки укажите действие «Всплывающее окно» и выберите форму обратной связи, которую вы заранее создали в разделе «Формы». Это не требует знаний кода и подходит для типовых задач.
Настройка кнопки в стандартном блоке
- Выделите кнопку в карточке товара.
- В панели свойств найдите пункт «Действие при клике».
- Выберите «Всплывающее окно (Popup)».
- Укажите ID вашей формы (например,
form12345678).
После сохранения страницы при нажатии на кнопку будет появляться форма заказа.
Создание карточки в Zero Block
Если нужен уникальный дизайн или нестандартное расположение элементов, используйте Zero Block. В этом режиме вы полностью контролируете вёрстку: добавляете изображение, текст, цену и кнопку. Для кнопки настройте событие «Открыть всплывающее окно» - оно доступно в свойствах элемента. Всплывающее окно (pop-up) можно создать как отдельный блок в том же Zero Block или использовать готовую форму из стандартного редактора.
Пошаговая инструкция для Zero Block
- Добавьте на страницу блок «Zero Block».
- Перетащите на холст элементы: картинку, текст, кнопку.
- Настройте стили: шрифты, отступы, тени.
- Кликните на кнопку, в правой панели выберите «Действие» → «Открыть всплывающее окно».
- Выберите созданный ранее pop-up (или создайте новый прямо в Zero Block).
Обратите внимание: в Zero Block всплывающее окно можно сделать с нуля, добавив на слой фон, форму, поля ввода и кнопку отправки.
Вариант с HTML-кодом и T123
Для максимальной гибкости используйте блок T123 (HTML-код). Вставьте туда вёрстку карточки на HTML/CSS, а для кнопки пропишите JavaScript-обработчик, который открывает модальное окно. Этот способ подходит, если вы знакомы с веб-разработкой и хотите реализовать анимацию или нестандартную логику.
Где посмотреть документацию и примеры
Официальная справка Tilda (help.tilda.cc) содержит разделы по Zero Block, Pop-up и работе с формами. Также на YouTube-канале Tilda есть видеоуроки «Создание карточки товара» и «Настройка всплывающих окон». Рекомендуем изучить их для углублённого понимания.