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

P.S. Кстати, обратите внимание на фильтры карточек 😉👇🏻

Более детально можно рассмотреть на Гугл-диске

По многочисленным просьбам для "Контроля кураторов" добавил выборку по времени в Шкале достижений 🙌🏻

Это значит, что теперь можно посмотреть сколько действий сделал куратор за определённый период 😊

Контроль скорости обработки ответа куратором ⏱

Ещё одна модификация скрипта для контроля кураторов, которая записывает в таблицу шкалы достижений длительность времени, которое прошло с момента отправки пользователем ответа на ДЗ, до момента принятия этого ДЗ куратором.

При этом учитывается рабочее время кураторов. Т.е. нерабочее время не считается задержкой ответа.

Опционально можно записывать в таблицу только те ответы, которые превысили максимально допустимую задержку ответа.

На скриншоте в одной колонке записана дата ответа пользователя, в другой записывается дата принятия ДЗ куратором.

Скриншоты одного из недавних проектов (все сделано на геткурсе):
https://drive.google.com/drive/folders/16Zyh3sSIn0yjV6sLHuFOEGPUmPJ8gRJZ?usp=sharing

Чуть позже пройдусь по некоторым интересным моментам, которые вы можете найти на скриншотах уже сейчас. А пока пишите в комменты, что вас заинтересовало больше всего? 😊

Страница с фильтрами карточек
https://drive.google.com/file/d/1sBQMAhP9UglmZ5gdX8yQBLA-15bWBt0d/view?usp=sharing

Начнём с самого вкусного) Давайте разберёмся, как же этот фильтр работает 😊

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

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

Фильтры - это полностью кастомный блок, которому нет никаких аналогов в геткурсе, т.е. тут только HTML, CSS и JS.

Фильтр сделан довольно хитро) Если посмотреть на страницу в режиме редактирования, то там будет только одна карточка тренировки (кстати, это обычный блок плиток). Эта карточка в просмотре страницы дублируется скриптом столько раз сколько нужно, и каждая копия карточки заполняется определённой информацией.

Эта информация о карточках (т.е. их содержимое), которой оперирует скрипт, храниться в отдельном JS-блоке на странице в формате JSON (см. 2ой скрин). Так было сделано, чтобы:

— Ускорить работу страницы. Если бы все карточки были заранее добавлены на страницу, то, во-первых, она бы долго грузилась, а, во-вторых, фильтрация скриптом по содержимому карточек работала бы слишком медленно. Т.к. скрипту пришлось бы парсить содержимое каждой карточки перед фильтрацией, а их может быть сотни. И поэтому был выбран формат JSON, который позволяет хранить данные в человекопонятной форме, но, при этом, является готовым массивом данных для работы скрипта фильтрации.

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

Ниже фильтров есть ещё блок сортировки, и тут скрипт использует тот же JSON, чтобы выводить карточки в нужном порядке.

Блок расписания
https://drive.google.com/file/d/11Irb1sNypvm46DCTEYoWqmJTJRkMLr_U/view?usp=sharing

Этот блок было реализовать даже сложнее, чем "Фильтры"))

Дело в том, что в этой школе события реализованы через геткурсовский функционал блога. Каждое событие — это публикация в блоге.

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

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

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

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

Карточки событий тут умные)) Когда трансляция события начинается, то вместо кнопки "Записаться" показывается кнопка "Войти". При этом, запись на событие и сама трансляция происходит НЕ на странице публикации блога, а во всплывающем блоке. Вся информация в этот блок подтягивается автоматически со страницы блога. Т.е. по факту пользователи никогда не попадают в сам геткурсовский блог, тут он используется только для администратирования.

⏰ Запись времени входа и выхода пользователя на вебинаре в геткурсе

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

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

Кстати, в моей коллекции уже есть кейс на ту же тему:
Передача комментариев с вебинара в доп поле пользователя

Друзья! У меня появился сайт dmitryspace.com

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

P.S. Да, всё это можно реализовать и на геткурсе 😉