Как вывести купленные курсы в личный кабинет пользователя на Tilda?

С помощью этой модификации можно приобретённые пользователем курсы на странице в формате карточек. Дополнительно можно добавить собственные обложки для курсов и ссылку на покупку новых. Работает с блоками ST305N и ST310N

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

Модификация работает только со стандартным блоком

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

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

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

id блока

Тип блока

Ссылки на обложки курсов

Начальная карточка

Обложка начальной карточки

войти

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

регистрация

оплатить

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

<script> document.addEventListener("DOMContentLoaded", async function () { async function TiCodeCurse() { try { const TCDID = parseInt(document.querySelector('#allrecords').dataset.tildaProjectId); const TCDdata = window.localStorage.getItem('tilda_members_profile' + TCDID); return TCDdata ? JSON.parse(TCDdata) : {}; } catch (error) { return {}; } } const TCDcurse = await TiCodeCurse(); if (!TCDcurse.courses || !Array.isArray(TCDcurse.courses)) { return; } const TCDcourseImage = "course342785335231 https://static.tildacdn.one/tild6139-6765-4533-b538-356239373937/img1.svg"; const TCDcourseImageMap = TCDcourseImage.split(',').reduce((acc, item) => { const [alias, url] = item.trim().split(' '); if (alias && url) acc[alias] = url; return acc; }, {}); const TCDcataloge = document.querySelector("#rec887769817 .t776__parent"); if (!TCDcataloge) { return; } let TCDDefaultCard = document.querySelector("#rec887769817 .t776__col.js-product"); if (!TCDDefaultCard) { return; } const TiMovetCard = true; TCDDefaultCard.style.display = 'none'; TCDcurse.courses.forEach(course => { const TiCard = TCDDefaultCard.cloneNode(true); TiCard.style.display = 'block'; TiCard.setAttribute("data-product-lid", course.alias); TiCard.querySelector(".js-product-name").textContent = course.name; TiCard.querySelector(".js-product-link").href = `/members/courses/${course.alias}`; const TCDcurselink = TiCard.querySelector(".t776__btn"); TCDcurselink.href = `/${course.alias}`; const Ticurseimg = TCDcourseImageMap[course.alias]; if (Ticurseimg) { const TCDimgWrapper = TiCard.querySelector(".t776__bgimg"); setTimeout(() => { TCDimgWrapper.style.backgroundImage = "none"; setTimeout(() => { TCDimgWrapper.style.backgroundImage = `url(${Ticurseimg})`; }, 1000); }, 500); } else { } TCDcataloge.appendChild(TiCard); }); if (TiMovetCard) { const TCmovedCard = TCDDefaultCard.cloneNode(true); TCmovedCard.style.display = 'block'; const TCDimgWrapper = TCmovedCard.querySelector(".t776__bgimg"); if (TCDimgWrapper) { setTimeout(() => { TCDimgWrapper.style.backgroundImage = "none"; setTimeout(() => { TCDimgWrapper.style.backgroundImage = "url(https://static.tildacdn.one/tild6139-6765-4533-b538-356239373937/img1.svg)"; }, 1000); }, 500); } TCDcataloge.appendChild(TCmovedCard); } }); </script> <style> #rec887769817 .t776__parent { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; } #rec887769817 .t776__btn-wrapper { padding-bottom: 40px !important; } #rec887769817 .t776__col { margin-bottom: 0px !important; } </style> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

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

1. Создаем личный кабинет и курс в Тильде;

2. Создаем страницу и добавляем блок магазина ST305N или ST310N. Копируем id и вставляем в генератор в поле "id блока" В поле "тип блока" выбираем блок который создали.

3. Удаляем в блоке магазина все карточки. Создаем пустую карточку и заполняем её:

Загружаем картинку заглушку (эту картинку будет показывать если не найдет обложку курса или пока обложка грузится. Лучше всего загрузить картинку со словом "Загрузка" или иконкой песочных часов и т. д.);
Заголовок - указываем любой текст если не планируем использовать дефолтную карточку (см. дальше в инструкции п. 4). Или пишем текст по типу "Выбери еще курс"
Кнопка - выбираем тип кнопки "ссылка" и указываем любой текст и ссылку # если не планируем использовать дефолтную карточку (см. дальше в инструкции п. 4). Или указываем текст по типу "Выбрать курс" и указываем ссылку на страницу где продаете курсы;

Должно получиться вот так.
Важно! Не указываем описание и другие настройки в карточке.

3. Указываем ссылку на курс и ссылку на обложку курса в формате ссылка на курс ссылка на картинку. Если курсов несколько, то разделяем запятой и пробелом;
Пример:
course342785335231 https://static.tildacdn.one/tild6139-6765-4533-b538-356239373937/img1.svg, course342226439632 https://static.tildacdn.one/tild6139-6437-4533-b538-356365373937/img1.svg

Ссылку на курс можно найти в Личном кабинете → Курсы → Клик по курсу → Ссылка на курс (копируем только последнюю часть).

Обложки для курсов лучше залить в стандартный блок GL01. Дальше ПКМ по картинке → Копировать ссылку на изображение. Блок галереи скрываем.

4. При необходимости указываем дополнительные настройки в генераторе:
Начальная карточка - если включена, ее будет показывать в конце списка или единственной (если курсов нет). Если выключили, то карточку показывать не будет и в пункте 3 в этой карточке можно указывать любые данные;
Обложка начальной карточки - указываем ссылку, если планируем её показывать;

5. Копируем код и вставляем HTM блок Т123. Блок с кодом размещаем под блоком магазина.

Нейросети для дизайнеров

перейти к курсу

UX/UI дизайн. Основы

перейти к курсу

Хотите пройти больше курсов?

выбрать курс