Кейсы
July 22, 2021

Верхнее меню с диаграммой прохождения тренинга

На самом деле, в этом проекте используется сразу два меню: стандартное левое меню и кастомное верхнее. И как раз о последнем я хочу рассказать в этой статье.

Скриншот фрагмента страницы с верхним меню

Описание элементов меню

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

Твой куратор — имя куратора, который закреплён за текущим пользователем в геткурсе. При нажатии на имя, открывается Telegram-чат с этим куратором.

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

Кнопки слева — это просто ссылки на обычные страницы.

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