Разработка ЛК для проекта Emotion-fit
Скриншоты в хорошем качестве можно посмотреть тут:
https://drive.google.com/drive/folders/16Zyh3sSIn0yjV6sLHuFOEGPUmPJ8gRJZ?usp=sharing
В этом проекте было проделано так много работы, что можно книгу писать) Но т.к. у меня всего лишь скромный блог, расскажу только про самые интересные странички 😊
Лендинг
Лендинг, в целом, типичный. Единственное что, на мой взгляд, необычное и интересное в нём — это слайдер на первом экране.
Чтобы сделать этот блок слайдера, пришлось помучиться со стилями и скриптами. Потому что у меня принцип — использовать как можно меньше HTML-кода. Вместо этого я по максимуму делаю всё из стандартных блоков, если это возможно. Это нужно для того, чтобы заказчикам было потом проще заменять картинки в этих блоках, текст, цвет текста и прочее.
Но, т.к. в геткурсе выбор блоков (и настроек в них) не велик, приходится дописывать много дополнительных стилей и скриптов.
Если вы знаете, как выглядят блоки в геткурсе, то вы, вероятно, удивитесь, узнав, что этот слайдер был сделан из блока "Плитка" 😁
Фильтр карточек
https://drive.google.com/file/d/1sBQMAhP9UglmZ5gdX8yQBLA-15bWBt0d/view?usp=sharing
Тут уже поинтереснее 😊
На этой странице сделано несколько разных фильтров, и вот, как они работают:
Кружочки сверху — это слайдер с кнопками, которые через скрипт переключают фильтр "Вид спорта". По сути эти кнопки просто дублируют тот фильтр, который находится ниже, просто выглядит по-другому. Сделано это было, чтобы пользователи могли в один клик выбрать свой вид спорта.
Кроме того, была задача сделать ссылки на каждый вид спорта, по которым открывается эта страница с заранее настроенным фильтром на определённый вид спорта. Поэтому, чтобы не делать кучу копий страниц, было решено сделать ссылки с метками, в которых прописан вид спорта. Скрипт подхватывает эти метки, при загрузке страницы, и сразу активирует нужный фильтр.
Фильтры — это полностью кастомный блок, которому нет никаких аналогов в геткурсе, т.е. тут только HTML, CSS и JS.
Фильтр сделан довольно хитро. Если посмотреть на страницу в режиме редактирования, то там будет только одна карточка тренировки (кстати, тут используется тоже обычный блок "Плитка"). Эта единственная карточка, при просмотре страницы, дублируется скриптом столько раз сколько нужно, и каждая копия карточки заполняется определённой информацией.
Эта информация о карточках (их содержимое), которой оперирует скрипт, храниться в отдельном JS-блоке на странице в формате JSON (см. скрин). Так было сделано, чтобы:
- Ускорить работу страницы. Если бы все карточки были заранее добавлены на страницу, то, во-первых, она бы долго грузилась, а, во-вторых, фильтрация скриптом по содержимому карточек работала бы слишком медленно. Т.к. скрипту пришлось бы парсить содержимое каждой карточки перед фильтрацией, а их может быть сотни. И поэтому был выбран формат JSON, который позволяет хранить данные в человекопонятной форме, но, при этом, является готовым массивом данных для работы скрипта фильтрации.
- Обойтись без хостинга. В идеальном мире у нас бы была база данных с этими карточками, но т.к. в геткурсе нет баз данных, которыми мы можем оперировать, а внешнюю базу данных делать слишком накладно, было решено использовать JSON для хранения этих данных.
Кстати, чуть ниже фильтров есть ещё блок сортировки, и тут скрипт использует тот же JSON, чтобы выводить карточки в нужном порядке.
Блок расписания
https://drive.google.com/file/d/11Irb1sNypvm46DCTEYoWqmJTJRkMLr_U/view?usp=sharing
Реализовать этот блок было даже сложнее, чем "Фильтры" 😁
Дело в том, что в этой онлайн-школе события реализованы через геткурсовский функционал блога. Каждое событие — это публикация в блоге.
С одной стороны это удобно, т.к. у записей блога можно установить дату окончания публикации, после которой событие само будет удаляться из расписания, с другой — это создаёт дополнительные проблемы, когда нужно фильтровать и выводить подробную информацию об этих событиях в красивом виде))
Здесь я сделал так, чтобы записи блога выводились в мой любимый блок "Плитка" (да, такая возможность у геткурса есть по умолчанию). Но т.к. этот блок не реально стилизовать так, как задумывал дизайнер, "Плитка" парсится скриптом, с целью выцепить из каждой карточки информацию о тренере, виде тренировки, дате и времени начала, названии и, конечно, ссылки на это событие. А затем, используя эту информацию, скрипт генерирует новые карточки в другом блоке и с другим дизайном, а изначальный блок-донор просто скрывается за ненадобностью.
Далее, по функционалу.
Как работают верхние кружочки (см. полный скрин по гугл-ссылке) я уже рассказывал в блоке про фильтры, тут у них аналогичная функция: при выборе типа тренировки, в расписании показываются тренировки только этого типа, а остальные скрываются.
Кнопки дней недели — это слайдер со сслайдами в виде простых кнопок, которые проматывают расписание к определённому дню. Так же, как и карточки событий, эти кнопки генерируются скриптом автоматически, исходя из дат имеющихся событий.
Карточки событий тут умные)) Когда трансляция события начинается, то вместо кнопки "Записаться" показывается кнопка "Войти". При этом, запись на событие и сама трансляция происходит НЕ на странице публикации блога, а во всплывающем блоке. А вся информация в этот блок подтягивается автоматически со страницы блога. Т.е. по факту пользователи никогда не попадают в сам геткурсовский блог, тут он используется только для администрирования.
Карточки тренировок
https://drive.google.com/file/d/1ntsdz8f2pqtwD9w6JFlulMihrorqZRJr/view?usp=sharing
Эта страница, в сущности, как "Урок" в геткурсе. И хотя эти карточки тренировок по запросу заказчика были реализованы через "Страницы сайта", то же самое можно было сделать и через обычные "Уроки".
В начале страницы идёт видео с записью тренировки и блок "Необходимо для тренировки", который администраторы заполняют сами, под каждую тренировку отдельно. Но, думаю, с этими блоками, всё ясно))
Следующий значимый блок — это блок "2 колонки", в левой части находятся видеозапись каждого упражнения, которое входит в тренировку, отдельно (сорри, когда делал скрин, у заказчика ещё не было видосов, поэтому на скриншоте стоят повторяющиеся картинки), а в правой части видео тренера и информация о нём.
И, наконец, ниже идёт блок-слайдер с похожими или связанными тренировками, чтобы пользователи могли легко продолжить тренироваться, не возвращаясь к длинному списку тренировок.
Вроде, всё самое интересное показал. Надеюсь, после прочтения у вас сложилось чёткое понимание того, что на геткурсе можно сделать абсолютно любые страницы. Как говориться: "Главное — уметь!" 😊