Видео-уроки

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

Некоторые видео не лучшего качества, тем не менее, остаются ценным, а иногда и единственным источником исчерпывающей информации по теме.

Учитывая это, мы решили сделать эти видео публичными.

Содержание

Введение Создание программируемого фона Текст со спойлером Валидация полей Создание поля со сгорающей скидкой Скрытие компонента до запуска JS Редактирование кнопок (начало)Создание адаптивных настроек Редактирование кнопок (продолжение)Работа с цветом встраиваемых иконок Создание текста со всплывающими подсказками Надежный способ создания любых всплывашек Промокод в корзине с помощью API Интерактивные компоненты прямо в редакторе Подключение компонента к базе данных О чем можно было бы еще рассказать

Введение

Несколько компонентов (подстановка GET параметров в текст, эффект печатной машинки и открытие вкладки по номеру) с нуля показаны как делаются.

https://www.youtube.com/watch?v=M8mzzjSh7lg

Создание текста со всплывающими подсказками

💡

Примечание: в этом видео я долго и упорно пытаюсь разместить подсказки в нужном месте, хотя лучше бы использовать для этого библиотеку Popper, которую легко подключить через CDN. Об этом в следующем видео.

https://www.youtube.com/watch?v=wl9Fzyjy64A

Надежный способ создания любых всплывашек

https://www.youtube.com/watch?v=4RbL9sASsJc

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

https://www.youtube.com/watch?v=HO0PNWhw8B8

Промокод в корзине с помощью API

https://www.youtube.com/watch?v=MnADVQVO7bI

Интерактивные компоненты прямо в редакторе

https://www.youtube.com/watch?v=_e5I0iwd9fc

💡

КОММЕНТАРИЙ Добавил еще в коде служебную переменную _is_production, чтобы можно было разные условия ставить для редактора или публикации. Например, слайды удобно выводить по условию if (_is_production || state.slide === 1) И так для каждого слайда if (_is_production || state.slide === 2) if (_is_production || state.slide === 3) и тд Тогда в редакторе будет выводиться только нужный слайд А в публикации сразу все - и их уже скриптом подхватывать нужно будет и строить слайдер из этого

Подключение компонента к базе данных

https://www.youtube.com/watch?v=UBNe5pjq5_w

О чем можно было бы еще рассказать

Кратко

Анимациям @keyframes стоит давать уникальные имена с использованием {{_uid}}

Для работы с цветом есть системные переменные _textcolor и _colorside

Для разного кода в редакторе и публикации есть _is_production

Атрибут locked для cont

Видео-уроки

Введение

Создание программируемого фона

Текст со спойлером

Валидация полей

Создание поля со сгорающей скидкой

Скрытие компонента до запуска JS

Редактирование кнопок (начало)

Создание адаптивных настроек

Редактирование кнопок (продолжение)

Работа с цветом встраиваемых иконок