Аня про Геткурс. Верстка, скрипты и решения

Грусти пост

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

Вынуждена была отменить свое онлайн-участие в Гетц сегодня, потому что просто не вывожу, что происходит.

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

Была уверена, что смогу выдержать и проведу выступление ("Я же сильная!"). Нет, не могу. Поэтому сегодня Гетц без меня.

Я сделаю запись и отдам ее организаторам. Попозже.

"Все будет хорошо" - так же говорят? Будет, да. Мир станет цветным.

Берегите любимых, родных, близких. Прошу, берегите...

Я там буду и вас зову 🌟

Global EdTech Conference 9
(с 22 по 24 октября)

Как некоторые (многие?) из вас знают, в последнее время произошли изменения в инструментарии ГК для разработки фич в учебных кабинетах.

⚙️ Поэтому, поговорим про:

🤓Что такое, где находится, как пользоваться

🤓 Системные примеры, которые уже есть

🤓 Разберем несколько вариантов написания кода под конкретные задачи

Так же спикеры вам расскажут про другие аспекты этого чуда-чудного. Например:

🌟 Как в ближайшем будущем плагины Chatium расширят функциональности аккаунтов GetCourse

🌟 Google-таблицы уходят в прошлое. Создаём собственные базы данных прямо в GetCourse

Раскроем тему от начального до продвинутого уровня!  Global-но 😉 А так же темы про AI, лайфхаки для работы и денег

👉 Купить билет со скидкой 10%

Увидимся на конфе (мое выступление 24 октября, четверг) 💋

🟢 Закрепленное сообщение в чате вебинарной комнаты на Бизон365

Что скрипт умеет?

1️⃣ закрепляет сообщение от админа, которое содержит любую разметку и объем

2️⃣ если админ пишет новый закреп, то сообщение меняется автоматически (старые закрепы не видны)

3️⃣ пользователь видит такое сообщение только в формате закрепа, в списке общих сообщений его нет

4️⃣ при прокрутке закреп остается на месте, сообщения листаются под ним

5️⃣ закреп может появляться при старте вебинара или в процессе его проведения

6️⃣ решение можно поставить на весь аккаунт или только на одну комнату

7️⃣ пользователь может убрать закреп только для себя, при появлении нового сообщения закреп "вернется"

✍️ Для админа процесс создания закрепа выглядит как написание сообщения с добавлением особого слова 🔥

Иными словами. админ сам решает какое сообщение будет в закрепе, а какое пойдет в чат

Цвета блока можно настроить под проект :)

Теперь выводить информацию для общего ознакомления стало еще удобнее 👍

Цена 10тр. Для настройки пишите @araviw

Настройка периодической выгрузки данных в Google Таблицы и обратно в Геткурс

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

Такая связка позволит легко внести массовые изменения на платформу, без ручного экспорта данных и формирования csv файла для импорта. Особенно если это ежедневная рутина 😖

Например:

1️⃣ вы хотите автоматизировать распределение кураторов, чтобы сразу после оплаты назначался куратор. Но само распределение идет вручную сотрудником, кого нет на Геткурсе (или по алгоритмам, которые нельзя автоматизировать) 😨 и продажи тоже постоянные

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

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

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

🌟В сухом остатке 🌟

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

Для настройки пишите в лс @araviw

Цена решения находится в вилке (от 10тр), тк данные в таблицу можно получать по разным объектам и по разным логикам и возвращать тоже в разные объекты, те конечная сложность задачи определит стоимость решения.

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

Немного удивительного рядом

Связано оно с работой переменных, а точнее - с их пересечением 🙃

Что мы имеем: допустим, оформляем аккаунт и будем использовать имя преподавателя* и ссылку, связанную с ним (например, на его телеграм или группу с ним или еще-что). Обе переменные по пользователю.

Как мы вызываем значение допполя, если хотим использовать его? Правильно. через {имя}, те мы ожидаем, что переменная {kurator_url} вернет урл, который указан в карточке пользователя по этому допполю. В то время как переменная {kurator} вернет имя преподавателя.

С ожиданиями все ясно. Как это будет работать❓

Вероятно, не так как ожидается. Система может вам вернуть значение одной переменной по вызову двух разных переменных.

Произойдет это в том случае, если поля идут в таком порядке

{kurator}
{kurator_url}

Сейчас похоже ГК проверяет поле по первому частичному совпадению, отчего и возникает такая ситуация (не является по сути корректной и отписана в ТП).

