Мультиформатные блоки

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

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

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

Берём:

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
.
У меня это три двухколоночных. У каждого указан нужный класс.

Собираем, ставим, сохраняем! 🔥

Обновленный аудиоплеер ГК

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

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

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

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

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

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

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

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

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

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

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

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

8) Запоминает последнее, что делал с ним пользователь. Например, если трек не был дослушен до конца, то его воспроизведение начнется с точки остановки трека.

Скидка от количества товара

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

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

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

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

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

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

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

Работает ли с корзиной? Да, можно настроить и такую связку

Формы с предложениями: о больном и насущном в дни ноябрьских распродаж

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

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

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

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

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

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

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

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

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

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

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

А вот если у вас есть разномастные предложения, то ГК будет перетасовывать предложения, используя оба правила вместе.

Неделя Магии... как много в этом звуке для сердца технаря слилось! ❤️

Как многие из вас знают, НМ - это неделя, на которой даже "не маги" могут попробовать на себе (и своем аккаунте) сделать красивый Геткурс🏝

Мы уже рассказывали вам о формах и виджетах, мобильных страницах и оформлении тренингов. Показывали как можно кастомизировать вебинарные страницы и создавать клубные кабинеты. Разворачивали единые пространства для ученика и проводили редизайн  страницы авторизации. Некоторые из вас мучались и побеждали Кодожорку (целых три раза!). Сотни аккаунтов стали красивее, десятки спецов зарабатывают на этих решениях после окончания НМ 💃

Теперь настало время новых свершений!

🥳 10НМ (в какой-то мере юбилейная) перед днем рождения Клуба Магии🥳

Та-дам! Модернизируем урок!🥳

Посмотрите на после/до. Правда, это потрясающе?

Всего за неделю можно не только повторить такой результат, но и понять как он сделан 👀

А теперь немного подробностей:

1️⃣ Вылета не будет (это для тех, кто знаком с прошлыми форматами)
2️⃣ Кодожорка жестить не будет
3️⃣ Участие платное, но оплата символическая - 1тр*
4️⃣ Доступ к урокам сохранится до 1 марта 2024 г.

* владельцам GTF - 0руб (проверяйте сообщения от Декана, он присылал ссылку на чат)

Благодаря последнему апдейту ГК почти все вещи будут работать из темы и даже в Чатиуме!

🤩 Посмотреть макет (он большой, откроется pdf)

⏳ РЕГИСТРАЦИЯ НА МАРАФОН https://gcwithme.ru/magicweek

1) Если вы думаете, что верстка ГК - это сложно... тогда приходите - всему научу :) Будет только лишь приятно 😏
2) Если вы думаете, что вы очень заняты - срок доступа вполне позволяет все изучить даже на НГ каникулах. Чат будет открыт. Единомышленники помогут!
3) Если вы думаете, что 1тр это дорого, то знайте, что подобное оформление стоит дороже, намного дороже.
4) В этом макете переработаны все элементы. А бонусные уроки к этой НМ приятно вас порадуют, решением "классических" проблем внутри урока :)

Пока вы успеваете попасть на регистрацию (до 26 ноября включительно). Затем только уже покупка в записи.