Аня про Геткурс. Верстка, скрипты и решения
2.11K subscribers
107 photos
23 videos
1 file
20 links
Нужна интеграция, скрипты или верстка на Геткурсе? Пишите — @araviw

В этом канале публикую советы по верстке на Геткурсе, обзоры собственных решений и скриптов, решение "логических" задачек на платформе

🔥Разработчик года🔥 GetTechAwards'2022-2023
Download Telegram
РАБОТА С ДАННЫМИ РАЗНЫХ ОБЪЕКТОВ

🥳 Создала решение, которое позволяет свободно поддерживать работу с данными, которые принадлежат разным типам объектов.

🏝 Когда вам пригодится это решение:

🟢 нужно переместить данные из системных значений в допполя

🟢 нужно переместить данные из одного допполе в другое допполе внутри одного типа объекта

🟢 нужно переместить данные из допполя одного объекта в допполе другого объекта

🟢 нужно использовать данные, которых у ГК вообще нет в доступе, они появляются только в процессах

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

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

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

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


Цена 10тр. Покупаете один раз, можете использовать в неограниченном количестве проектов. Техподдержка по запросу присутствует :) пишите @araviw

❤️ у участников ДиВ (тариф Профи) будет это в бонусах
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥321
🔥🔥🔥 Забыла!

Допишу отдельным постом :)

⚡️⚡️⚡️Это решение позволяет не только в рамках одного аккаунта работать, но и передавать данные между аккаунтами.

Например, у вас идет регистрация на вебинар в аккаунте №1, а вот виджет и оплаты вы принимаете уже на аккаунт №2. Как сделать дожим тех, кто не оплатил, но был на вебе? Ручками сопоставить емейлы. Или воспользоваться этим решением, которое обновит данные в аккаунте №1, взяв их из аккаунта №2 ✈️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19
Мультиформатные блоки

У ГК по умолчанию есть колонка (она же обложка) с произвольным контентом, а есть "Блок: Две колонки с произвольным контентом". Так и получается, что все остальное - это уже плитки или сильная переделка макета.

Метод, описанный ниже, позволит вам комбинировать разные блоки на один экран.

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

Берём:

1️⃣ css-код (вставляйте отдельным блоком)

/* поведение общего контейнера, в котором соберутся нужные блоки*/
.variable-column-all {
    gap: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/* стили одного блока, на две колонки нужно 50%, на четыре - 25% */
.variable-column-all .variable-column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 32%;
          flex: 1 1 32%;
  border: 2px solid #000;
  border-radius: 25px;
}

/* если хотим изменить фон конкретного блока */

.variable-column-all .variable-column:nth-child(1) {
  background-color: #deb1de;
}

.variable-column-all .variable-column:nth-child(3) {
  background-color: #c5e8d5;
}

2️⃣ js-код

$(function() {
    //Клонируем блоки
    var clonedElements = $('.variable-column').clone(true);
   
    // Скрываем исходные элементы
    $('.variable-column').css('display', 'none');
   
    // Добавляем скопированные элементы в .variable-column-all
    clonedElements.appendTo('.variable-column-all');
});

3️⃣ пустой html-блок

В который вставляем

<div class="text-center variable-column-all"></div>

4️⃣ И сами блоки с классом variable-column
.
У меня это три двухколоночных. У каждого указан нужный класс.

Собираем, ставим, сохраняем! 🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥62👍41
Типичная ситуация у спеца ГК

Пятница, хорошее настроение, а тут ГК упал 😅 (не, все в порядке с ним сейчас, это просто к слову пришлось)

Если вы еще не побаловались новыми эмодзи, то Emoji Kitchen ждет вас 😄

К ГК отношения не имеет, но настроение вам поднимет :))

Какие у вас необычные смайлы вышли?
Please open Telegram to view this post
VIEW IN TELEGRAM
😁10
"Фиксики" для системной корзины

Если в скрине выше вас ничего не удивляет - вы счастливчик 😉

По умолчанию корзина в ГК умеет только добавлять позиции. Бедные пользователи порой кладут десятки товаров, потому что информационное сообщение не очень заметно, а кнопка не меняет свой статус 🤬

Удалить товар можно было только из просмотра корзины, теперь же удаление доступно сразу же со страницы :)

Обновление функционала для корзины можно взять в Клубе (или у меня в лс).

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

Что лечим дальше? 🆘
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥47👏2👍1
Немного субботнего юмора в стиле Терминатора 😂

зы есть конечно проекты, которые с первого раза сдаются без дополнительных хотелок или правок, но их так мало :))

зыы буду душнилой, но на картинку нужно смотреть с точки зрения концепта фильма. А то мало ли чего 🙈
😁58😱3
Классификация на ГК
(сортировка, фильтрация)

Очень частая задача, под которую не было решения на платформе.

Что объединяет три мини-обзора? Общая логика работы с контентом. Когда есть общий список и его нужно разделить на несколько списков или пересекающихся сущностей по условию (чекбоксу).

Глоссарий более показателен в этом плане, тк он позволяет не только фильтровать, но и добавлять в фильтр новые условия (смотрите принадлежность темам - она может работать как добавление, так удаление пересечений).

Забрать решение можно в клубе или запросить реализацию под проект в ЛС.

Где может пригодиться?
В любом проекте, где есть потребность сделать из одного списка сразу несколько отдельных, не дублируя сам контент.


Показать как выглядит это решение в списке уроков? 😏
🔥37
Буду краткой :)) Скоро зима Гетц!

Если вы там уже были - то нужно повторить :) Если еще не были - нужно начать "быть" 😂

Концепт конференции - лучшие в своих темах будут рассказывать как сделать вашу работу и заработок еще лучше.

