2026-06-09 17:04

Личный кабинет в Zero-блоке

Модификации

Личный кабинет

Документация

15 минут

Продвинутый модуль, который позволяет собрать стандартный личный кабинет Тильды в Zero-блоках со своими страницами авторизации, профиля, истории заказов и выводом доступных курсов.

Как работает модификация

Общие механики

В основе модуля лежит механика синхронизации с нативным личным кабинетом Тильды. За авторизацию, профиль и историю заказов отвечает внутренняя логика Тильды. Модификация не реализует эту логику заново внутри Zero-блока: такой подход был бы хрупким, потому что обновление кабинета со стороны Тильды могло бы его сломать.

Вместо этого Тильда сама запускает и отрисовывает стандартный личный кабинет по своим правилам, а модификация скрывает его элементы от пользователя и связывает их с Zero-блоком. Значения, которые пользователь вводит в Zero-вёрстке, синхронизируются со скрытым нативным кабинетом, и данные на сервер отправляет именно он. За счёт этого Zero-блок работает как оболочка поверх стандартного механизма Тильды и не зависит от того, как устроена его внутренняя логика.

Остальное поведение модуля следует из этого подхода. Каждая страница кабинета подключается своей функцией, и её код подгружается только при вызове. Страницы профиля, заказов и курсов доступны только авторизованному пользователю: если он не вошёл, модификация перенаправляет его на страницу входа, а после входа возвращает на исходную страницу. Пока данные пользователя подгружаются из нативного кабинета, на месте контента отображаются скелетоны — заглушки в форме элементов, которые сменяются реальными значениями после загрузки. Страницы входа и регистрации, как и в Тильде, могут открываться отдельной страницей или во всплывающем окне.

Подробнее: Личный кабинет в Zero-блоке

Страницы авторизации

Авторизация в личном кабинете работает за счет синхронизации Zero-формы со скрытой стандартной формой Тильды. Данные, которые пользователь вводит в форму, попадают в оригинальную форму авторизации, и при нажатии на кнопку #submit уходят на сервер Тильды, как это происходит на стандартных страницах. Если сервер возвращает ошибку авторизации (например, неверный пароль), она выводится в форме Zero-блока, обеспечивая таким образом двустороннюю интеграцию и обмен данными. Сама Zero-форма при этом не отправляется – это защищает от утечек чувствительных данных и персональной информации.

Страницы авторизации работают как на отдельной странице, так и внутри поп-апа за счет встраивания документа через iframe. В случае с iframe, внутри поп-апа может также происходить навигация по внутренним ссылкам (например, регистрация → авторизация → восстановление пароля).

Подробнее: Страница входа в личный кабинет

Профиль, смена пароля и вывод данных

Страница профиля работает по той же механике, что и авторизация. Сначала модификация подтягивает текущие данные пользователя из кабинета Тильды и подставляет их в поля Zero-формы — имя, email, телефон и язык. При сохранении по кнопке #save изменённые значения уходят на сервер через стандартную форму Тильды; кнопка #cancel отменяет правки. Так же, через нативный механизм, обновляется и аватар: загрузка нового изображения и удаление текущего выполняются средствами Тильды, а результат сразу отражается в шейпе профиля.

Смена пароля работает аналогично — отдельная страница с полями текущего и нового пароля, чья отправка тоже идёт через стандартную форму кабинета.

Подробнее: Страница профиля в Zero-блоке

История заказов и покупок

Историю заказов и покупок Тильда формирует своим встроенным виджетом. Модификация не строит этот список заново, а запускает отрисовку штатного виджета и переносит готовый результат внутрь Zero-блока — в шейп с классом .container. За счёт этого история оформляется вёрсткой Zero-блока, но остаётся полностью на стороне Тильды и обновляется вместе с её кабинетом. Пока история загружается, на её месте показывается скелетон.

Подробнее: История заказов в Zero-блоке

Страница курсов

Список курсов выводит карточки, доступные пользователю в его аккаунте. В отличие от истории заказов, здесь вёрстка карточек полностью своя: в Zero-блоке создаётся ряд карточек-шаблонов, а модификация запрашивает у Тильды доступные пользователю курсы и размножает шаблон по их количеству, подставляя в каждую карточку название курса и ссылку на него.

Готовая сетка карточек подстраивается под их исходное расположение и пересчитывается при изменении размера экрана. Если у пользователя нет ни одного доступного курса, вместо списка показывается отдельный блок пустого состояния.

Подробнее: Страница курсов в Zero-блоке

Кнопка выхода

Функция members.logout превращает любой элемент со ссылкой #logout в кнопку выхода из личного кабинета. По клику модификация вызывает стандартный выход Тильды и очищает данные авторизации из хранилища. При включенном параметре reload страница после выхода перезагружается, а на страницах /members/... — отправляет на страницу входа.

Подробнее: Своя кнопка выхода из личного кабинета

Скрытие стандартной иконки профиля

