Видео-уроки по модификации и созданию компонентов

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

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

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

Введение

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

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

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

https://www.youtube.com/watch?v=ZOm66YuYvXA&feature=youtu.be

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

https://www.youtube.com/watch?v=3bOfBcyN8v8

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

https://www.youtube.com/watch?v=uBc-r2DENMo

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

https://www.youtube.com/watch?v=1qWC4nNtE5A

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

https://youtu.be/XXLsuJ3VJDo

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

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

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

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

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

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

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

https://www.youtube.com/watch?v=ueDm-pwxspA

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

Примечание: в этом видео я долго и упорно пытаюсь разместить подсказки в нужном месте, хотя лучше бы использовать для этого библиотеку 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)

и тд

Тогда в редакторе будет выводиться только нужный слайд

А в публикации сразу все - и их уже скриптом подхватывать нужно будет и строить слайдер из этого

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

Кратко

  1. Анимациям @keyframes стоит давать уникальные имена с использованием {{_uid}}
  2. Для работы с цветом есть системные переменные _textcolor и _colorside
  3. Для разного кода в редакторе и публикации есть _is_production
  4. Аттрибут locked для cont