Продвинутый модуль, который позволяет собрать стандартный личный кабинет Тильды в 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-блоке
- Страница изменения пароля в Zero-блоке
- Загрузка данных профиля в Zero-блок
- История заказов в Zero-блоке
- История покупок в Zero-блоке
- Cтраница курсов в Zero-блоке
- Своя кнопка выхода из личного кабинета
- Скрытие стандартной иконки профиля
Элементы
Ниже приведены элементы, из которых состоят страницы личного кабинета. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от того, какую страницу вы собираете.
Страницы входа, регистрации и восстановления пароля
* – обязательные элементы
Страница профиля и смены пароля
* – обязательные элементы
История заказов и покупок
* – обязательные элементы
Страница курсов
* – обязательные элементы
Кнопка выхода
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой личного кабинета. Подгружаются асинхронно как функции объекта members: загрузчик сам подключает нужный подмодуль при первом вызове.
Аргументы, которые передаются в функциях инициализации, подробно описаны на страницах модификаций:
Инициализация
Код инициализации каждой страницы вставляется в блок 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> местами код от библиотеки модификаций и модуля личного кабинета.
1. Модуль личного кабинета подключен в блоке T123.
Модификации личного кабинета должны запускаться в самом начале при загрузке страницы – поэтому их нужно подключать глобально в <head> сайта. Для решения проблемы убедитесь, что код модуля находится именно там: Настройки сайта → Ещё → HTML-код для вставки в Head.
2. Модуль личного кабинета подключен перед библиотекой модификаций mods.min.js
Модификации личного кабинета могут работать как отдельно от библиотеки модификаций, так и вместе с ней. Но в случае, когда они работают вместе, mods.min.js имеет приоритет перед members.min.js, и в случае, если их порядок обратный, некоторые функции могут работать некорректно. Для решения проблемы поменяйте в <head> местами код от библиотеки модификаций и модуля личного кабинета.
Сообщение об ошибке перекрывает кнопку авторизации
Такая проблема появляется у форм с абсолютной версткой. Она связана с тем, что сообщение об ошибке автоматически добавляется в нижнюю часть формы и отображается под всеми полями. Если кнопка авторизации располагается под формой, сообщение об ошибке её перекрывает. Решается двумя способами:
- Объединить форму и кнопку в общую группу с автолэйаутом (рекомендуется). В таком случае при появлении сообщения об ошибке, кнопка авторизации автоматически сдвинется вниз
- Переместить кнопку авторизации на передний план. Это позволит форме с ошибкой не перекрывать кнопку её отправки
Личный кабинет грузит метрику на каждой странице
Проблема связана с тем, что страница входа предзагружается в скрытом iframe, и если внутри неё установлены счетчики аналитики, они срабатывают вместе с ней. Если предзагрузка мешает статистике, можно отключить счётчик отдельным скриптом в <head> страницы входа:
<script>window['disableYaCounterXXXXXXXX']=true</script>Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
