Привет друзья! По вашим советам сделал канал, в котором буду выкладывать описания скриптов, которые я делал, сообщать об обновлениях и делиться разными фишками. Welcome! 🤗

Как вы, наверное, уже знаете, многие мои скрипты вы можете найти в Магазине скриптов на сайте GetHelpers.ru/scripts. Чуть позже я расскажу про некоторые из них более подробно.

А пока, вот что есть в магазине:
1. Кнопки WhatsApp и Viber в карточке пользователя
2. Персональная переадресация пользователей
3. Показ страницы оплаты сразу под формой (для вебинара)
4. Прогресс-бар с количеством пройденных уроков
5. Отображение результатов после тестирования
6. Кнопка для связи по WhatsApp для сайта
7. Виджет GC-чата для любого сайта
8. Скрипт для кнопки: Добавляет событие в календарь Google
9. Скрипт для проверки заполненности полей Виджета
10. Диаграмма отражающая количество пройденных уроков
11. Диаграмма отражающая кол-во оставшихся дней доступа к тренингу
12. Прогресс-бар для тренинга с редактируемыми этапами
13. Передача GET параметров из URL в поля формы
14. Доступ в урок по паролю

Но есть и более сложные скрипты, которые пишутся индивидуально под каждый проект.

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

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

Выход был найден в получении списка пользователей через GetCourse API. Скрипт на стороннем сервере через API периодически сканирует группу на наличие новых участников и добавляет найденных в базу данных на сервере.

А при загрузке страницы со списком фотографов, данные пользователей из этой базы с помощью JavaScript'a переносятся на страницу в соответствующие блоки.

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

Как это все выглядит, можно посмотреть тут: https://karneeva.online/photographers

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

Что было изменено:

1. В боковом меню скрываются все стандартные значки. Вместо них добавляются новые, причём с подписями.

2. Боковое меню стало шире. Поэтому пришлось сдвигать контент всех страниц правее, чтобы меню его не перекрывало.

3. Добавилось верхнее меню. Код этого меню полностью самописный, т.е. никакие стандартные блоки геткурса не использовались.

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

5. Количество новых уведомлений показывается около значка колокольчика в верхнем меню.

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

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

6. При нажатии на аватарку появляется выпадающее меню. Это меню тоже полностью самописное. Показ и скрытие этого меню происходит через JavaScript.

7. Стандартные страницы Профиль и Chatium пришлось изменить, чтобы кастомное меню отображалось на эти страницах тоже.

8. Добавлена возможность скрытия кастомного меню от админов и сотрудников аккаунта.

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

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

Другим интересным моментом в этом проекте было создание дорожных карт, а если точнее, создание самой "дороги".

Видно, задачу создать дорожную карту дизайнер понял буквально, и решил нарисовать настоящую асфальтированную дорогу с разметкой 😂

Загвоздка в том, что такую дорогу очень сложно изобразить на сайте, если не использовать картинки. Но в этом случае вариант с картинкой не прокатывал по трём причинам:

1. Одна из дорожных карт была настолько длинной, что занимала аж 4 экрана. А как мы с вами знаем, большие картинки могут сильно тормозить страницы.

2. Картинка не адаптивна. Она не может просто так растягиваться под разные разрешения экрана, не портя при этом вёрстку страницы.

3. Я бы был не я, если бы не заморочился созданием адаптивной дороги 😂

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

Зато на "полноэкранных" девайсах эта дорога растягивается по ширине под нужный размер.

Сама дорога нарисована обычными <div> блоками, а точнее границами эти блоков. Пришлось вставить пару блоков один в другой и использовать псевдоэлементы :after и :before, чтобы сделать 4-х ярусную границу.

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

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

Ну, и специально для тех, кто находит в себе силы читать мои длинные посты, я приготовил бонус - код этой самой дороги. Можете посмотреть, как она устроена изнутри и что-то подчерпнуть для себя 😌🙏🏻
#геймификация

Перенос уроков на другую дату

Сделали прикольный функционал в одном и проектов - перенос уроков на другую дату.

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

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

Автоматическое распределение менеджеров на заказы

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

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

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

Очень просто - делаем бота-админа)) С помощью PHP-кода, который лежит на стороннем сервере, можно подключиться к геткурсу в качестве админа (залогиниться в админском аккаунте), и тогда мы сможем делать всё то, что может и сам админ. И, конечно же, в коде мы можем автоматизировать любые действия.

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

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

Всем привет!

Пока копался в аккаунте клиента, увидел странное. Стоит скрипт, помещающий кнопки WhatsApp/Viber рядом с номером телефона в боковой панели, но при этом в счетчиках и скриптах... пусто. Куда еще могли это засунуть, чтобы применилось общесистемно?

❗️Важный факт о поле «Счётчики и прочие скрипты», о котором мало кто знает

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

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

А всё дело в том, что геткурс не отображает вписанные в это поле скрипты, если они слишком длинные.

Поэтому, чтобы случайно не потерять скрипты, которые находятся в поле «Счётчики и прочие скрипты», храните их в отдельном файле 😌🙏🏻

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

Я тут случайно нашёл способ, сделать приятное скругление. Нужно прописать атрибут stroke-linecap="round" в элементе с классом donut-segment.

Вот так:
<circle class="donut-segment" stroke-linecap="round" cx="21" cy="21" r="16">