🧑‍💻 Когда?
24-26 октября

👀 Кто будет?
Смотрите спикеров тут

Буду ли я?
Да 🥳

Моя тема
Построение контроля и аналитики за учениками и преподавателями в онлайн-школе

Дата выступления
20:00 26 октября, четверг

☺️ Будет ли бонус лично от меня подписчикам?
Да, будет - виджет поиска дубликатов в карточке пользователя

✔️ КУПИТЬ БИЛЕТ со скидкой 10% и бонусом
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥142👍1
Обновленный аудиоплеер ГК

Видите этот страшный сиреневый аудиоплеер? Да? и он видит вас 😂

Кастомизировать его довольно сложно (проще взять обычный html - код в комментариях). Поэтому - делаем свое ⚙️

Когда-то давно, в стол лег плеер с крутящимися дисками (синенький). Он на самом деле имеет еще плейлист, который не попал в обзор, но!

Мне по душе ближе серый (третий) 😍

Потому что его функциональность намного больше всего, что мы знали раньше⚡️

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

2) Умеет собирать треки с других страниц, формируя плей-лист на основании тренинга и его уроков

3) В нем есть и поддержка непрерывности воспроизведения треков и все, что нужно плееру (изменение громкости, скорости, промотка)

4) Умеет "начинаться" с нужного времени

5) Обложку (там где мое фото) можно связать с треком или тем, откуда он был взят, чтобы выводилось тематичное изображение.
Можно ли заставить крутиться? Можно :))

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

7) Может быть перекрашен или установлен другой скин за пару минут. Аналогично с кнопками (можно убирать "лишние")

8) Запоминает последнее, что делал с ним пользователь. Например, если трек не был дослушен до конца, то его воспроизведение начнется с точки остановки трека.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥762👍1
Скидка от количества товара

⚙️ Что у нас есть внутри ГК:

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

Это все хорошо, но не дает инструментария для проведения распродаж, где скидка завязана на количество товаров 🆘

Можно решить перебором возможных комбинаций, но если продукты "разновесные", то и количество вариантов для метода "сумма заказа" становится вот таким - 😨

А данное решение может работать с любым количеством товара и завязанной на него скидкой.

❤️ Как работает это решение?

Пользователь отмечает нужные позиции и система сразу считает распродажную цену с учетом скидки по количеству. Дальше оплата с нужной скидкой, которая распределяется равномерно на все продукты

Работает ли с корзиной? Да, можно настроить и такую связку
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥41🎉2👍1
Формы с предложениями: о больном и насущном в дни ноябрьских распродаж

Если вам не хочется читать теорию, можете поставить 👍 этому посту и сразу читать следующий 😄

Если вы еще здесь, то я вам расскажу о том, что вы должны знать для части задач на ГК - как формируются и как стилизовать формы, где много предложений.

В ГК есть две механики добавления предложений в форму:

1️⃣ отдельными предложениями
2️⃣ по условию

Для обоих случаев будет характерно "наслоение" и сбивка элементов формы в кучу. если предложения по названию длинные (как это лечить ниже). Но вот (1)/(2) напрямую влияют на то, как будут стоять у вас предложения.

В (1) вы сами перетаскиваете предложения в нужной последовательности. Но это лишает возможности применять промокод сразу в форме. Да и ручной труд может отнять много времени (вероятность ошибки тоже увеличивается)

В (2) вы можете добавить предложения оптом, но встают они не в той последовательности, что вы их добавили (не важно по тегам или поштучно было добавление).

⚙️ Порядок сохранения или WTF 🤬

В итоговом формате ГК будет выстраивать предложения по двум правилам

1. По возрастанию итоговой цены
2. По алфавиту, если итоговая цена одна

Что это означает?
Если у вас предложения отличаются только по названию (совпадение цены), то ГК расставит их по алфавиту

А вот если у вас есть разномастные предложения, то ГК будет перетасовывать предложения, используя оба правила вместе.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍233
А теперь, как это все подстроить под себя

Типовые случаи


1️⃣ Цена нужна по возрастанию

.form-content .part-manyPositions {
    display: flex;
    flex-direction: column-reverse;
}


2️⃣ Выровнять чекбокс

вариант первый (перенос цены на самостоятельную строчку)

.form-position {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.form-position .form-position-checker{
   flex: 0 0 30px;
}

.form-position .form-position-price {
   flex: 0 0 100%;
   padding-left:30px;
  text-align: right; /*расположение цены справа*/
}
.form-position .form-position-title {
   flex: 0 0 calc(100% - 30px);
}


вариант 2 (перенос цены, без флекса) - картинки смотреть в комментарии

.form-position .form-position-title { 
    width: 500px;
}

@media (max-width: 768px) {

  .form-position .form-position-title {
    width: 260px;
    display: inline-block;
  }
}


3️⃣ Хочу свой порядок расстановки предложений

.form-content .part-manyPositions {
    display: flex;
    flex-direction: column;
}

.form-content .part-manyPositions .form-position[data-offer-id="0000"] {
    order: # ;
}

.form-content .part-manyPositions .form-position[data-offer-id="1111"] {
    order: # ;
}


🔥 Пояснение
Ордеры по умолчанию 0. Причем более отрицательные ордеры "всплывают наверх", чем больше значение ордера - тем он ниже элемент с таким значением в списке. 0000/1111 - это id ваших предложений. Создайте столько правил, сколько у вас предложений, чтобы добиться идеального порядка.

Итоговые стили прогоняйте через автопрефиксер


И напоследок 🥵

Хотите решение по тому, как сразу показать все выбранные чекбоксы цветом (а не только одно последнее, как делает это ГК?
☺️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥71👍85🤩1