URL скопирован в буфер обмена!
Как сделать личный кабинет пользователя на Zero Block
С помощью этой модификации можно сделать профиль пользователя на Zero Block. Модификация поможет настроить обращение к пользователю по имени, вывод почты и аватара пользователя в зеро блок, а также добавить свои кнопки "Выход", "Смена пароля", "Редактировать профиль".
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
ID Zero Block
Имя пользователя без авториз.
Почта пользователя без авториз.
Количетсво символов
Стандартная иконка ЛК
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --><!--TCD000--><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>
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 должен быть ниже зеро блока;
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 должен быть ниже зеро блока;