Как исправить?

1️⃣ переименовать первое поле

2️⃣ поменять поля местами, чтобы сначала шло поле без пересечения

Вот так. Поменьше багов и побольше приятной работы вам всем! 🥰

* в загашнике есть изумительное решение, которое без проблем может вынуть имя преподавателя из покупки и отдать его в карточку пользователя. Хотите расскажу как его собрать?☺️

Отправка комментариев с вебинара в телеграм

⚙️ Что это?
Решение задачи, когда вы хотите получать только актуальные сообщения с вебинара, а не сидеть перед чатом вебинарной комнаты. Идеально подходит под автовебы.

🧑‍💻 Где может использоваться?

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

👌Что решает еще

- Поддерживает несколько режимов работы (работа с фильтрами)
- Сотрудники могут даже не быть заведены на ГК. Будет актуально, в том случае, если ОП работает из сторонней системы
- Поддерживается переход к быстрому ответу в вебинарной комнате
- Если МОП ставит реакцию на сообщение, то видно с какими сообщениями была произведена работа


✅ Работа с фильтрами

1️⃣ Новые комментарии только от пользователей, ответы сотрудников не выгружаются

2️⃣ Можно настроить выгрузку только для определенных комнат

3️⃣ Настраиваются стоп-слова, по которым сообщения не будут выгружаться (например, +)

4️⃣ Настраивание слов-тригеров, по которым сообщения будут выгружаться (например, "купить, цена")

5️⃣ Иное по запросу


✈️ Будет ли работать с Бизоном? Да!

Настраивается за один день. Для заказа пишите в лс @araviw

😎 Это один из коллекции вебинарных скриптов. Есть еще три самостоятельных решения (сохранение комментариев в карточку пользователя и в заказ, в даже прокидка в чекин Бизона)

Давайте так... Я ожидала нечто большее. Ай, да ладно! Намного большего 🤗

Но оно появилось, значит, давайте глазеть 🥹

🟡 такое ощущение, что это демка, выпавшая в общий доступ. Будем надеяться, что ее допилят хотя бы в базовых вещах.

Не того мы ждали!

1️⃣ Можно включить, а - можно отключить*

При включении все "ваше" отключится/сломается/перестанет работать (и внутри уроков тоже, да).

В видео звучит про вероятность 99%, тк 1% я отвела на то, что вы колдун-шайтан или кнопку "сохранить" не нажмете

*пока так... что будет через несколько месяцев - посмотрим (аминь!)

2️⃣ Общий концепт - огромные шрифты, ползунки и зеленовато-серый формат. Напоминает файловое хранилище (оно вам как?)

Словно нет общего root c данными. Или делали для слеповатых.

3️⃣ Системные страницы (Профиль, Чатиум) тоже обновились.

4️⃣ Разметка вся новая

Местами 🤯 нелогичная, вся из чужих классов. Части классов, за которые мы боролись - тоже нет

🟢 Ребята, живем! Ну да, классы новые, немного странно все это выглядит. Но с этим можно работать ( = не включать) 🙃

Пока повода для паники нет. Но он может появиться😆

А если это и конец... То у меня хорошие новости! У нас дофига работы - пока мы можем творить по старому! 🤣

Позырим 🫠

Управление сайтом - Новый дизайн

На Геткурсе появилась возможность включить новое оформление страниц и тренингов.

Доступна она вроде не у всех, но кое-кто уже полюбовался в своих аккаунтах (переключение доступно для владельца).

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

Кратко - если переключится, то всем нам "ж-ж-ж" будет 😂

Показать?

Мануал №3

В этом решении речь пойдет о том, как можно словить комментарий и записать его в допполе заказа

Для начала нам потребуется

1️⃣ Создать допполе заказа с типом "Текст"
Назовем его comments-live

2️⃣ Создать на странице форму

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

3️⃣ Задайте форме два класса
Первый - form-order (для скрипта)
Второй - view-collapsed (чтобы форма была на странице, но была невидима для пользователей)

4️⃣ На блок с комментариями поставьте класс comments-live

5️⃣ Создайте js блок в конце страницы и разместите скрипт в нем

$(function(){
  $('.comments-live .btn-send').on("click", function() { 
      
      var comment_text = $('.new-comment .new-comment-textarea').val(); 

      $('[name="formParams[dealCustomFields][00000]"]').val(comment_text);
      
      $('.form-order form').submit(); 
  });
});

