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

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

Инструкция:
  1. Создайте Zero-блок.
  2. Добавьте туда Shape для аватарки и задайте ему класс user-pic. Загрузите в качестве фонового изображения картинку, которая будет отображаться для пользователей, не загрузивших аватарку. Если не хотите отображать аватар в Zero-блоке, удалите из скрипта строки, в которых есть переменная picElement.
  3. Добавьте текстовый элемент для отображения Email пользователя. Задайте ему класс user-email.
  4. То же самое проделайте с текстовым элементом для отображения имени. Класс user-name.
  5. Единственное, что необходимо изменить в форме ниже — это ID вашего Zero-блока. Остальные параметры по-желанию. Так, например, вы можете выбрать собственную картинку (куда грузить картинки и как получать ссылки на них, читайте тут) для незалогиненных пользователей (если Zero-блок будет размещаться в открытой части сайта) и свои классы для элементов.
  6. Скопируйте получившийся код и вставьте его в блок 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 !== undefined && user.name !== '' ? user.name : 'Имя не указано';
        picElement.dataset.original = user.memberlogo;
        picElement.style.backgroundImage = `url(${user.memberlogo})`;
    } 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>
Смотрите также
Пример работы модификации
Войдите в личный кабинет, чтобы увидеть результат
Имя
Email
Made on
Tilda