Разработка личного кабинета для "Города фотографов"

Хотите увидеть самый крутой ЛК во всём геткурсе? Тогда вы попали по адресу))

Этот проект поразил даже моё искушенное воображение. В нём всё не так, как привыкли мы — не побоюсь этого слова, типичные геткурсоводы)

А получилось так, потому что заказчик, который обратился ко мне за разработкой, переехал на геткурс с собственной платформы, которая, как я предполагаю, была сделана вообще с нуля под его задачи. И после миграции на геткурс, заказчик решил, что было бы неплохо пересобрать дизайн старого ЛК внутри геткурса :)

«‎Все знают, что это невозможно. Но вот приходит невежда, которому это неизвестно — он-то и делает открытие.» — Альберт Эйнштейн

В общем, сказано - сделано) Хотя, должен признаться, что не всё получилось перенести на ГК в точности так же, как это было на старом сайте заказчика, т.к. мы ограничены возможностями ГК. И поэтому где-то пришлось пойти на компромиссы. Но, несмотря на это, перенести получилось почти всё.

Вряд ли кто-то когда-то догадается, что под капотом у этого минималистичного ЛК скрывается геткурс.

Первое, на что вы, скорее всего, обратили внимание — это огромное боковое меню, которое видно практически на всех страницах. Поэтому давайте о нём и поговорим.

Левое меню

Переделывать стандартное геткурсовское меню не было никакого смысла, т.к. новое меню не имеет ничего общего с ним. Поэтому было решено полностью скрыть стандартное меню от учеников (сотрудникам и админам оно, конечно, показывается, иначе они бы не смогли нормально работать).

Новое боковое меню было свёрстано с нуля, и с помощью специального скрипта добавляется на все страницы, где показывалось бы стандартное.

В основном меню состоит из простых ссылок на разные разделы ЛК. Но некоторые ссылки, показываются по сегменту. Например, там есть разные виды оранжевых кнопок: для тех, кто купил; для тех, кто подписался на чат в телеграм; тех, кто не подписался т.п... Каждый пользователь видит только то, что предназначено для него.

Страница курсов

Страница курсов тоже сильно отличалась от стандартной, поэтому я делал её через редактор страниц сайта. Т.е. я не стал переделывать геткурсовскую страницу тренингов, хотя так тоже можно было бы. Но выбор в пользу обычной страницы для создания списка тренингов был сделан, потому что так сайт грузится быстрее, и меньше "морганий" экрана, при загрузке. На стандартной странице тренингов просто поставили редирект для учеников на кастомный список курсов.

Сам список курсов сделан через стандартный блок "Плитка", просто застилизован по-другому.

Каждая карточка курса контролируется скриптом, и меняет свой вид в зависимости от того, в каком сегменте пользователь. Некоторые карточки показываются доступными, другие недоступными, третьи, как недоступные, но с кнопкой плей (нажав на такую карточку можно посмотреть трейлер курса).

Страница отдельного курса

В этом проекте очень разные курсы, некоторые состоят из нескольких уроков, другие из одного, поэтому страницы тренингов очень отличаются друг от друга. Все варианты не покажу, но вот пример страницы тренинга с несколькими уроками.

Эта страница тоже сделана через новый конструктор, т.е. на реальной странице тренинга просто стоит редирект сюда.

В самом верху этой страницы находится список уроков. Это реальный стандартный, но застилизованный блок "Список уроков", в который подтягиваются уроки нужного тренинга. Все статусы уроков проработаны, и карточки уроков меняют свой вид, когда у урока изменяется статус (например, на скриншоте первый урок оранжевый, потому что он принят).

Дальше идут блоки "Файлы" и "Картинки плиткой", внешний вид которых тоже был изменён в соответствии с дизайн-макетом.

Страница урока

В этом проекте есть разные типы уроков, думаю, все показывать смысла нет, т.к. общий принцип и стиль у них примерно одинаковый. Вот так, например, выглядит один из уроков с тестированием в качестве задания.

Это уже, кстати, настоящая (стандартная) страница урока, стили которой переписаны до неузнаваемости. Чтобы это провернуть, для этой страницы было написано 1220 строк кода :) Пришлось сделать так, потому что в геткурсе только в уроках можно создавать задания, которые будут попадать в Ленту ответов.