Функция members.hideuserbar скрывает стандартную иконку личного кабинета (userbar), которую Тильда добавляет на страницы. Модификация добавляет служебный стиль, прячущий элемент .tlk-userbar. Код работает только на тех страницах, где он установлен; чтобы скрыть иконку по всему сайту, его можно перенести в общий подвал.

Подробнее: Скрытие стандартной иконки профиля

Начало работы

Установка библиотеки

Для работы личного кабинета необходимо подключить скрипт модуля в <head> сайта. Он устанавливается только один раз и автоматически загружает нужный подмодуль при вызове функции.

<script src="https://cdn.postnikovmd.com/tilda@1.6/members.min.js"></script>

Дальнейшая настройка производится по инструкции к каждому из вариантов:

Элементы

Ниже приведены элементы, из которых состоят страницы личного кабинета. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от того, какую страницу вы собираете.

Страницы входа, регистрации и восстановления пароля

Элемент	Описание	Класс/Ссылка
Блок с формой авторизации*	Zero-блок, в который добавляется форма входа, регистрации или восстановления пароля. Для работы в поп-апе ему следует задать прозрачный фон и высоту 100% экрана	.uc-sign
Поля формы*	Обязательные поля под сценарий: вход — login и password; регистрация — name, login, password; восстановление — login. Названия и типы полей должны точно совпадать	login, password, name
Кнопка отправки формы*	Элемент, по которому отправляется форма. Стандартную кнопку Zero-формы нужно скрыть (убрать текст и задать нулевые ширину и высоту)	#submit
Кнопка закрытия окна	Элемент, по которому закрывается всплывающее окно. В отдельном окне скрывается автоматически	#close
Блок успеха восстановления пароля	Zero-блок, который показывается после отправки письма для восстановления пароля	.uc-sign-success

* – обязательные элементы

Страница профиля и смены пароля

Элемент	Описание	Класс/Ссылка
Блок профиля*	Zero-блок со страницей профиля или смены пароля	.uc-profile
Поля профиля*	Для профиля: name, login, phone, language. Для смены пароля: current-password, new-password, confirm-password	–
Кнопка сохранения*	Сохраняет изменения профиля или новый пароль. Стандартные кнопки форм скрываются	#save
Кнопка отмены	Возвращает на предыдущую страницу или перезагружает текущую	#cancel
Изображение профиля	Шейп с аватаром пользователя по умолчанию; в него подставляется загруженный аватар	.profile-image
Кнопки аватара	Кнопки загрузки нового изображения профиля и его удаления	#upload, #delete
Данные профиля	Текстовые элементы для синхронизации имени, email и телефона	.profile-name, .profile-login, .profile-phone

* – обязательные элементы

История заказов и покупок

Элемент	Описание	Класс/Ссылка
Блок истории*	Zero-блок страницы заказов или покупок	.uc-orders/.uc-purchased
Контейнер для вывода*	Шейп внутри блока, в который подгружается история	.container

* – обязательные элементы

Страница курсов

Элемент	Описание	Класс/Ссылка
Блок с карточками курсов*	Zero-блок с одним рядом карточек-шаблонов	.uc-courses
Шаблон карточки курса*	Содержимое карточки, объединённое в группу с типом Object	.course, #card
Название курса	Текстовый элемент внутри карточки, в который подставляется название курса	.course-title
Блок пустого состояния	Zero-блок, который показывается, если у пользователя нет доступных курсов	.uc-courses-empty

* – обязательные элементы

Кнопка выхода

Элемент	Описание	Класс/Ссылка
Кнопка выхода из аккаунта*	Элемент (кнопка или ссылка), по нажатию на который происходит выход	#logout

* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой личного кабинета. Подгружаются асинхронно как функции объекта members: загрузчик сам подключает нужный подмодуль при первом вызове.

Функция	Описание	Триггер
members.login(selector, params)	Инициализирует кастомную форму входа в аккаунт	DOM Content Loaded
members.signup(selector, params)	Инициализирует кастомную форму регистрации	DOM Content Loaded
members.recover(selector, params)	Инициализирует своё окно восстановления пароля	DOM Content Loaded
members.profile(selector, params)	Инициализирует кастомную страницу профиля	DOM Content Loaded
members.password(selector, params)	Инициализирует страницу смены пароля	DOM Content Loaded
members.loadcontent(selector, params)	Загружает данные профиля в указанный блок	Tilda Members Authentication
members.orders(selector, params)	Инициализирует историю заказов в блоке	DOM Content Loaded
members.purchased(selector, params)	Инициализирует историю покупок в блоке	DOM Content Loaded
members.courses(selector, params)	Инициализирует функционал курсов в Zero-блоке	DOM Content Loaded
members.logout(params)	Инициализирует свою кнопку выхода из личного кабинета	DOM Content Loaded
members.hideuserbar()	Скрывает стандартную иконку профиля личного кабинета	DOM Content Loaded

Аргументы, которые передаются в функциях инициализации, подробно описаны на страницах модификаций:

