Как сделать личный кабинет пользователя на Zero Block

С помощью этой модификации можно сделать профиль пользователя на Zero Block. Модификация поможет настроить обращение к пользователю по имени, вывод почты и аватара пользователя в зеро блок, а также добавить свои кнопки "Выход", "Смена пароля", "Редактировать профиль".

Модификация работает с включенным Autoscale в блоках

Модификация работает только с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

ID Zero Block

Имя пользователя без авториз.

Почта пользователя без авториз.

Количество символов

Стандартная иконка ЛК

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<script> (function() { document.addEventListener('DOMContentLoaded', async function() { const TCDdata = []; try { const TCDID = parseInt(document.querySelector('#allrecords').dataset.tildaProjectId); const TCDMember = await getUserData(TCDID); ['#rec747242104 .ti-email', '#rec747242104 .ti-name', '#rec747242104 .ti-pic'].forEach(selector => { const TiCodeData = Array.from(document.querySelectorAll(selector + ' .tn-atom')); TCDdata.push(TiCodeData); }); if (TCDdata.length > 0) { if (TCDdata[0].length > 0) { TCDdata[0].forEach(element => { element.innerHTML = TCDMember ? TCDtruncateText(TCDMember.login, 30) : 'Вы не авторизованы'; }); } if (TCDdata[1].length > 0) { TCDdata[1].forEach(element => { element.innerHTML = TCDMember && TCDMember.name ? TCDtruncateText(TCDMember.name, 30) : 'Инкогнито'; }); } if (TCDdata[2].length > 0) { TCDdata[2].forEach(element => { const TiLk = element; if (TCDMember) { const TCDLogo = new Image(); TCDLogo.onload = function() { TiLk.dataset.original = TCDMember.memberlogo; TiLk.style.backgroundImage = `url(${TCDMember.memberlogo})`; }; TCDLogo.src = TCDMember.memberlogo; } }); } } } catch (error) { console.error('Ошибка при загрузке данных:', error); } }); async function getUserData(TCDID) { return new Promise((resolve, reject) => { try { const TCDMember = window.localStorage.getItem('tilda_members_profile' + TCDID); resolve(TCDMember ? JSON.parse(TCDMember) : null); } catch (error) { reject(error); } }); } function TCDtruncateText(text, maxLength) { return text.length > maxLength ? text.substring(0, maxLength) + '...' : text; } function TiCkil(selector) { var element = document.querySelector(selector); if (element) { element.click(); } } document.addEventListener("DOMContentLoaded", function() { function TiCkil(selector) { var element = document.querySelector(selector); if (element) { element.click(); } } setTimeout(function() { TiCkil('.tlk-userbar__user-image'); }, 500); var TcPassButton = document.querySelector('#rec747242104 a[href="#tc-pass"]'); if (TcPassButton) { TcPassButton.addEventListener("click", function(event) { TiCkil('.tlk-userbar__user-image'); TiCkil('.tlk-userbar__popup-edit-profile.tlk-btn_reset'); TiCkil('.tlk-popup__change-password.tlk-btn_reset'); TiCkil('.tlk-popup__close.tlk-btn_reset'); }); } var TcEditButton = document.querySelector('#rec747242104 a[href="#tc-edit"]'); if (TcEditButton) { TcEditButton.addEventListener("click", function(event) { TiCkil('.tlk-userbar__user-image'); TiCkil('.tlk-userbar__popup-edit-profile.tlk-btn_reset'); }); } var TcLogoutButton = document.querySelector('#rec747242104 a[href="#tc-logout"]'); if (TcLogoutButton) { TcLogoutButton.addEventListener("click", function(event) { TiCkil('.tlk-userbar__user-image'); TiCkil('.tlk-userbar__popup-logout.tlk-btn_reset'); }); } }); })(); </script> <style>.tlk-userbar, .tlk__userbar {display: none !important;}</style>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем в Zero Block текстовые элементы и указываем им классы:
ti-name - класс для текстового элемента в который будем подтягивать имя авторизованного пользователя.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

ti-email - класс для текстового элемента в который будет подтягивать почту авторизованного пользователя.
При необходимости создаем шейп с классом ti-pic - для того чтобы в этот шейп подтягивался аватар пользователя. В шейп загружаем картинку которую нужно показывать в случае если пользователь не установил аватар.

2. При необходимости создаем в зеро блоке свои кнопки "выход", "редактировать профиль", "сменить пароль". Для этого создаем кнопки(в качестве кнопок также можно использовать текст, шейп или картинку) и указываем им ссылки:
#tc-pass - ссылка для кнопки при клике на которую открываем окно для смены пароля;
#tc-edit - ссылка для кнопки при клике на которую открываем окно редактирования пользователя;
#tc-logout - ссылка для выхода из профиля пользователя.

3. Копируем id зеро блок и вставляем в генератор кода в поле "ID Zero Block". Дополнительно можно настроить другие опции в генераторе:
Количество символов - можно указать количество символов для текста Имя и Почта. Если пользователь указал длинное имя или почту, то будет показана только часть данных, а продолжение будет скрыто за многоточием.
Стандартная иконка ЛК - можно скрыть стандартную иконку личного профиля которая обычно находится в правом верхнем углу сайта.

4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть ниже зеро блока;

Смотреть пример ЛК