Время настройки: 10 минут

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

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

Страница профиля в Zero‑блоке

Страница изменения пароля в Zero‑блоке

Дополнение

Загрузка данных профиля в Zero‑блок

Дополнение

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

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает работать модификациям личного кабинета. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

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

Создайте отдельную страницу для настроек профиля

Чтобы заменить стандартную страницу профиля, задайте ей ссылку «members/profile».
Создайте на странице Zero-блок с настройками профиля и присвойте ему класс .uc-profile
Добавьте в блок формы с обязательными полями: name login phone language
В блоке можно использовать как одну форму с несколькими полями, так и разбить их на несколько разных форм. Главное условие для работы модификации — точное соответствие названий и типов полей в формах:
- name: тип Name
- login: тип Email
- phone: тип Phone
- language: тип Dropdown
Для кнопки смены пароля можно использовать стандартную ссылку /members/profile/password.
См. подробнее: Страница изменения пароля в Zero-блоке
Скройте стандартные кнопки отправки данных в настройках форм и добавьте в блок свою кнопку со ссылкой #save

Данная кнопка будет сохранять настройки профиля при изменении значений в формах. Чтобы скрыть стандартные кнопки, удалите их текст (caption) и задайте нулевые значения для ширины и высоты (width: 0 и height: 0).
Добавьте в блок шейп с изображением профиля по-умолчанию и задайте ему класс .profile-image

Если пользователь загрузит в профиль свой аватар, оно отобразится в данном шейпе. При его отсутствии в нём выведется изображение, загруженное изначально.
Добавьте в блок кнопки редактирования изображения профиля: для кнопок его загрузки задайте ссылку #upload, для удаления — #delete

Данные кнопки можно дополнительно скрыть внутри выпадающего списка с помощью Zero-тултипов. См. подробнее
Задайте классы дополнительным элементам, чтобы синхронизировать их с настройками профиля (опционально)
Для подгрузки в текстовые элементы данные пользователя используйте классы:
- .profile-name – для имени пользователя
- .profile-login – для email пользователя
- .profile-phone – для телефона пользователя
Задайте в настройках модификации параметры и стили страницы профиля
Скопируйте код и вставьте его в блок T123 в конец страницы

Настройки модификации

Скорость и тип переходов:

Класс блока с профилем:

+ Настройки стилей

Сообщения об ошибке

Индикаторы загрузки

Цвет скелета загрузки

Цвет фона сообщения

Бордер сообщения

Радиус скругления

Цвет текста сообщения

Стиль текста

Цвет «заглушки», которая отображается вместо основного контента на время загрузки данных.

<!--members.js Своя страница профиля в Zero-блоке. https://postnikovmd.com/mods/members/profile-->
<script>members.profile(".uc-profile")</script>

Скопировать код

Особенности

Работает с любой версткой

Страницу можно оформить без ограничений по вёрстке
Синхронизирует данные профиля

Подгружает данные пользователя в элементы Zero-блока
Поддерживает все стандартные поля

Работает со всеми доступными в личном кабинете полями