6️⃣ 🔥Важно! Там где у меня 00000, вам нужно поставить свой номер. Откройте анализатор/"Просмотреть код" правой кнопкой мыши на допполе заказа и посмотрите значение поля. Впишите в скрипт.

7️⃣ Сохраните и опубликуйте страницу. Профит!

(скриншоты и подсказки есть в комментариях)

ps. при проверке помните, что комментарии ложатся в заказ, поэтому поле внутри формы всегда будет пустым :)

👣 Последовательная анкета с разделами

Знаете, у ГуглФорм есть функционал разделения на разделы большой анкеты, когда пользователь может перемещаться между разделами?

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

Так почему бы не сделать аналог и для ГК 😏

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

Кнопка "Назад" может открывать как начало раздела с вопросами, так и самый низ прошлого блока вопросов.

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

Зы к этому решению может быть добавлено решение по выгрузке данных из анкет в ГуглТаблицы 🤗

✍️ Принцип работы анкеты с разделами

Мануал №2 или...

Море волнуется раз, море волнуется два! Собираем волны 🙂‍↔️

1️⃣ Шкала достижений

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

.xdget-trainingAchievements {
    display: none;
}

Данное решение стоит устанавливать как "один прогресс-бар соответствует одному модулю" (в том случае, если у вас нет сквозных шкал достижений)

2️⃣ Знание максимального количества баллов по этой шкале

Это количество потребуется вам для указания в скрипте как 100% (в моем случае шкала в максимуме может быть как  62 балла, а сейчас 31, поэтому прогресс показывает 50%)

3️⃣  Тренинг с модулем для вставки
4️⃣  Умение разместить код в режиме редактирования тренинга

Тут все просто - заходим и начинаем вставлять.

Вам потребуется

🌟 html блок (сразу поставьте галочку "Отключить WYSIWYG")

<div id="fluid-meter"></div>

<script src="https://fs23.getcourse.ru/fileservice/file/download/a/645706/sc/162/h/1c40db4c7a01ec404b4789ca61dc3010.js"></script>

🌟🌟 блок javascript для размещения кода

$(document).ready(function () {
  var total = 62; // Значение баллов как 100%
 
  var score = parseInt($('.xdget-trainingAchievements .badge').html().trim().split(' ')[0], 10);
  var fillPercentage = (score / total) * 100;
 
  var fm = new FluidMeter();
  fm.init({
   targetContainer: $("#fluid-meter")[0],
    fillPercentage: fillPercentage,
 
    options: {
        fontSize: "30px",                // Размер шрифта для текста.
        drawPercentageSign: true,        // Флаг, указывающий, нужно ли рисовать знак процента.
        drawBubbles: true,               // Флаг, указывающий, нужно ли рисовать пузыри.
        size: 250,                       // Размер (например, диаметр) элемента.
        borderWidth: 9,                  // Ширина границы элемента.
        backgroundColor: "#e2e2e2",      // Цвет фона элемента.
        foregroundColor: "#ddb2dd",      // Основной цвет переднего плана элемента.
        foregroundFluidLayer: {          // Настройки для переднего слоя жидкости.
          fillStyle: "purple",           // Цвет заполнения переднего слоя жидкости.
          angularSpeed: 80,             // Угловая скорость анимации переднего слоя жидкости.
          maxAmplitude: 6,              // Максимальная амплитуда колебаний переднего слоя жидкости.
          frequency: 30,                 // Частота колебаний переднего слоя жидкости.
          horizontalSpeed: -150          // Горизонтальная скорость движения переднего слоя жидкости.
        },
        backgroundFluidLayer: {          // Настройки для заднего слоя жидкости.
          fillStyle: "pink",             // Цвет заполнения заднего слоя жидкости.
          angularSpeed: 100,             // Угловая скорость анимации заднего слоя жидкости.
          maxAmplitude: 3,               // Максимальная амплитуда колебаний заднего слоя жидкости.
          frequency: 22,                 // Частота колебаний заднего слоя жидкости.
          horizontalSpeed: 20            // Горизонтальная скорость движения заднего слоя жидкости.
        }
      }
  });
});

Подписи помогут вам поменять параметры корректно и кастомизировать вид под 🔑

Если вам проще сделать это через испорт-экспорт, то код в комментариях

Все, профит! Блок готов 🔥🔥