Профиль пользователя личного кабинета в Zero-блоке

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

Инструкция:

Создайте Zero-блок.
Добавьте туда Shape для аватарки и задайте ему класс user-pic. Загрузите в качестве фонового изображения картинку, которая будет отображаться для пользователей, не загрузивших аватарку. Если не хотите отображать аватар в Zero-блоке, удалите из скрипта строки, в которых есть переменная picElement.
Добавьте текстовый элемент для отображения Email пользователя. Задайте ему класс user-email.
То же самое проделайте с текстовым элементом для отображения имени. Класс user-name. Вы можете указать в настройках модификации имя, которое будет отображаться для пользователей, которые его не задали, например «Анонимус».
Единственное, что необходимо изменить в форме ниже — это ID вашего Zero-блока. Остальные параметры по-желанию. Так, например, вы можете выбрать собственную картинку (куда грузить картинки и как получать ссылки на них, читайте тут) для незалогиненных пользователей (если Zero-блок будет размещаться в открытой части сайта) и свои классы для элементов.
Скопируйте получившийся код и вставьте его в блок T123. Сам блок разместите под Zero-блоком.

Посмотрите пример, чтобы понять, как работает модификация. Сработает только, если вы войдёте в свой профиль.

<!-- Профиль пользователя личного кабинета в Zero-блоке | https://necodim.ru/tilda/profile-in-zero --> <script> document.querySelector('#rec579920763 .t396__artboard').addEventListener('artBoardRendered', function() {
    const emailElement = document.querySelector('.user-email .tn-atom');
    const nameElement = document.querySelector('.user-name .tn-atom');
    const picElement = document.querySelector('.user-pic .tn-atom');
    const projectId = parseInt(document.querySelector('#allrecords').dataset.tildaProjectId);
    const lsUser = window.localStorage.getItem('tilda_members_profile' + projectId);
    if (lsUser != null) {
        const user = JSON.parse(lsUser);
        emailElement.innerHTML = user.login;
        nameElement.innerHTML = !!user.name ? user.name : 'Имя не указано';
        if (!!user.memberlogo) {
            picElement.dataset.original = user.memberlogo;
            picElement.style.backgroundImage = `url(${user.memberlogo})`;
        } else {
            picElement.dataset.original = 'https://static.tildacdn.com/tild3565-3233-4131-b338-376232636638/auth.svg';
            picElement.style.backgroundImage = 'url(https://static.tildacdn.com/tild3565-3233-4131-b338-376232636638/auth.svg)';
        }
    } else {
        emailElement.innerHTML = 'Ошибка';
        nameElement.innerHTML = 'Вы не авторизованы';
        picElement.dataset.original = 'https://static.tildacdn.com/tild3565-3233-4131-b338-376232636638/auth.svg';
        picElement.style.backgroundImage = 'url(https://static.tildacdn.com/tild3565-3233-4131-b338-376232636638/auth.svg)';
    }
});
</script>