Аннотация
Данное руководство представляет собой исчерпывающую инструкцию по созданию и интеграции комплексной системы для работы с заказами на платформе Tilda. Цель — автоматизировать процесс создания квитанций, обеспечить надежное хранение данных в Google Sheets и предоставить интерактивный дэшборд для бизнес-аналитики в реальном времени.
Конечный результат — это не просто форма, а полноценный рабочий инструмент, который позволяет:
- ✓ Мгновенно генерировать и скачивать PDF-квитанции.
- ✓ Автоматически отправлять данные о заказах в Google Sheets.
- ✓ Анализировать ключевые бизнес-показатели с помощью интерактивных графиков прямо на сайте.
Цели и Компоненты Системы
Интерактивная Квитанция
Веб-страница для быстрого заполнения заказа, авто-расчета стоимости и генерации PDF.
Надежная База Данных
Автоматическая передача и хранение всех данных в Google Таблице для учета и анализа.
Аналитический Дэшборд
Защищенная паролем страница с интерактивными графиками для анализа бизнес-показателей.
Блок 1: Создание Интерактивной Квитанции
На этом этапе мы создадим "лицо" нашей системы — страницу, с которой будет работать менеджер.
Шаг 1.1: Подготовка Tilda
- В вашем проекте Tilda создайте новую пустую страницу (назовем ее «Квитанция»).
- Удалите все стандартные блоки.
- Добавьте на страницу единственный блок из категории «Другое» -> **T123 (HTML-код)**.
Шаг 1.2: Полный код Квитанции
Откройте «Контент» блока T123 и полностью замените его содержимое на приведенный ниже код. Он включает в себя всю логику интерфейса, стили и функции.
Загрузка кода...Блок 2: Настройка "Движка" Отправки
Интегрируем нашу кастомную форму с родными механизмами Tilda с помощью невидимого блока-посредника.
Шаг 2.1: Создание Скрытой Формы
- На странице «Квитанция», **сразу под** HTML-блоком, добавьте блок **BF204N** (Форма с полями для ввода).
- В «Контенте» блока удалите все поля по умолчанию.
- Добавьте 25 **«Скрытых полей»**, последовательно присваивая им «Имена переменных» из списка ниже.
Имена переменных (25 шт.)
Загрузка кода...Шаг 2.2: Скрытие Формы
- Нажмите «Настройки» блока BF204N, перейдите во вкладку «Дополнительно».
- В поле **«CSS Class Name»** впишите: `form-engine`.
- Сохраните. Блок станет невидимым на опубликованной странице.
Блок 3: Связь с Google Sheets
Подключаем нашу систему к центральному хранилищу данных.
- Зайдите в **«Настройки сайта» -> «Формы»** и подключите сервис **Google Sheets**.
- Вернитесь в редактор страницы «Квитанция», откройте «Контент» **скрытого** блока BF204N.
- Пролистайте вниз и в разделе **«Подключенные сервисы»** активируйте Google Sheets.
- **Опубликуйте страницу** и сделайте тестовую отправку, чтобы убедиться, что данные появляются в таблице.
Блок 4: Аналитический Дэшборд
Создаем защищенную страницу с интерактивной визуализацией ваших бизнес-показателей.
Демонстрация результата
Шаг 4.1: Подготовка Таблицы и Страницы
- Откройте вашу Google Таблицу. В «Настройках доступа» выберите **«Все, у кого есть ссылка»** с правами **«Читатель»**.
- Создайте в Tilda новую страницу «Аналитика».
- В «Настройках страницы» -> «Дополнительно» **установите пароль**.
- Добавьте на страницу единственный **HTML-блок T123**.
Шаг 4.2: Полный код Дэшборда
Вставьте этот код в HTML-блок. Он содержит всю логику для чтения данных и построения интерактивных графиков.
Загрузка кода...