Кстати, стили и скрипты уроков я сделал на отдельной странице сайта, которая встраивается в урок через блок "Другая страница". По моим наблюдениям, так код запускается быстрее всего, к тому же очень удобно править стили и скрипты всех страниц в одном месте.

Страница задания

Да, в проекте "Город фотографов", кроме простых уроков, есть страница задания.

Это, кстати, довольно интересная идея, и я никогда не видел раньше, чтобы кто-то так делал в геткурсе. Смысл в том, что когда ученики проходят какой-нибудь курс, кроме простых уроков им даются "Домашние задания". Эти домашние задания по своей сущности, конечно, тоже уроки, но их нет в тренингах, которые видят ученики. Эти домашние задания меняются каждую неделю, условно, но всегда остаются на виду в левом меню. Нажав на кнопку "Задания", человек всегда попадает на страницу актуального ДЗ, которое ему нужно выполнить.

Подкасты

В проекте "Город фотографов" регулярно выходят подкасты, и для них сделана отдельная страница и кнопка в боковом меню.

Сначала, я делал так, чтобы на этой странице каждая плитка представляла из себя плеер. Но потом понадобилось получать обратную связь от учеников, которые прослушали подкаст. Поэтому подкасты переехали в уроки, в которых ученики могут "подвести итог" прослушивания подкаста.

Кстати, плеер полностью кастомный, его код я писал сам, чтобы он соответствовал дизайн-макету. По-моему, получилось круто, очень горжусь проделанной работой))

Страница методичек

Методички — это по сути книги для самостоятельного изучения. Для них тоже сделана отдельная страничка, на которой методички показываются по сегменту.
Если книга недоступна, то она тоже показывается, но с замочком, открыть её нельзя.

Каждая методичка представляет из себя PDF-файл, который встроен в урок. Т.е. читать книгу можно прям там, не скачивая её на компьютер.

Страница вебинара

Со стилизацией стандартной страницы вебинара пришлось помучаться, потому что её вёрстка оставляет желать лучшего, но в итоге всё получилось. В целом, структура страницы вебинара осталась неизменной: слева видео, справа чат. Но она теперь выглядит намного лаконичнее и, самое главное, в стиле остального сайта.

Отличительной особенностью этой страницы стало боковое меню, которое по умолчанию скрыто, и выдвигается по клику на кнопку "Меню" (внизу слева).

Страница прогресса

Как вы уже догадались, на этой странице ученики могут отслеживать свой прогресс обучения. Но это не то, к чему мы с вами привыкли.

Тут несколько шкал прогресса, каждая из которых привязана к определённой неделе. Каждую неделю ученикам открывается новая шкала.

Эти шкалы состоят из точек (их может быть от 2 до 6 в неделе), и каждая из них может соответствовать уроку, вебинару, подкасту или методичке. Т.е. это могут быть разные сущности, поэтому у каждой точки свой определённый значок. Но внутри ГК это всё — уроки. Причём они все находятся в разных тренингах и комбинируются в этой шкале экспертами в том порядке, в котором их удобнее и интереснее было бы проходить.

И, конечно, как обычно у всех уроков есть разные статусы "открыт", "закрыт", "пройден" и т.п. Именно на этих статусах и основаны шкалы прогресса. Пока урок закрыт - точка бледная, открылся - становится ярче, пройденный отмечается галочкой.

Но мы добавили ещё один необычный статус "актуальный" — это последний доступный урок, и он светится белым.

Вся эта страница прогресса полностью самописная. Тут работает скрипт, который сканирует статусы уроков, входящих в этот прогресс, и затем приводит внешний вид точек на шкале, в соответствии статусу урока.

Вместо заключения

Мне понравилось работать над этим проектом. И хотя сроки были ооочень сжатыми, было всё равно интересно и необычно. Вообще, я люблю сложные задачи, они дают огромный опыт, который нереально получить занимаясь чем-то уже простым и понятными.

Я на 100% доволен результатом, и сейчас с тем же заказчиком начинаю новый проект по кастомизации другого ЛК. Но это совсем другая история...

Кстати, ребята из продюсерского бюро solnyshko123.online, которые подарили мне возможность работать в таком классном проекте, всегда в поиске крутых техспецов по геткурсу и не только. Поэтому, если вы полны энтузиазма и уверены в своих силах, можете писать Ярославу @mefart 😊