Параметры для страниц авторизации: ссылка
Параметры для страницы профиля: ссылка
Параметры для истории заказов и покупок: ссылка
Параметры для страницы курсов: ссылка
Параметры для кнопки выхода: ссылка

Инициализация

Код инициализации каждой страницы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить вручную. В исходном виде он выглядит так (на примере страницы входа):

<!--members.js Личный кабинет в Zero-блоке. https://postnikovmd.com/mods/members-->
<script>members.login(".uc-sign")</script>

Примеры использования

Кастомная страница входа

Создаётся отдельная страница со ссылкой members/login, на ней — Zero-блок с формой и классом .uc-sign. В форму добавляются поля login (Email) и password, стандартная кнопка скрывается, добавляется своя со ссылкой #submit. В коде инициализации указывается класс блока:

<script>members.login(".uc-sign")</script>

Пример: Страница входа в личный кабинет

Страница профиля с синхронизацией данных

В блоке .uc-profile собирается форма с полями name, login, phone, language, шейпом аватара .profile-image и кнопкой #save. Модификация подгружает в них данные пользователя и сохраняет изменения по кнопке:

<script>members.profile(".uc-profile")</script>

Пример: Страница профиля в Zero-блоке

Стартовая страница со списком курсов

В Zero-блоке .uc-courses создаётся ряд карточек-шаблонов: каждая — группа Object с классом .course и ссылкой #card, название внутри — .course-title. Модификация клонирует карточки по числу курсов пользователя:

<script>members.courses(".uc-courses")</script>

Пример: Личный кабинет в Zero-блоке

Распространенные проблемы

Регистрация или вход не срабатывает

Для работы форм названия и типы полей должны точно совпадать с ожидаемыми: login (тип Email), password, name. Частая ошибка — назвать поле почты email вместо login: возникает конфликт имени переменной, и данные не уходят. Если вы используете ссылки на группы доступа при регистрации, проверьте их формат — ссылка должна вести на /members/signup/group/…. Чтобы увидеть, какое именно поле не найдено или заполнено неверно, добавьте к ссылке ?showerrors.

Не появляются всплывающие окна для авторизации

Проблема может возникать, если на сайте не подключен модуль личного кабинета интернет-магазина (ЛКИМ). Он добавляет возможность авторизации через всплывающие окна, которую использует модификация. Проверьте, включен ли модуль в настройках: Настройках сайта → Личный кабинет → Личный кабинет для интернет-магазина.

При клике на кнопку авторизации открывается то поп-ап, то страница

У Тильды есть встроенный механизм, который заменяет ссылки /members/login и /members/signup на #openmembersbar – ссылку, открывающую поп-ап авторизации. Он срабатывает не сразу, а после загрузки страницы и всех функций личного кабинета. Поэтому если попытаться перейти по ссылке во время загрузки, вместо открытия поп-апа произойдёт переход на отдельную страницу логина.

Это стандартная механика, по которой работает личный кабинет Тильды, обойти её нельзя из-за технических ограничений.

Всплывающие окна наслаиваются друг на друга

Проблема возникает из-за некорректного подключения модификаций личного кабинета:

1. Модуль личного кабинета подключен в блоке T123.
Модификации личного кабинета должны запускаться в самом начале при загрузке страницы – поэтому их нужно подключать глобально в <head> сайта. Для решения проблемы убедитесь, что код модуля находится именно там: Настройки сайта → Ещё → HTML-код для вставки в Head.

2. Модуль личного кабинета подключен перед библиотекой модификаций mods.min.js
Модификации личного кабинета могут работать как отдельно от библиотеки модификаций, так и вместе с ней. Но в случае, когда они работают вместе, mods.min.js имеет приоритет перед members.min.js, и в случае, если их порядок обратный, некоторые функции могут работать некорректно. Для решения проблемы поменяйте в <head> местами код от библиотеки модификаций и модуля личного кабинета.

Сообщение об ошибке перекрывает кнопку авторизации

Такая проблема появляется у форм с абсолютной версткой. Она связана с тем, что сообщение об ошибке автоматически добавляется в нижнюю часть формы и отображается под всеми полями. Если кнопка авторизации располагается под формой, сообщение об ошибке её перекрывает. Решается двумя способами:

Объединить форму и кнопку в общую группу с автолэйаутом (рекомендуется). В таком случае при появлении сообщения об ошибке, кнопка авторизации автоматически сдвинется вниз
Переместить кнопку авторизации на передний план. Это позволит форме с ошибкой не перекрывать кнопку её отправки

Личный кабинет грузит метрику на каждой странице

Проблема связана с тем, что страница входа предзагружается в скрытом iframe, и если внутри неё установлены счетчики аналитики, они срабатывают вместе с ней. Если предзагрузка мешает статистике, можно отключить счётчик отдельным скриптом в <head> страницы входа:

<script>window['disableYaCounterXXXXXXXX']=true</script>

Если модификация все равно не работает

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.

Попробовать

Личный кабинет в Zero-блоке