Модификации для Zero-блоков

Модификации

Документация

Подробная документация к библиотеке. Всё о модификациях, расширяющих возможности Тильды — от установки до использования и распространенных ошибок.

Как работает библиотека

Общие механики

Библиотека модификаций, устанавливающаяся в <head> сайта, автоматически загружает и инициализирует используемые на странице моды после их вызова в блоках T123. Моды загружаются асинхронно, чтобы снизить нагрузку на страницу и запускаются после полной загрузки дерева DOM.

Синхронизация обновлений

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

Такая версия полностью встраивается в код сайта и не зависит от внешних ресурсов. Единственный нюанс — обновлять статичные модификации можно только через переустановку кода вручную. Переключиться на статичный режим можно в инструкции к каждому моду в разделе «Синхронизация обновлений».

Подробнее: Синхронизация обновлений

Генератор кода

Для быстрой установки модификаций существует генератор кода. Всё, что нужно сделать – указать в полях нужные параметры, скопировать получившийся код и вставить его в блок T123 в конец страницы. При необходимости задать дополнительные настройки, можно воспользоваться списком параметров и функций, представленным в разделе «Документация» или в конце странички к моду.

Отладка и просмотр ошибок

Ошибки, возникающие при установке модификаций, можно посмотреть через консоль или параметр ?showerrors, добавленный в конец ссылки на страницу: https://example.com?showerrors

Для просмотра настроек и переменных мода, можно добавить к ссылке параметр ?showparams=mod, где mod – название нужной модификации. Данные функции работают на любом сайте с установленной библиотекой.

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

Подробнее: Отладка и просмотр ошибок

Особенности библиотеки

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

Модификации загружаются с российских CDN-серверов, вес установочного файла составляет 12 Кб при общем размере библиотеки в 370 Кб.
Моды написаны на чистом JavaScript без зависимостей от сторонних библиотек, подгружаются асинхронно в минифицированном виде и имеют встроенный обработчик ошибок.
Благодаря пользовательским событиям можно совмещать несколько модификаций друг с другом и интегрировать их со сторонним кодом.
Модификации поддерживают работу с автоскейлом, автолэйаутом и анимациями и регулярно обновляются под изменения Тильды.

Начало работы

Установка библиотеки

Для работы модификаций необходимо подключить библиотеку в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. Актуальная версия библиотеки – 1.5.

<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>

Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией модификации. Подробнее: Синхронизация обновлений в модификациях

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

Инициализация модификаций

Ниже представлен список существующих на данный момент модификаций, доступных для вызова в коде. Большинство из них загружается асинхронно и запускается после полной загрузки дерева DOM.

Модификация	Зависимые файлы	Вес, Кб	Асинхронная загрузка
Расширенный автоскейл	rescale.min.js	20 Кб	–
Шапка и меню из Zero-блоков	header.min.js header.min.css	50 Кб	Да
Zero-слайдер	slider.min.js slider.min.css	44 Кб	Да
Zero-вкладки	tabs.min.js tabs.min.css	20 Кб	Да
Кастомные формы в Zero-блоке	forms.min.js	13 Кб	–
Продвинутый слайдер в Zero-блоке	swiper.min.js swiper.min.css	29 Кб	Да
Zero-аккордеон	accordion.min.js accordion.min.css	39 Кб	Да
Тултипы из Zero-блоков	tooltip.min.js tooltip.min.css	8 Кб	Да
Поп-апы из Zero-блоков	popup.min.js popup.min.css	21 Кб	Да
Свои кнопки управления для видео	video.min.js video.min.css	11 Кб	Да
Аудиофайлы в Zero-блоках	audio.min.js	5 Кб	Да
Кастомный прелоадер из Zero-блока	preloader.min.js preloader.min.css	6 Кб	Да
Свои иконки в кнопках Zero-блока	buttons.min.js buttons.min.css	6 Кб	Да
Показ/скрытие блоков по кнопкам	more.min.js more.min.css	8 Кб	Да
Копирование текста в Zero-блоке	copy.min.js copy.min.css	7 Кб	Да
Мультизаголовки в Zero-блоке	tags.min.js	5 Кб	Да
Сокращение текста по количеству строк	truncate.min.js	8 Кб	Да
Lottie-анимации в Zero-блоке	lottie.min.js	6 Кб	Да
Гравитация в Zero-блоке	gravity.min.js	12 Кб	Да
Кнопка «Вернуться назад»	back.min.js	2 Кб	Да
Эффект переворота карточек при наведении	flip.min.js flip.min.css	8 Кб	Да
Эффект 3D-поворота карточек	tilt.min.js tilt.min.css	15 Кб	Да
Анимация появления текста по словам	textsplit.min.js	6 Кб	Да
Анимация чисел с увеличением/уменьшением	numbers.min.js	4 Кб	Да
Анимация перемешивания текста	shuffle.min.js	6 Кб	Да
Эффект конфетти в Zero-блоке	confetti.min.js	8 Кб	Да

Для того, чтобы установочный скрипт загрузил модификацию, её нужно инициализировать в коде. Это делается при помощи вызова функции init():

<script>mod.init(selector, params)</script>

В данном примере mod – название выбранной модификации, init() – функция его инициализации, а selector и params – передаваемые в неё аргументы.

В каждом моде может быть несколько функций инициализации – каждая из них отвечает за определенный функционал. Например, rescale.init() и rescale.block() запускают модификацию расширенного автоскейла по-разному: первая для всей страницы, вторая – для отдельного блока. Подробнее о функциях вызова можно прочитать в документации к каждому моду.

Интеграция нескольких модов

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

Запустить мод по срабатыванию события
Отложить инициализацию модификации можно с помощью параметров event и timeout. Например, запустить слайдер через 100ms после срабатывания customEvent можно таким образом:

slider.init(".uc-slider", { event: "customEvent", timeout: 100 })

Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".

Запустить сторонний код после отрисовки модификации
Если код нужно выполнить после того, как модификация полностью запустится, добавьте слушатель события modinit-id, где modinit – событие отрисовки модификации mod, id – передаваемый в качестве аргумента selector без префикса uc или rec. Например, если у блока со слайдером класс .uc-slider1, то слушатель события добавляется следующим образом:

window.addEventListener("sliderinit-slider1", function(){ ... })

Запустить другую модификацию после отрисовки первой
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки слайдера можно через событие sliderinit:

tabs.init(".uc-slider", { event: "sliderinit-slider" })

tabs.init(".uc-slider", { event: "sliderinit-slider" })

Распространенные проблемы

Ни одна модификация не работает

Данная проблема может возникать по нескольким причинам:

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

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

Подробнее: Синхронизация обновлений

Между модификациями возникает конфликт версий
Если в <head> сайта установлено сразу несколько установочных скриптов mods.min.js, они могут нарушать работу друг друга. То же самое касается случаев, когда такие скрипты имеют разные версии. Для решения проблемы необходимо оставить в <head> один установочный скрипт и убедиться, что его версия является актуальной.

Возникает конфликт со сторонним кодом

Модификации, переопределяющие стандартные функции t_onReady и t_onFuncLoad, будут конфликтовать с библиотекой. Также не допускается изменение объектов, содержащих исполняемые функции модификаций. Если такая проблема возникла, поможет поблочное отключение стороннего кода, чтобы выявить источник конфликта.

Если при установке возникли другие ошибки

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=mod, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.

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

Модификации для Zero-блоков