# Библиотека модификаций Библиотека расширяет стандартные возможности Тильды и добавляет в конструктор продвинутый функционал — слайдеры, вкладки, аккордеоны, кастомные хэдеры и формы, интернет-магазин, личный кабинет и др. Модификации работают, как конструктор: их можно гибко настраивать под нужную вёрстку, регулировать поведение и стили через параметры в коде и комбинировать друг с другом. > Время чтения: 10 минут ## Как работает библиотека ### Общие механики Библиотека устанавливается в `` сайта и автоматически загружает используемые на странице модификации после их вызова в блоках T123. Модификации загружаются асинхронно, чтобы снизить нагрузку на страницу, и запускаются после полной загрузки дерева DOM. Вызов модификаций осуществляется через функцию вида `mod.init(selector, params)`, где `mod` — название модификации, `init()` — метод её инициализации, а `selector` и `params` — передаваемые аргументы. ```html mod.init(selector, params) ``` ### Синхронизация обновлений По умолчанию модификации загружаются с CDN-серверов, что позволяет избежать дублирования кода и избавиться от необходимости обновлять его при возникновении ошибок. На данный момент загрузка модификаций возможна с двух источников: - [cdn.postnikovmd.com](https://cdn.postnikovmd.com/tilda@1.6/mods.min.js) — оригинальный CDN-ресурс, предоставляемый [Selectel](https://docs.selectel.ru/cdn/about/about-cdn/). Подходит для большинства проектов — Тильда размещает свои страницы у того же провайдера. - [cdn.jsdelivr.net](https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.6/mods.min.js) – альтернативный CDN-ресурс, предоставляемый Cloudflare. Подходит для зарубежных проектов и загружает модификации из независимого репозитория. Для случаев, когда провайдер блокирует подключение к обоим источникам или в проекте важно избегать любых сбоев, существует альтернативный подход — встроить статичную версию модификации в `` сайта или в блок `T123` непосредственно перед её вызовом. Такой способ позволяет полностью избавиться от внешних зависимостей и запускать код непосредственно на сайте. Единственный нюанс — обновлять статичные модификации можно только через переустановку кода вручную. Переключиться на статичный режим можно по соответствующей кнопке в первом пункте инструкции к каждому моду. ### Генератор кода Для быстрой настройки модификаций можно использовать генератор кода. Он позволяет получить код инициализации с необходимыми параметрами, указав их в соответствующих полях на странице мода. При необходимости дополнительной настройки, можно обратиться к разделу документации в конце страницы — в нём указаны все методы, функции и параметры, необходимые для работы мода. ### Примеры модификаций Все возможности библиотеки собраны в каталоге примеров — больше 90 готовых страниц, от базовых слайдеров, вкладок и аккордеонов до комбинаций нескольких модов и продвинутых сценариев. Любой пример можно скопировать к себе как готовый шаблон и разобрать, как он устроен. Подробнее: [Каталог примеров](https://postnikovmd.com/mods/examples) ### Диагностика и просмотр ошибок Ошибки, возникающие при установке модификаций, можно посмотреть через параметр `?showerrors` в конце ссылки на страницу: `https://example.com?showerrors`. Диагностика собирает их в едином окне – по клику на ошибки можно посмотреть детальную информацию о проблеме и получить рекомендации по её исправлению. Для большинства ошибок диагностика также отображает связанные параметры (например, если слайдер не листается, диагностика покажет нужный класс и количество слайдов внутри него), а также позволяет посмотреть полные параметры модификации: от классов до внутренних состояний. Данная функция работает на любом сайте с установленной библиотекой. ### Особенности библиотеки Все модификации разработаны специально для Тильды и учитывают её особенности и ограничения. - Модификации написаны на чистом JavaScript и загружаются в минифицированном виде. Вес установочного скрипта составляет 17 Кб, а весь остальной код подгружается по мере вызова модов. - При сбое подключения к основному CDN моды загружаются с альтернативного источника, поэтому библиотека продолжит работать, даже если основной сервер недоступен. - В большинстве случаев модификации совмещаются друг с другом автоматически. При необходимости их порядок можно задать вручную через пользовательские события — например, чтобы связать их со сторонним кодом. - Модификации учитывают все особенности Тильды и аккуратно встраиваются в неё, используя нативные функции для поддержки масштабирования, автолэйаутов и анимаций. - Библиотека регулярно обновляется под изменения Тильды, чтобы модификации продолжали работать после обновлений платформы. - Код модификаций распространяется свободно по лицензии [MIT](https://postnikovmd.com/mods/license) — его можно использовать в любых проектах с указанием авторства. ## Модификации Всего в библиотеке 36 уникальных модификаций, каждая из которых закрывает свою функциональную область. Модификации сгруппированы в 4 кластера: ### Функционал и компоненты Ключевой кластер — компоненты с настраиваемым поведением, состояниями и анимацией — слайдеры, вкладки, аккордеоны, хэдеры, формы, поп-апы и др. Они закрывают основной функционал сайтов и позволяют реализовать его в кастомной логике. | Модификация | Методы вызова | Зависимые файлы | Вес, кб | Асинхронная загрузка | | ------------------------------------- | -------------------------------------------------------- | ---------------- | ------- | -------------------- | | Расширенный автоскейл | `rescale.init()`, `rescale.block()`, `rescale.disable()` | rescale.min.js | 21 | - | | Хэдер из Zero-блоков | `header.init()` | header.min.js | 58.9 | Да | | Слайдер в Zero-блоке | `slider.init()` | slider.min.js | 45.1 | Да | | Вкладки из Zero-блоков | `tabs.init()` | tabs.min.js | 24.7 | Да | | Мультиформы в Zero-блоке | `forms.init()`, `forms.success()`, `forms.validate()` | forms.min.js | 15.2 | - | | Квиз из Zero-блоков | `quiz.init()` | quiz.min.js | 20 | Да | | Продвинутый слайдер в Zero-блоке | `swiper.init()` | swiper.min.js | 31 | Да | | Аккордеон в Zero-блоке | `accordion.init()` | accordion.min.js | 42 | Да | | Тултипы из Zero-блоков | `tooltip.init()` | tooltip.min.js | 8.4 | Да | | Поп-апы из Zero-блоков | `popup.init()` | popup.min.js | 20.7 | Да | | Свои кнопки управления для видео | `video.init()` | video.min.js | 11 | Да | | Аудиофайлы в Zero-блоках | `audio.init()` | audio.min.js | 5.5 | Да | | Прелоадер из Zero-блока | `preloader.init()` | preloader.min.js | 5.5 | - | | Свои иконки в кнопках Zero-блока | `buttons.init()` | buttons.min.js | 6.1 | Да | | Таймер в Zero-блоке | `timer.init()` | timer.min.js | 10.6 | Да | | Показ/скрытие блоков по кнопкам | `more.init()` | more.min.js | 7.8 | Да | | Копирование текста в Zero-блоке | `copy.init()` | copy.min.js | 7.2 | Да | | Мультизаголовки в Zero-блоке | `tags.init()` | tags.min.js | 5.5 | Да | | Сокращение текста по количеству строк | `truncate.init()` | truncate.min.js | 8.5 | Да | | Lottie-анимации в Zero-блоке | `lottie.init()` | lottie.min.js | 6.1 | Да | | Гравитация в Zero-блоке | `gravity.init()` | gravity.min.js | 12.6 | Да | | Кнопка «Вернуться назад» | `back.init()` | back.min.js | 2.3 | Да | | Потоки в Zero-блоке | `feed.init()`, `feed.relevants()` | feed.min.js | 46.5 | Да | ### Анимации и эффекты Модификации, добавляющие элементам визуальные эффекты и микровзаимодействия. Запускаются по наведению, клику или прокрутке — с их помощью можно расставить визуальные акценты и показать отклик на действия пользователя прямо в Zero-блоке. | Модификация | Методы вызова | Зависимые файлы | Вес, кб | Асинхронная загрузка | | ---------------------------------------- | ---------------------------------------------------------- | ---------------- | ------- | -------------------- | | Эффект переворота карточек при наведении | `flip.init()` | flip.min.js | 9 | Да | | Эффект 3D-поворота карточек | `tilt.init()` | tilt.min.js | 14.8 | Да | | Анимация появления текста по словам | `textsplit.init()`, `textsplit.animate()` | textsplit.min.js | 8.8 | Да | | Анимация чисел с увеличением/уменьшением | `numbers.init()`, `numbers.animate()` | numbers.min.js | 6 | Да | | Анимация перемешивания текста | `shuffle.init()`, `shuffle.shuffle()`, `shuffle.arrange()` | shuffle.min.js | 6 | Да | | Эффект конфетти в Zero-блоке | `confetti.init()` | confetti.min.js | 7.8 | Да | ### Личный кабинет Помимо отдельных модификаций, в библиотеку входят два крупных модуля — Личный кабинет и Интернет-магазин. Каждый из них состоит из нескольких модификаций и инициализируется через своё ядро. Личный кабинет позволяет собрать свои страницы авторизации, профиля, курсов и истории заказов из Zero-блока, которые работают поверх стандартного функционала Тильды. В отличие от остальных модификаций, он подключается отдельным скриптом members.min.js и работает автономно — как вместе с mods.min.js, так и без него: ```html ``` | Модификация | Методы вызова | Зависимые файлы | Вес, кб | Асинхронная загрузка | | ------------------------------------ | ------------------------------------------------------------------ | ---------------------- | ------- | -------------------- | | Страница авторизации в Zero-блоке | `members.login()`, `members.signup()`, `members.recover()` | members-sign.min.js | 29 | - | | Настройки профиля в Zero-блоке | `members.profile()`, `members.password()`, `members.loadcontent()` | members-profile.min.js | 26.3 | Да | | История заказов/покупок в Zero-блоке | `members.orders()`, `members.purchased()` | members-orders.min.js | 11.7 | Да | | Страница курсов в Zero-блоке | `members.courses()` | members-courses.min.js | 19.4 | Да | | Своя кнопка выхода в Zero-блоке | `members.logout()` | members-userbar.min.js | 2.5 | Да | | Скрытие иконки профиля | `members.hideuserbar()` | members-userbar.min.js | 2.5 | Да | ### Интернет-магазин Интернет-магазин позволяет перенести каталог и карточку товара в Zero-блок со своей вёрсткой и синхронизацией данных в реальном времени. Модуль добавляет продвинутую логику общения с API Тильды — модификация сама достаёт и обрабатывает товары с сервера, а также вводит гибкую систему клонирования карточек, которая сохраняет оригинальную структуру и позволяет добавлять в блок неограниченное количество товаров. | Модификация | Методы вызова | Зависимые файлы | Вес, кб | Асинхронная загрузка | | -------------------------------- | ---------------------------------------- | -------------------- | ------- | -------------------- | | Каталог товаров в Zero-блоке | `store.init()` | store-catalog.min.js | 60 | Да | | Карточка товара в Zero-блоке | `store.product()`, `store.breadcrumbs()` | store-product.min.js | 61.4 | Да | | Похожие товары в Zero-блоке | `store.relevants()` | store-product.min.js | 61.4 | Да | | Корзина и избранное в Zero-блоке | `store.cart()`, `store.wishlist()` | store-cart.min.js | 12.3 | Да | ## Начало работы ### Установка библиотеки Для работы модификаций необходимо подключить библиотеку в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. Актуальная версия библиотеки — 1.6. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода в `` сайта или непосредственно перед инициализацией модификации. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции к каждому моду. ### Инициализация модификаций Для того, чтобы установочный скрипт загрузил модификацию, её нужно инициализировать в коде. Это делается при помощи вызова функции `init()`: ```html mod.init(selector, params) ``` В данном примере `mod` — название выбранной модификации, `init()` — функция его инициализации, а `selector` и `params` — передаваемые в неё аргументы. Если модификация вызывается для блоков, которые скрыты настройками видимости, её выполнение будет пропущено. Подробнее о функциях инициализации можно прочитать в детальной документации к каждому моду. ### Совмещение нескольких модов Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека автоматически определяет порядок запуска — например, встроить слайдер во вкладки можно при обычном вызове двух функций. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить мод по срабатыванию события** Отложить инициализацию модификации можно с помощью параметров `event` и `timeout`. Например, запустить слайдер через 100ms после срабатывания `customEvent` можно таким образом: ```js slider.init(".uc-slider", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки модификации** Если код нужно выполнить после того, как модификация полностью запустится, добавьте слушатель события `modinit-id`, где `modinit` — событие отрисовки модификации `mod`, `id` — передаваемый в качестве аргумента `selector` без префикса `uc` или `rec`. Например, если у блока со слайдером класс `.uc-slider1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("sliderinit-slider1", function(){ ... }) ``` **Запустить другую модификацию после отрисовки первой** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить переворот карточек после отрисовки слайдера можно через событие `sliderinit`: ```js flip.init(".flip-slide", { event: "sliderinit-slider" }) ``` ## Распространенные проблемы ### Ни одна модификация не работает Данная проблема может возникать по нескольким причинам: 1. **Провайдер блокирует подключение к модификациям** На данный момент единственный способ обхода блокировки — отключить синхронизацию обновлений и использовать статичную версию модов. Она полностью встраивается в код сайта и не зависит от внешних ресурсов. Подробнее: [Синхронизация обновлений](https://t.me/postnikovmds/29) 2. **Между модификациями возникает конфликт версий** Если в `` сайта установлено сразу несколько установочных скриптов mods.min.js, они могут нарушать работу друг друга. То же самое касается случаев, когда такие скрипты имеют разные версии. Для решения проблемы необходимо оставить в `` один установочный скрипт и убедиться, что его версия является актуальной. 3. **Возникает конфликт со сторонним кодом** Модификации, переопределяющие стандартные функции `t_onReady` и `t_onFuncLoad`, будут конфликтовать с библиотекой. Также не допускается изменение объектов, содержащих исполняемые функции модификаций. Если такая проблема возникла, поможет поблочное отключение стороннего кода, чтобы выявить источник конфликта. ### Если при установке возникли другие ошибки Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Расширенный автоскейл Сокращает время на вёрстку — добавляет автоскейл с уменьшением, масштабирование страницы по своим брейкпоинтам и позволяет масштабировать стандартные блоки. > Время настройки: 1 минута ## Как работает модификация ### Расширенный автоскейл Модификация дополняет стандартный автоскейл Тильды, передавая в него свой коэффициент масштабирования на основе заданных параметров. Коэффициент масштабирования рассчитывается для каждого Zero-блока по формуле: `ширина экрана / базовый брейкпоинт`, где базовый брейкпоинт — это ширина экрана, относительно которой выполняется масштабирование. Последнее вычисленное значение коэффициента модификация записывает в css-переменную `--scale-factor`. Полученный коэффициент применяется к блокам двумя способами: - Zero-блоки масштабируются штатным автоскейлом Тильды с учетом нового коэффициента - Стандартные блоки наследуют коэффициент масштабирования через глобальную переменную `--scale-factor` и подставляют её в блок через css-свойство `zoom` Поэтому масштаб стандартных блоков всегда совпадает с масштабом Zero-блоков. Если у блока выключен автоскейл, его коэффициент принимается за единицу. При масштабировании всей страницы это важно учитывать: чтобы страница скейлилась целиком, автоскейл должен быть включён у всех блоков. Модификация также позволяет задать горизонтальный отступ по краям страницы: его величина вычитается из ширины области масштабирования, поэтому слева и справа при любом масштабировании останется постоянный отступ. Подробнее: [Расширенный автоскейл](https://postnikovmd.com/mods/rescale) ### Масштабирование стандартных блоков Стандартные блоки масштабируются на основе коэффициента масштабирования последнего Zero-блока, который подтягивается через css-переменную `--scale-factor`. Подробнее: [Масштабирование стандартных блоков](https://postnikovmd.com/mods/rescale/default) ### Отключение автоскейла для устройств Модификация позволяет задавать свои условия для работы автоскейла и отключать масштабирование для конкретных браузеров или ОС, если масштабирование работает некорректно. Устанавливает атрибут `[data-artboard-upscale="grid"]` для всех Zero-блоков и сбрасывает коэффициент масштабирования до 1. Подробнее: [Отключение автоскейла для устройств](https://postnikovmd.com/mods/rescale/disable) ## Начало работы ### Установка библиотеки Для работы расширенного автоскейла необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Расширенный автоскейл Zero-блоков](https://postnikovmd.com/mods/rescale) - [Масштабирование стандартных блоков](https://postnikovmd.com/mods/rescale/default) - [Отключение автоскейла для устройств](https://postnikovmd.com/mods/rescale/disable) ### Инструкция по установке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Включите автоскейл в настройках Zero-блоков ​​3. Задайте в настройках модификации минимальный и максимальный брейкпоинт, относительно которых будет работать автоскейл ​​4. Скопируйте код и вставьте его в блок T123 в конец страницы ### Функции и параметры Методы, с помощью которых можно управлять работой расширенного автоскейла. Подгружаются перед срабатыванием `t_onReady()` как функции объекта `rescale`. | Функция | Описание | Триггер | | ------------------------------- | ------------------------------------------ | ------------------ | | rescale.init(selector, params) | Инициализирует автоскейл для всей страницы | Load Start | | rescale.block(selector, params) | Изменяет масштаб конкретного блока | DOM Content Loaded | | rescale.disable(params) | Отключает автоскейл для заданных устройств | Load Start | В качестве аргументов для настройки автоскейла можно передавать следующие параметры: | Параметр | Описание | Тип | Значение по умолчанию | | ---------------- | --------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------- | | selector | ID или класс блока, для которого работает модификация | string | '.t-rec' | | params.min | Минимальная ширина экрана, с которой срабатывает автоскейл | number | 1200 | | params.max | Максимальная ширина экрана, до которой работает автоскейл | number | 480 | | params.direction | Направление, по которому применяется логика масштабирования (увеличение относительно min/уменьшение относительно max) | number | - | | params.keep | Ширина экрана, после которой блоки сохраняют постоянное масштабирование | number | - | | params.padding | Дополнительный отступ слева и справа при масштабировании | number | 0 | | params.browsers | Браузеры, для которых необходимо отключить автоскейл | string | "safari", "chrome", "firefox", "opera", "yandex", "edge", "telegram", "instagram" | | params.os | Операционные системы, для которых необходимо отключить автоскейл | string | "ios", "ipados", "macos", "windows", "android", "linux", "smart-tv" | | params.width.min | Минимальный брейкпоинт для отключения автоскейла | number | 360 | | params.width.max | Максимальный брейкпоинт для отключения автоскейла | number | 480 | ### События После передачи кастомного коэффициента автоскейла в глобальные переменные, модификация возвращает событие `rescaleinit`. Его можно использовать для интеграций с другими модами или доработки стороннего кода. ### Инициализация Код инициализации автоскейла вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--rescale.js Расширенный автоскейл. https://postnikovmd.com/mods/rescale--> rescale.init() ``` ## Примеры использования ### Переопределение существующих брейкпоинтов Для того, чтобы масштабировать страницу по своим брейкпоинтам, достаточно переопределить их в функции `rescale.init`: ```html rescale.init({ min: 1280, max: 1440, direction: "upscale" }) ``` Данный код будет масштабировать брейкпоинт 1280px до того, пока ширина экрана не достигнет 1440px, даже если в Zero-блоках стоят другие значения: Чтобы задать несколько кастомных брейкпоинтов, данные функции дублируются. Если максимальный брейкпоинт отсутствует, пропускаем его: ```html rescale.init({ min: 360, max: 480, direction: "upscale" }) rescale.init({ min: 1280, max: 1440, direction: "upscale" }) rescale.init({ min: 1440, direction: "upscale" }) ``` Пример: [Переопределение существующих брейкпоинтов](https://postnikovmd.com/mods/rescale/example) ### **Масштабирование в обратную сторону** С помощью параметра `direction: "downscale"` можно уменьшить вёрстку старшего брейкпоинта под экраны с меньшей шириной. Например, вместо отдельной планшетной версии показать уменьшенную компьютерную: ```html rescale.init({ min: 480, max: 1200, direction: "downscale" }) ``` Для корректной работы масштабирования вёрстка на меньшем брейкпоинте должна совпадать с вёрсткой на большем. Так, в примере выше, на экранах 480–1200px она должна быть такой же, как и на 1200px–max. Повторять её вручную не обязательно — настройки на меньшем брейкпоинте можно сбросить, чтобы они автоматически унаследовались от большего. Это необходимо потому, что модификация влияет только на коэффициент масштабирования, а все остальные настройки продолжают работать относительно меньшего брейкпоинта (так, настройки, заданные на ширине 480px, будут применяться на всех экранах от 480px до следующего брейкпоинта). Пример: [Обратное масштабирование для планшетов](https://postnikovmd.com/mods/rescale/example) ### Удержание масштабирования На больших экранах масштабирование можно ограничить, чтобы контент не растягивался бесконечно. Для этого вместо максимального брейкпоинта нужно задать параметр `keep` — ширину экрана, после которой коэффициент масштабирования перестанет расти: ```html rescale.init({ min: 1440, keep: 1920, direction: "upscale" }) ``` В данном примере страница масштабируется с 1440px до 1920px, а на экранах шире остаётся такой же, как при 1920px, выравнивая содержимое по центру. Пример: [Удержание масштабирования на больших экранах](https://postnikovmd.com/mods/rescale/example) ### Постоянный отступ при масштабировании Чтобы при масштабировании по краям страницы оставался постоянный отступ, в настройках модификации можно дополнительно указать параметр `padding`. Он резервирует расстояние слева и справа, которое не меняется вместе с масштабом: ```html rescale.init({ min: 480, max: 1440, direction: "downscale", padding: 40 }) ``` Такой отступ помогает выровнять вёрстку стандартных и Zero-блоков между собой или задать одинаковый отступ для всей страницы. ### Масштабирование стандартных блоков Применить автоскейл к стандартным блокам можно с помощью функции rescale.block(): ```html rescale.block("#rec00000000") rescale.block(".uc-block") <!-- то же самое, только по классу --> ``` Если масштабирование необходимо применить сразу к нескольким блокам, их можно перечислить через запятую: ```html rescale.block("#rec10000001, #rec10000002, #rec10000003") ``` Пример: [Масштабирование стандартных блоков](https://postnikovmd.com/mods/rescale/default/example) Для корректной работы модификации убедитесь, что на странице есть хотя бы один Zero-блок с автоскейлом, чтобы настройки масштабирования подтянулись оттуда. ### Отключение автоскейла для устройств Если на некоторых устройствах или браузерах автоскейл работает некорректно, его можно отключить, указав в параметрах соответствующие ОС `os` и браузеры `browsers`: ```html rescale.disable({ os: "ios", browsers: "telegram, instagram" }) ``` Данный скрипт отключает автоскейл для встроенных браузеров на iOS. ## Распространенные проблемы ### Блоки некорректно скейлятся на промежуточных экранах Распространённая проблема, которая может возникать по нескольким причинам: 1. На указанных брейкпоинтах заданы свои настройки При обратном масштабировании за основу берётся максимальный брейкпоинт, поэтому для корректного отображения важно, чтобы вёрстка планшетной версии была такой же, как и у компьютерной. Чаще всего разъезжается вёрстка по вертикали — из-за того, что на планшетном брейкпоинте у блока задана своя высота. Её, как и остальные настройки, нужно сбросить до состояния старшего брейкпоинта. 2. Стандартные блоки имеют свою вёрстку для планшетов В некоторых случаях стандартные блоки имеют свои стили для определенной ширины экрана, которые накладываются на масштабирование автоскейлом и могут отображаться некорректно. В таком случае их стили необходимо сбросить через CSS. ### Некорректно скейлятся стандартные блоки Такая проблема может возникать из-за особенностей вёрстки — у некоторых блоков она устроена так, что при изменении размеров колонок/карточек хотя бы на один пиксель, они переносятся на следующий ряд, и общая сетка сбивается. Решить данную проблему можно с помощью CSS, уменьшив максимальную ширину (`max-width`) карточек или увеличив ширину общего контейнера на несколько пикселей. Кроме того, если масштабирование не применяется к конкретному блоку, проверьте, что на странице нет одновременного вызова rescale.init и rescale.block — расширенный автоскейл уже включает масштабирование стандартных блоков на всей странице, поэтому дополнительный вызов rescale.block для того же блока вызовет конфликт. ### Масштабирование не применяется вообще У данной проблемы есть две возможные причины: 1. На странице отсутствуют Zero-блоки с автоскейлом Расширенный автоскейл дополняет стандартную функцию Тильды, поэтому для его корректной работы важно, чтобы на странице присутствовали блоки со включенным масштабированием. 2. У последнего Zero-блока выключен автоскейл В качестве глобального коэффициента масштабирования принимается значение последнего Zero-блока на странице — если у него выключен автоскейл, результат будет равняться единице. Для решения проблемы убедитесь, что у последнего блока применяется масштабирование. ### Нужно исключить отдельные блоки из масштабирования По умолчанию модификация масштабирует все блоки на странице. Чтобы отключить автоскейл для отдельного блока, укажите его через псевдо-класс `:not()` при запуске модификации: ```html rescale.init(".t-rec:not(#rec10000000)", { min: 320, max: 480 }) ``` Аналогичным образом блок можно исключить по классу — `.t-rec:not(.uc-class)`. ### При загрузке возникают скачки масштабирования Во время загрузки страница сначала отрисовывается в исходном виде и только потом масштабируется — модификация загружается с CDN и применяется не мгновенно, поэтому в первый момент возможен скачок. Скрыть его поможет блок плавной загрузки T228: он отобразит содержимое страницы только после её загрузки. ### Текст на планшетах становится слишком большим Известная проблема, появляющаяся на старых планшетах Apple или при просмотре сайта в режиме разработчика с имитацией iPad. Зависит от стандартного автоскейла Тильды и решается обновлением ОС устройства или использованием адаптивного просмотра в инструментах разработчика. ### Возникает конфликт с другими модами Расширенный автоскейл совместим со всеми модификациями из исходной библиотеки и модификациями других авторов, использующих стандартный автоскейл. Сторонний код, переопределяющий стандартные функции масштабирования и событий запуска, с автоскейлом несовместим. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Хэдер в Zero-блоке Позволяет создать кастомный хэдер из Zero-блоков с фиксацией, управлением по скроллу, выпадающими меню, меню-бургером, поиском и множеством других настроек > Время настройки: 15 минут ## Как работает модификация ### Хэдер из Zero-блока Фиксированная часть `.uc-header` закрепляется в верхней части экрана через `position: fixed`. Модификация управляет её видимостью в зависимости от заданных параметров: - `hideonscroll` и `showonscroll` задают расстояние в пикселях, которое нужно проскроллить от текущей точки, чтобы хэдер скрылся или появился снова. Направление задаётся знаком значения: положительный `hideonscroll` скрывает хэдер при прокрутке вниз, отрицательный — при прокрутке вверх; для `showonscroll` наоборот — положительный показывает хэдер при прокрутке вверх, отрицательный — при прокрутке вниз. При прохождении указанного расстояния текущая точка расчёта обновляется; - `showoffset` устанавливает высоту в пикселях, до которой хэдер всегда скрыт. Это необходимо, когда в начале страницы существует статичный блок с хэдером: чтобы избежать наложения на него фиксированного хэдера, он скрывается и появляется только при прокрутке вниз. Появление и скрытие шапки происходит за счёт сдвига через `transform: translateY()`. Размер сдвига вычисляется на основе действующей высоты блока с хэдером, а скорость и тип перехода регулируется в настройках с помощью параметров `transition` и `easing`. Модификация поддерживает определение активной страницы. Для этого элементам навигации задаются ссылки и присваивается класс `.page`. Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс `.current`. При наведении на пункт меню, ему присваивается класс `.hover`. ### Выпадающее меню Выпадающее меню `.uc-submenu` закрепляется в верхней части экрана так же, как и основной хэдер, но учитывает сдвиг по оси Y на высоту хэдера. Разворачивается при наведении на триггерный шейп `.submenu`. Как и хэдер, поддерживает определение активной страницы для элементов с классом `.page`. Если адрес текущей страницы совпадает со ссылкой в настройках элемента, ему присваивается класс `.current` и применяются стили, указанные в настройках модификации. При наведении на ссылку, по которой должно открываться выпадающее меню, ей так же присваивается класс `.hover`. Выпадающих меню может быть несколько. Их порядок регулируется слоями: первому (нижнему) элементу `.submenu` соответствует первый Zero-блок `.uc-submenu`. ### Меню-бургер Меню-бургер представляет из себя отдельный блок, появляющийся на странице при клике на элемент со ссылкой `#menu` и скрывающийся по ссылке `#menu-close`. Работает так же, как поп-ап T1093, но может раскрываться как на весь экран, так и оставлять хэдер видимым, добавляя сдвиг на расстояние, равное его высоте. Поддерживает определение активной страницы для ссылок `.page` и имеет несколько анимаций раскрытия, которые можно настроить через параметр `animation`. ### Поиск по сайту Модификация встраивает стандартный блок поиска `T838` с классом `.uc-search` в шейпы `.search` в хэдере, меню и других блоках страницы. Поля поиска переносятся во все контейнеры с заданным классом и раскрывают выпадающее окно с результатами под хэдером с учётом его высоты. ## Начало работы ### Установка библиотеки Для работы хэдера необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией хэдера. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции: - [Хэдер из Zero-блока](https://postnikovmd.com/mods/header) ### Инструкция по установке #### Хэдер 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок с хэдером и присвойте ему класс `.uc-header` Фиксировать блок в настройках редактора и задавать ему z-index не нужно, модификация сделает это автоматически. 3. Задайте ссылкам, указывающим на другие страницы, класс `.page`. Данный класс позволит выделять страницы при наведении или в активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню. 4. Задайте в настройках модификации параметры и стили хэдера 5. Скопируйте код и вставьте его в блок `T123` в конец страницы Для плавной загрузки рекомендуется разместить хэдер и все его компоненты в конце страницы. #### Выпадающее меню 6. Создайте блоки с выпадающими меню и присвойте им класс `.uc-submenu` Фон этих блоков должен быть прозрачным. Если при раскрытии подменю у блока должно появляться затемнение, задайте фильтр в настройках фона и установите его высоту в 100% экрана. Фиксировать блок в настройках не нужно — модификация сделает это автоматически. 7. Задайте элементам, по которым будут раскрываться подменю, класс `.submenu` Если таких элементов несколько, то первому (нижнему в слоях) элементу с такой классом будет соответствовать первый Zero-блок с выпадающим меню. 8. Задайте ссылкам, указывающим на другие страницы, класс `.page`. Данный класс позволит выделять страницы при наведении или в активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню. 9. Задайте в параметрах модификации параметры и стили выпадающих меню #### Меню-бургер 10. Создайте Zero-блок с меню и присвойте ему класс `.uc-menu` Фон блока должен быть прозрачным. Если при раскрытии меню у блока должно появляться затемнение, задайте фильтр в настройках фона и установите его высоту в 100% экрана. Фиксировать блок в настройках редактора не нужно — модификация сделает это автоматически. 11. Задайте ссылкам, указывающим на другие страницы, класс `.page`. Данный класс позволит выделять страницы при наведении или активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню. 12. Добавьте на страницу кнопки открытия/закрытия меню: для кнопки открытия задайте ссылку `#menu`, для закрытия — `#menu-close` Если вы хотите, чтобы меню раскрывалось на весь экран, переместите кнопку закрытия в блок с меню и поставьте галочку в настройках модификации напротив параметра «Раскрывать на весь экран». 13. Задайте в настройках модификации параметры и стили меню #### Поиск по сайту 14. Добавьте на страницу блок поиска `T838` и присвойте ему класс `.uc-search` Для работы блока разрешите поиск по сайту: Настройки сайта → Ещё → Разрешить внутренний поиск по сайту. Подробнее 15. Задайте шейпам, в которых нужно разместить поиск, класс `.search` Поле поиска T838 появится во всех элементах на странице с указанным классом ### Элементы Ниже приведены элементы, из которых состоит Zero-хэдер. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/Ссылка | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | Пункты меню | Текстовые элементы или кнопки, содержащие ссылку на внутренние страницы в формате `/directory/page`. | `.page` | | Доп. элементы | Шейпы, иконки и др., относящиеся к пунктам меню. Используются в случаях, когда помимо самих ссылок необходимо изменять стили сопутствующих элементов. Их количество должно быть строго кратным количествам пунктов меню. | `.page-elem` | | Кнопка выпадающего меню | Элемент, при наведении на который появится выпадающее меню. Рекомендуется устанавливать его высоту в 100% высоты хэдера, чтобы избежать случайного вывода курсора при открытии меню. | `.submenu` | | Кнопка открытия меню | Элемент, по нажатию на который открывается бургер-меню. Может находиться как внутри хэдера, так и любом другом блоке | `#menu` | | Кнопка закрытия меню | Элемент в блоке с меню, по нажатию на который оно должно закрыться | `#menu-close` | | Контейнер для поиска | Шейп, внутрь которого необходимо поместить поиск по сайту T838. Может находиться в любом месте страницы. | `.search` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой хэдера. Подгружаются асинхронно как функции объекта `header`. | Функция | Описание | Триггер | | ----------------------------- | -------------------------------- | ---------- | | header.init(selector, params) | Инициализирует функционал хэдера | Load Start | В качестве аргументов для настройки кастомного хэдера передаются следующие параметры: | Параметр | Описание | Тип | Значение по умолчанию | | ---------------------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------- | | selector | Класс хэдера | string | .uc-header | | params.hideonscroll | Скрытие хэдера после прокрутки на указанное расстояние | number | - | | params.showonscroll | Отображение хэдера после прокрутки на указанное расстояние | number | - | | params.showoffset | Расстояние в пикселях, до которого хэдер всегда скрыт | number | - | | params.pages | Класс ссылок на другие страницы | string | '.page' | | params.elems | Класс дополнительных элементов для ссылок на другие страницы (шейпы, линии, иконки и др.) | string | '.page-elem' | | params.zindex | Пользовательский z-index для хэдера | number | 99990 | | params.transition | Длительность перехода для хэдера и его элементов в миллисекундах | number | 300 | | params.easing | Функция перехода для хэдера и его элементов | string | 'ease-in-out' | | params.linking | Параметры выделения активной страницы | object | {} | | params.linking.mode | Правило выделения активной страницы | string | 'exact' | | params.linking.levels | Макс. уровень вложенности url для проверки соответствия | number | 1 | | params.event | Пользовательское событие для запуска хэдера | string | -- | | params.timeout | Задержка после срабатывания события | number | 0 | | params.submenu.link.selector | Класс ссылок, по которым открываются выпадающие меню | string | '.submenu' | | params.submenu.link.elems | Класс элементов для ссылок, по которым открываются выпадающие меню | string | '.submenu-elem' | | params.submenu.pages | Класс ссылок на страницы внутри выпадающего меню | string | '.page' | | params.submenu.elems | Класс элементов для ссылок внутри выпадающего меню | string | '.page-elem' | | params.submenu.animate | Запускать анимации при раскрытии выпадающего меню | boolean | true | | params.submenu.transition | Длительность перехода выпадающего меню в миллисекундах | number | 300 | | params.submenu.easing | Функция перехода выпадающего меню | string | 'ease-in-out' | | params.menu.pages | Класс для ссылок на другие страницы | string | '.page' | | params.menu.elems | Класс для доп. элементов для ссылок на другие страницы | string | '.page-elem' | | params.menu.open | Ссылка для кнопки открытия меню | string | '#menu' | | params.menu.close | Ссылка для кнопки закрытия меню | string | '#menu-close' | | params.menu.fullscreen | Раскрывать меню во весь экран (игнорировать высоту хэдера) | boolean | false | | params.menu.hover | Открывать и закрывать меню-бургер по наведению | boolean | false | | params.menu.animate | Запуск анимаций элементов при раскрытии меню-бургера | boolean | true | | params.menu.animation | Анимация раскрытия меню | string | 'roll' | | params.menu.transition | Длительность перехода меню-бургера в миллисекундах | number | 300 | | params.menu.easing | Функция перехода меню-бургера | string | 'ease-in-out' | | params.search.container | Класс элементов для вставки поиска | string | '.search' | ### Активный пункт меню Модификация позволяет выделять цветом активный пункт меню. Через параметр `linking.mode` можно указать, по какому принципу будет выделяться активная страница: - `exact` — точное соответствие. Например, у кнопки ссылка `/mods`, и вы находитесь на страничке `/mods`, тогда она подсветится, как активная. Данный режим устанавливается по-умолчанию при инициализации хэдера. - `fuzzy` — совпадение по началу строки. Если у кнопки ссылка `/mods`, а вы на странице `/mods/docs`, то она подсветится, как активная, так как тоже начинается с `/mods`: ```js header.init(".uc-header", { linking: { mode: 'fuzzy' } }) ``` - `path` — совпадение по уровню вложенности, который регулируется через параметр `linking.levels`. Если задать проверку по 2-му уровню вложенности, то кнопка `/mods/docs` станет активной на странице `/mods/docs` и на всех вложенных страницах (например, `/mods/docs/basics`). Но останется неактивной на страничках `/mods` и `/mods/support`. ```js header.init(".uc-header", { linking: { mode: 'path', levels: 2 } }) ``` С помощью этих правил можно более точно регулировать подсветку активных пунктов в меню. ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы: **Запустить хэдер по срабатыванию события** Отложить инициализацию хэдера можно с помощью параметров `event` и `timeout`. Например, запустить модификацию через 100ms после срабатывания `customEvent` можно таким образом: ```js header.init(".uc-header", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки хэдера** Если код нужно выполнить после того, как хэдер и его компоненты запустятся, добавьте слушатель события `headerinit`: ```js window.addEventListener("headerinit", function(){ /*...*/ }) ``` **Запустить другую модификацию после отрисовки хэдера** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить аккордеон после отрисовки хэдера можно через событие `headerinit`: ```js accordion.init(".uc-accordion", { event: "headerinit" }) ``` ### Инициализация Код инициализации хэдера вставляется в блок T123 после всех его компонентов или в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--header.js Хэдер в Zero-блоке. https://postnikovmd.com/mods/header--> header.init(".uc-header") ``` ## Распространенные проблемы ### При загрузке хэдер проявляется на некоторое время Проблема связана с тем, что при загрузке страницы Тильда сначала отрисовывает блок, и только затем модификация его скрывает, что вызывает мерцание на доли секунд. Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы). ### Хэдер не скрывается при скролле Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Убедитесь, что она равняется физической высоте хэдера в пикселях, а сам блок не зафиксирован в настройках — модификация фиксирует его самостоятельно. ### Не появляются выпадающие меню при наведении Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Так как модификация завязана на расчете высоты основного хэдера, её наличие является ключевым фактором для работы остальных компонентов. Убедитесь, что высота Zero-блока с хэдером равняется его физической высоте в пикселях. Также проверьте, что триггерные элементы `.submenu` не перекрываются другими шейпами или блоками. ### Выпадающие меню сворачиваются слишком быстро Данная проблема возникает из-за того, что между триггерным элементом `.submenu` и нижней границей хэдера образуется пустое пространство. При попадании курсора в эту область, триггерный элемент перестаёт быть активным, и выпадающее меню скрывается. Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока. ### Выпадающие меню закрываются с задержкой Проблема может возникать из-за принудительной фиксации Zero-блока в его настройках, а также указания ему кастомного z-index. Для решения проблемы эти значения в редакторе лучше удалить — модификация устанавливает их автоматически. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Слайдер в Zero-блоке Позволяет создавать полностью кастомные слайдеры из Zero-блоков — с управлением кнопками, зацикливанием, табами и настраиваемой анимацией > Время настройки: 5 минут ## Как работает модификация ### Общие механики Слайдер основан на механике горизонтального скролла, который применяется к Zero-блоку или отдельному шейпу внутри него. В качестве слайдов могут выступать как отдельные шейпы, так и группы Object с классом `.slide`. Для определения области прокрутки вычисляются положение, размеры и отступы слайдов, после в контейнере создаётся прозрачный шейп, который определяет границы слайдера и область, которая будет прокручиваться. При наличии автоскейла его размеры умножаются на коэффициент масштабирования. Свайп, перемещение зажатой кнопкой мыши или нажатие на кнопки вперёд/назад вызывает функцию горизонтального скролла слайдера. Скорость прокрутки регулируется параметрами `transition` и `easing`, заданными в настройках модификации. После завершения прокрутки на основании координат и степени смещения слайдера, определяются слайды, попадающие в область видимости. Активному слайду присваивается класс `.active`, видимым слайдам — класс `.visible`. Изменение размеров экрана перезапускает отрисовку слайдера: он разбирается до первоначального состояния и собирается заново с учетом новых координат и настроек элементов. ### Классический слайдер в Zero-блоке Слайдер, в котором областью прокрутки является весь Zero-блок — вне зависимости от того, каким элементам задан класс `.slide`, скроллиться вместе со слайдами будут все остальные элементы. При создании такого слайдера, как правило, заголовок и кнопки выносятся в соседние блоки с таким же классом, чтобы избежать их прокрутки. Подробнее: [Классический слайдер в Zero-блоке](https://postnikovmd.com/mods/slider) ### Слайдер с переключением вкладок Слайдер, у которого при нажатии на каждый слайд или пролистывая до него скрываются/появляются соответствующие ему блоки. Данную вариацию слайдера можно использовать для создания кастомных табов, когда их количество больше, чем можно уместить на экран. Подробнее: [Слайдер с переключением вкладок](https://postnikovmd.com/mods/slider/tabs) ### Слайдер в любом шейпе Zero-блока Слайдер, встроенный внутрь шейпа в Zero-блоке. Работает так же, как и классический слайдер, но позволяет ограничить видимую область контейнера или расположить контент в этом же блоке. Подробнее: [Слайдер в любом шейпе Zero-блока](https://postnikovmd.com/mods/slider/shape) ## Начало работы ### Установка библиотеки Для работы слайдера необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией слайдера. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Классический слайдер в Zero-блоке](https://postnikovmd.com/mods/slider) - [Слайдер с переключением вкладок](https://postnikovmd.com/mods/slider/tabs) - [Слайдер в любом шейпе Zero-блока](https://postnikovmd.com/mods/slider/shape) ### Инструкция по установке #### Классический слайдер в Zero-блоке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте слайдер из двух Zero-блоков Расположите в одном блоке слайды и другие подвижные элементы, а в другом — кнопки управления и статичный контент. 3. Для каждого блока задайте класс `.uc-slider` Если вы планируете использовать несколько слайдеров на одной странице, задайте соответствующим им блокам разные названия классов, например, .uc-slider1, .uc-slider2 и т. д. 4. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый отдельный элемент в карточке, а их целиком. Внутри них при этом может быть неограниченное количество элементов. 5. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. Модификация будет воспринимать за слайды именно их. 6. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 7. Задайте в настройках модификации поведение слайдера и его анимацию 8. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Слайдер с переключением вкладок 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте слайдер из двух Zero-блоков Расположите в одном блоке слайды и другие подвижные элементы, а в другом — кнопки управления и статичный контент. 3. Для каждого блока задайте класс `.uc-slider` Если вы планируете использовать несколько слайдеров на одной странице, задайте соответствующим им блокам разные названия классов, например, .uc-slider1, .uc-slider2 и т. д. 4. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый отдельный элемент в карточке, а их целиком. Внутри них при этом может быть неограниченное количество элементов. 5. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. 6. Создайте блоки, которые будут переключаться при нажатии на карточки слайдов, и задайте им класс `.uc-slider-block` Они должны располагаться в той же последовательности, в которой заданы сами вкладки. Если вы планируете использовать несколько слайдеров на одной странице, задайте их блокам разные названия классов, оканчивающиеся на -block, например: .uc-slider1-block, .uc-slider2-block и т. д. 7. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 8. Задайте в настройках модификации поведение слайдера и его анимацию 9. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Слайдер в шейпе Zero-блока 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок со слайдером и задайте ему класс `.uc-slider` Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, uc-slider2 и т. д. 3. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый отдельный элемент в карточке, а их целиком. Внутри них при этом может быть неограниченное количество элементов. 4. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. 5. Объедините все карточки слайдера в единую группу и задайте ей тип `Object` В этой группе могут быть не только сами слайды, но и сопутствующие элементы — иконки, текст, кнопки и всё, что должно листаться вместе со слайдером. 6. Создайте шейп, внутри которого будет находиться слайдер и задайте ему класс `.container` Шейп можно расположить в любом месте Zero-блока. Его высота должна равняться высоте слайдера, а ширина — видимой области. 7. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 8. Задайте в настройках модификации поведение слайдера и его анимацию 9. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоит Zero-слайдер. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/Ссылка | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | | Слайды* | Элементы, которые принимаются за слайды и учитываются при расчёте ширины слайдера и других его параметров. В качестве них можно использовать шейпы или группы Object, при этом их количество должно совпадать с количеством физических слайдов в блоке. Если шейп находится внутри группы Object, то в качестве слайда будет приниматься именно она. Модификация автоматически определяет порядок слайдов на основании координат, заданных в Тильде, игнорируя расположение в слоях: ранжирование выполняется слева направо, сверху вниз. Активному слайду присваивается класс `.active`, слайдам, находящимся в поле видимости — класс `.visible`. | `.slide` | | Кнопки | Элементы, при клике на которые выполняется пролистывание слайдера. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы `.active` и `.inactive` соответственно. | `#prev`, `#next` | | Контейнер | Шейп, в который встраивается слайдер. Не должен иметь никаких настроек, кроме положения и размеров, чтобы слайды не наследовали его стили. Перед встраиванием в контейнер слайды необходимо объединить в общую группу Object. | `.container` | | Доп. элементы | Любые элементы, имеющие привязку к слайдам и наследующие его классы. Используются в случае, когда необходимо переключать состояние не только слайдов, но и сопутствующих им элементов. Чувствительны к расположению в слоях и количеству — должны располагаться непосредственно перед каждым слайдом, а их количество должно быть кратно количеству самих слайдов. | `.slide-elem` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой слайдера. Подгружаются асинхронно как функции объекта `slider`. | Функция | Описание | Триггер | | ---------------------------------------- | --------------------------------------------------------------- | ------------------------------- | | slider.init(selector, params) | Инициализирует отрисовку слайдера | DOMContentLoaded, Window Resize | | slider.destroy(selector) | Отключает слайдер и возвращает блоки до первоначальных настроек | Window Resize | | slider.scrollTo(selector, params, index) | Пролистывает слайдер до слайда index | - | В качестве аргументов для настройки слайдера передаются следующие параметры: | Параметр | Описание | Тип | Значение по умолчанию | | ------------------------------------- | ------------------------------------------------- | ------- | --------------------- | | selector | Класс слайдера | string | - | | params.select | Переключение слайдов, как вкладок | boolean | false | | params.loop | Зацикленное переключение слайдов | boolean | false | | params.center | Выравнивание активного слайда по центру | boolean | false | | params.rows | Количество рядов в слайдере | number | 1 | | params.vertical | Вертикальное переключение слайдов | boolean | false | | params.drag | Пролистывание слайдера зажатой мышью | boolean | true | | params.active | Активный слайд при загрузке страницы | number | 0 | | params.slides | Класс слайдов в слайдере | string | '.slide' | | params.elems | Класс элементов для слайдов | string | '.slide-elem' | | params.arrange | Авторанжирование слайдов по координатам | boolean | true | | params.filter | Фильтрация вложенных элементов | boolean | true | | params.blocks | Класс блоков для вкладок слайдера | string | selector + '-block' | | params.prev | Ссылка для кнопки переключения назад | string | '#prev' | | params.next | Ссылка для кнопки переключения вперед | string | '#next' | | params.container | Класс шейпа для вставки слайдера | string | '.container' | | params.padding | Учитывать внутренние отступы для слайдера в шейпе | boolean | true | | params.transition | Скорость переключения слайдов | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.autoplay | Автоматическое проигрывание слайдов | boolean | false | | params.interval | Интервал автопроигрывания слайдов | number | 6000 | | params.hash | Сохранять активную вкладку в адресной строке | boolean | false | | params.event | Пользовательское событие для запуска слайдера | string | -- | | params.timeout | Задержка после срабатывания события | number | 0 | | params.style | Стили слайдера | object | - | | params.style.active.backgroundColor | Цвет фона активного слайда | string | '#FFFFFF' | | params.style.active.borderColor | Цвет бордера активного слайда | string | '#FFFFFF' | | params.style.active.scale | Масштабирование активного слайда | number | 1.2 | | params.style.visible.opacity | Непрозрачность видимых слайдов | number | 0.2 | | params.style.visible.blur | Размытие видимых слайдов | number | 4 | | params.style.visible.grayscale | Ч/б эффект для видимых слайдов | number | 0 | | params.style.inactive.opacity | Непрозрачность неактивных слайдов | number | 0.2 | | params.style.inactive.blur | Размытие неактивных слайдов | number | 4 | | params.style.inactive.grayscale | Ч/б эффект для неактивных слайдов | number | 1 | | params.style.inactive.scale | Масштабирование неактивных слайдов | number | 0.8 | | params.style.controls.backgroundColor | Цвет фона активной стрелки | string | '#FFFFFF' | | params.style.controls.borderColor | Цвет бордера активной стрелки | string | '#FFFFFF' | | params.style.controls.backgroundImage | Иконка активной стрелки | string | 'https://...' | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека автоматически определяет порядок запуска — например, встроить слайдер в поп-ап можно при обычном вызове двух функций. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить слайдер по срабатыванию события** Отложить инициализацию слайдера можно с помощью параметров `event` и `timeout`. Например, запустить слайдер через 100ms после срабатывания `customEvent` можно таким образом: ```js slider.init(".uc-slider", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки слайдера** Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события `sliderinit-id`, где `sliderinit` — событие отрисовки слайдера, `id` — класс блока со слайдером без префикса `uc` или `rec`. Например, если у блока со слайдером класс `.uc-slider1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("sliderinit-slider1", function(){ /*...*/ }) ``` ### Инициализация Код инициализации слайдера вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--slider.js Слайдер в Zero-блоке. https://postnikovmd.com/mods/slider--> slider.init(".uc-slider") ``` ## Примеры использования ### Классический слайдер со стрелками Создаётся два Zero-блока с классом `.uc-slider` — в первый добавляются слайды `.slide`, а во второй — кнопки `#prev` и `#next`. По желанию можно настроить их стили в генераторе кода: ```html slider.init(".uc-slider", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Классический слайдер со стрелками](https://postnikovmd.com/mods/slider/example) ### Слайдер с автолэйаутом Аналог классического слайдера, свёрстанный с использованием автолэйаута. Каждый слайд — flex-группа с классом `.slide`, расположенная внутри Zero-блока с автолэйаутом. Такой слайдер визуально не отличим от классического, но добавлять слайды в интерфейсе намного удобнее. ```html slider.init(".uc-slider", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Слайдер с автолэйаутом](https://postnikovmd.com/mods/slider/example-flex) ### Слайдер с центрированием Вариант классического слайдера, в котором `center: true` сдвигает слайды так, чтобы активный находился по центру экрана. Верстается как классический слайдер или слайдер с автолэйаутом. ```html slider.init(".uc-slider", { center: true, loop: true, active: 2, style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" }, active: { scale: 1.2 }, visible: { opacity: .6 }, inactive: { opacity: .6 } } }) ``` Пример: [Слайдер с центрированием](https://postnikovmd.com/mods/slider/example-center) Дополнительно: В примере установили зацикливание слайдера через `loop: true`, сделали третий слайд активным по-умолчанию и задали масштабирование и непрозрачность для неактивных слайдов. ### Слайдер по Window-контейнеру Тот же классический слайдер, адаптированный под вёрстку в Window-контейнере. Для привязки по Window в настройках слайдов необходимо изменить тип контейнера с Grid на Window — модификация определяет её автоматически, поэтому отдельный параметр в коде указывать не нужно. Код инициализации аналогичен предыдущим вариантам: ```html slider.init(".uc-slider", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Слайдер по Window-контейнеру](https://postnikovmd.com/mods/slider/example-window) ### Слайдер с переключением вкладок Классический слайдер с классом `.uc-slider`, слайдами `.slide` и кнопками `#prev` и `#next`, после которого размещаются переключаемые блоки с классом `.uc-slider-block`. ```html slider.init(".uc-slider", { elems: ".slide-img, .slide-arrow", style: { active: { backgroundColor: "#18181B" }, controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Для того, чтобы логотип и кнопка изменяли свои стили в активном состоянии так же, как и подложка, задаем им отдельные классы `.slide-img` и `.slide-arrow`, указываем их в параметре `elems` и прописываем дополнительный CSS для их стилизации, используя класс `.active`. ```html /* Задаём стили для логотипов и стрелок на карточках */ .uc-slider .slide-img .tn-atom { opacity: .3 !important; /* Задаём неактивному логотипу непрозрачность 30% */ } .uc-slider .slide-img.active .tn-atom { opacity: 1 !important; /* Делаем активный логотип полностью непрозрачным */ filter: invert(1); /* Инвертируем цвета логотипа для тёмного фона */ } .uc-slider .slide-arrow.active .tn-atom { background-color: #7366FF !important; /* Перекрашиваем фон активной кнопки со стрелкой */ background-image: url(https://static.postnikovmd.com/mods/arrow-diagonal-down-w.svg) !important; /* Загружаем своё изображение для активной стрелки */ } ``` Пример: [Слайдер с переключением вкладок](https://postnikovmd.com/mods/slider/tabs/example) ### Слайдер с сохранением активной вкладки Практически полный аналог слайдера с переключением вкладок, но с добавлением параметра `hash: true`. Благодаря нему при переходе по вкладкам в адресной строке будет сохраняться ссылка на активную вкладку. ```html slider.init(".uc-slider", { hash: true, elems: ".slide-img, .slide-arrow", style: { active: { backgroundColor: "#18181B" }, controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Слайдер с сохранением активной вкладки](https://postnikovmd.com/mods/slider/tabs/example-hash) ### Слайдер в шейпе Zero-блока Верстается как обычный слайдер, затем всё его содержимое объединяется в группу Object и помещается в прозрачный шейп с классом `.container`. ```html slider.init(".uc-slider", { autoplay: true, style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` В данном примере включили автоматическое пролистывание слайдов через `autoplay: true`, что также зациклило его переключение. Пример: [Слайдер в шейпе Zero-блока](https://postnikovmd.com/mods/slider/shape/example) ### Вертикальный слайдер Аналогично горизонтальному слайдеру в шейпе, размещаем слайды вертикально и добавляем параметр `vertical: true` в код инициализации. ```html slider.init(".uc-slider", { vertical: true, autoplay: true, style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Вертикальный слайдер](https://postnikovmd.com/mods/slider/shape/example-vertical) ### Слайдер внутри Zero-вкладок Чтобы запустить слайдеры внутри [Zero-вкладок](https://postnikovmd.com/mods/tabs/), достаточно задать им класс .uc-tabs и инициализировать их через ID блоков. Вкладки при этом запускаются как обычно. ```html <!--slider.js Слайдер внутри Zero-вкладок. https://postnikovmd.com/mods/slider--> slider.init("#rec1972250681") slider.init("#rec1972274581") slider.init("#rec1972274631") tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF", color: "#000000" } } }) ``` Пример: [Слайдер внутри Zero-вкладок](https://postnikovmd.com/mods/slider/example-tabs) ### Слайдер в поп-апе Слайдер во всплывающем окне можно реализовать двумя способами: с помощью блока T1093 или модификации [кастомных поп-апов в Zero-блоке](https://postnikovmd.com/mods/popup). ```html slider.init(".uc-slider") ``` При использовании отдельной модификации для поп-апа, в блок T123 со слайдером добавляется ещё один код с его инициализацией. ```html slider.init(".uc-slider") popup.init(".uc-slider", { animation: "zoom", style: { blur: 4 } }) ``` Пример: [Слайдер в поп-апе](https://postnikovmd.com/mods/slider/shape/example-popup) ## Распространенные проблемы ### Пустое пространство после слайдера Наиболее распространённая проблема, которая может возникать по нескольким причинам: 1. Количество элементов с классом `.slide` превышает количество самих слайдов в блоке Модификация учитывает ширину каждого элемента .slide при расчете общей ширины слайдера, поэтому, если их больше, чем количество слайдов, после слайдера может оставаться пустое пространство. По той же причине слайдер может прокручиваться дальше последнего слайда или листаться слишком короткими шагами – количество элементов с классом .slide должно совпадать совпадало с реальным количеством слайдов. 2. Размеры слайдов или расстояние между ними отличается Ширина слайдера рассчитывается, как (ширина слайда + отступ) количество слайдов, поэтому для его корректной работы важно, чтобы слайды имели одинаковые размеры и располагались на одинаковом расстоянии друг от друга. 3. У слайдов отличается Y-координата Модификация автоматически определяет порядок слайдов на основании их координат — слева направо и сверху вниз. Если у некоторых слайдов отличается положение относительно верхнего края, слайдер принимает их за второй ряд и не учитывает их при расчёте эффективной ширины. ### Не нажимаются кнопки внутри слайдов Причина проблемы заключается в том, что по-умолчанию у слайдера включена функция перетаскивания мышью. При нажатии на кнопку может возникать коллизия событий — одновременный клик и скролл слайдера, из-за чего кнопки могут не срабатывать. Для решения проблемы отключите перетаскивание мышью в генераторе кода или через параметр `drag: false`. ### Не работают кнопки управления У данной проблемы есть две возможные причины: 1. У слайдов отличается Y-координата Если первый слайд находится ниже остальных, модификация отнесёт его ко второму ряду, и расстояние, необходимое для прокрутки до следующего слайда, станет отрицательным, а значит, слайдер не сможет его пролистать. Для корректной работы кнопок все слайды рекомендуется выровнять по верхнему краю. 2. В контейнере умещаются все слайды Если ширина Zero-блока или шейпа `.container` умещает все слайды целиком, скролл внутри него становится физически невозможным. ### У элементов появляется странная заливка/стили Элементы, встроенные в шейп, наследуют стили своего контейнера – например, если у шейпа стоит заливка и бордер, его содержимое получит такие же стили. Чтобы избавиться от проблемы, убедитесь, что шейп не содержит никаких настроек, кроме позиционирования и размеров и располагается в слоях позади самих слайдов. ### Некорректно работают иконки у стрелок Изменение фона и иконки для стрелок в активном состоянии поддерживается только для элементов с типом Shape. Если стрелка загружена как Image, её изображение будет перекрывать иконку в активном состоянии. Если обе стрелки повёрнуты в одну сторону, задайте «назад» то же изображение, что и стрелке «вперёд», и поверните её на 180º в настройках элемента. ### Возникает конфликт с другими модами Модификации других авторов или сторонний код, влияющий на отображение элементов при загрузке (например, скрывающий или перемещающий их), необходимо запускать после отрисовки слайдера. Известные конфликты: - `smoothscroll.js` — вызывает дергание слайдера при пролистывании; - `fullpage.js` — вызывает сдвиг слайдера и влияет на корректность расчёта его параметров. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Вкладки в Zero-блоке Позволяет создавать кастомные табы из Zero-блоков — с активными вкладками, управлением кнопками и настраиваемой анимацией > Время настройки: 2 минуты ## Как работает модификация ### Общие механики Модификация управляет видимостью блоков и отдельных элементов по клику на заданные ссылки. Вкладки и переключаемый контент помещаются в общий контейнер, который содержит параметры и стили модификации и используется для управления табами. В качестве переключаемого контента могут выступать как целые блоки, так и группы Object. Переключение контента осуществляется за счёт css-свойств `display` и `opacity`, плавность которых регулируется параметрами `transition` и `easing`. Если вкладка открыта, ей присваивается класс `.selected`. Активной и неактивной стрелке присваиваются классы `.active` и `.inactive` соответственно. При наличии в блоках базовой или SBS-анимации, она проигрывается при каждом переключении. ### Табы со вкладками и стрелками Классический вариант табов, который переключает вкладки по кнопкам и стрелкам, находящимся в отдельном блоке. Для кнопок используются ссылки `#tab`, для стрелок `#prev` и `#next`. Подробнее: [Табы со вкладками и стрелками](https://postnikovmd.com/mods/tabs) ### Переключатель Zero-блоков по кнопкам Вариант классических табов, в котором кнопки `#tab` находятся внутри переключаемых блоков. Подходит для случаев, когда контент нужно расположить сбоку от вкладок. Подробнее: [Переключатель Zero-блоков по кнопкам](https://postnikovmd.com/mods/tabs/inline) ### Переключатель контента в Zero-блоке Переключатель, в котором все вкладки и контент находится в рамках одного Zero-блока. Данный вариант можно использовать не только, как вкладки, но и добавлять эффекты и анимации в Zero-блок. Настраивается и работает так же, как и классические табы. Подробнее: [Переключатель контента в Zero-блоке](https://postnikovmd.com/mods/tabs/switch) ## Начало работы ### Установка библиотеки Для работы вкладок необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией вкладок. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Табы со вкладками и стрелками](https://postnikovmd.com/mods/tabs) - [Переключатель Zero-блоков по кнопкам](https://postnikovmd.com/mods/tabs/inline) - [Переключатель контента в Zero-блоке](https://postnikovmd.com/mods/tabs/switch) ### Инструкция по установке #### Классические вкладки из Zero-блоков 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок со вкладками и присвойте ему класс `.uc-tabs-header` Если вы планируете использовать на странице несколько групп табов, задайте им разные названия классов, оканчивающиеся на -header, например, .uc-tabs1-header, uc-tabs2-header и т. д. 3. Создайте блоки, которые будут отображаться при нажатии на вкладки и присвойте им класс `.uc-tabs` Блоки должны располагаться друг за другом в том же порядке, что и вкладки. Если вы планируете использовать на странице несколько групп табов, задайте им разные классы, например, .uc-tabs1, .uc-tabs2 и т. д. 4. Задайте каждой вкладке (элементу/группе с типом `Object`) ссылку `#tab` Если у вкладок есть дополнительные элементы (шейпы, текст, иконки и др.), присвойте им класс .tab-elem. Эти элементы будут скрываться у неактивных вкладок и отображаться у активной. 5. Расположите вкладки в слоях в порядке возрастания. Самой нижней вкладке будет соответствовать первый контентный блок, а каждой следующей — на уровень выше. 6. Для переключения вкладок по кнопкам, добавьте их в отдельный блок и присвойте ему класс `.uc-tabs-footer`. Если вы планируете использовать на странице несколько групп табов, задайте им разные названия классов, оканчивающиеся на -footer, например, .uc-tabs1-footer, .uc-tabs2-footer и т. д. 7. Задайте ссылки кнопкам переключения: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 8. Задайте в настройках модификации поведение вкладок и их анимацию 9. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Переключатель Zero-блоков по кнопкам 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте блоки, которые будут переключаться и присвойте им класс `.uc-tabs` Если вы планируете использовать на странице несколько групп табов, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т. д. 3. Задайте каждой вкладке (элементу/группе с типом `Object`) ссылку `#tab` 4. Расположите вкладки в слоях в порядке возрастания. Первой (нижней) вкладке будет соответствовать первый Zero-блок, а последней (верхней) — последний Zero-блок. 5. Если вы хотите переключать блоки по кнопкам внутри каждого блока, задайте им ссылки — `#next` для кнопок «вперёд» и `#prev` для кнопок «назад» Если кнопки нужно расположить в блоке, который не должен переключаться, задайте ему класс .uc-tabs-header. Если на странице используется несколько групп табов, присвойте им разные классы — .uc-tabs1-header, .uc-tabs2-header и т.д. 6. Задайте в настройках модификации поведение вкладок и их анимацию 7. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Переключатель контента в Zero-блоке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок с переключаемым контентом и присвойте ему класс `.uc-tabs` Если вы планируете использовать несколько таких блоков на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т. д. 3. Добавьте вкладки в блок с контентом и присвойте им ссылку `#tab` В качестве вкладок можно использовать как отдельные элементы, так и группы с типом Object. В обоих случаях им нужно присвоить ссылку #tab. Если вкладки должны менять внешний вид в активном состоянии, создайте поверх каждой из них копию с нужным стилем и присвойте ей ссылку #tab и класс .tab-active. Активные элементы будут появляться только у выбранной вкладки. 4. Добавьте в блок элементы, которые должны переключаться и присвойте им класс `.tab-elem` Если по нажатии на вкладку должно переключаться несколько элементов, объедините их в группу с типом Object и присвойте ей такой же класс. 5. Расположите вкладки/элементы в слоях в порядке возрастания Первой (нижней) вкладке в слоях будет соответствовать первый элемент с контентом и первая активная вкладка. 6. Если вы хотите переключать контент по кнопкам, задайте для кнопки «вперёд» ссылку `#next` и для кнопки «назад» ссылку `#prev` 7. Задайте в настройках модификации поведение вкладок и их стили 8. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоят Zero-вкладки. Они задаются и настраиваются в интерфейсе Тильды. Классические табы со вкладками и стрелками: | Элемент | Описание | Класс/Ссылка | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | Вкладки* | Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый блок с контентом. | `#tab` | | Контент* | Блоки/группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях. В классических табах и переключателе блоков в качестве контента используются стандартные и Zero-блоки с классом, указанным в аргументе `selector` в коде инициализации. При использовании переключателя контента в одном блоке, группам Object задаётся класс `.tab-elem`. | `.uc-tabs` | | Кнопки | Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы `.active` и `.inactive` соответственно. | `#prev`, `#next` | | Хэдер табов | Отдельный блок, в котором располагаются вкладки `#tab` и/или кнопки `#prev` и `#next`. Используется только в классическом варианте и располагается строго перед самими вкладками. Класс футера задаётся как класс вкладок и суффикс `-header` в конце. | `.uc-tabs-header` | | Футер табов | Отдельный блок, в котором располагаются вкладки `#tab` и/или кнопки `#prev` и `#next`. Используется только в классическом варианте и располагается строго после вкладок. Класс футера задаётся как класс вкладок и суффикс `-footer` в конце. | `.uc-tabs-footer` | | Доп. элементы | Любые элементы, имеющие привязку ко вкладкам и наследующие их классы. Используются в случае, когда необходимо переключать состояние не только вкладок, но и сопутствующих им элементов. Чувствительны к расположению в слоях и количеству — должны располагаться непосредственно перед каждой вкладкой, а их количество должно быть кратно количеству самих вкладок. | `.tab-elem` | — обязательные элементы Переключатель Zero-блоков по кнопкам: | Элемент | Описание | Класс/Ссылка | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | | Вкладки* | Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый элемент/блок с контентом. | `#tab` | | Контент* | Блоки/группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях. | `.uc-tabs` | | Кнопки | Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы `.active` и `.inactive` соответственно. | `#prev`, `#next` | — обязательные элементы Переключатель контента в Zero-блоке: | Элемент | Описание | Класс/Ссылка | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | | Вкладки* | Элементы/группы Object, при нажатии на которые переключается контент табов. Принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях: первой (нижней) вкладке соответствует первый (нижний) элемент с контентом. | `#tab` | | Контент* | Группы Object, переключающиеся при нажатии на вкладки. Так же, как и вкладки, принимают класс `.selected` в активном состоянии и чувствительны к расположению в слоях. | `.tab-elem` | | Кнопки | Элементы, при клике на которые выполняется переключение вкладок. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. Активной и неактивной стрелке присваиваются классы `.active` и `.inactive` соответственно. | `#prev`, `#next` | | Активные вкладки | Отдельные элементы/группы Object, работающие так же, как и вкладки, но отображающиеся только при их выборе. Используются в случаях, когда необходимо существенно изменить стиль активной вкладки, не прибегая к коду. Располагаются поверх обычных вкладок, так же чувствительны к расположению в слоях и имеют ссылку `#tab`. | `.tab-active` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой табов. Подгружаются асинхронно как функции объекта `tabs`. | Функция | Описание | Триггер | | --------------------------- | --------------------------- | ------------------ | | tabs.init(selector, params) | Инициализирует Zero-вкладки | DOM Content Loaded | | tabs.toggle(selector, params, direction) | Переключает вкладки в направлении `prev`/`next` | - | В качестве аргументов для настройки вкладок передаются параметры: | Параметр | Описание | Тип | Значение по умолчанию | | ------------------------------------- | ------------------------------------------------ | -------- | --------------------- | | selector | Класс блока с содержимым вкладок | string | - | | params.header | Класс блока со вкладками | string | selector + '-header' | | params.footer | Класс блока с кнопками управления | string | selector + '-footer' | | params.tabs | Ссылка для вкладок | string | '#tab' | | params.active | Класс активных вкладок | string | '.tab-active' | | params.elems | Класс переключающихся элементов | string | '.tab-elem' | | params.prev | Ссылка для кнопки «Назад» | string | '#prev' | | params.next | Ссылка для кнопки «Вперёд» | string | '#next' | | params.slide | Номер активного слайда | number | 0 | | params.click | Переключение вкладок по клику | boolean | true | | params.hover | Переключение вкладок по наведению | boolean | false | | params.swipe | Переключение вкладок по свайпу | boolean | false | | params.hash | Сохранение активной вкладки при перезагрузке | boolean | false | | params.filter | Фильтрация вложенных элементов | boolean | true | | params.transition | Скорость переключения вкладок в миллисекундах | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.autoplay | Автоматическое переключение вкладок | boolean | false | | params.interval | Интервал переключения вкладок | number | 6000 | | params.event | Пользовательское событие для запуска вкладок | string | -- | | params.timeout | Задержка после срабатывания события | number | 0 | | params.onchange | Пользовательская функция при смене вкладки | function | - | | params.style | Стили вкладок | object | {} | | params.style.active.backgroundColor | Цвет фона активной вкладки | string | '#FFFFFF' | | params.style.active.color | Цвет текста активной вкладки | string | '#FFFFFF' | | params.style.active.borderColor | Цвет бордера активной вкладки | string | '#FFFFFF' | | params.style.active.fontWeight | Насыщенность шрифта активной вкладки | number | -- | | params.style.active.fontUnderline | Толщина подчёркивания активной вкладки (px) | number | -- | | params.style.inactive.opacity | Непрозрачность неактивных вкладок | number | 0.2 | | params.style.elems.opacity | Непрозрачность доп. элементов неактивных вкладок | number | -- | | params.style.controls.backgroundColor | Цвет фона активной стрелки | string | '#FFFFFF' | | params.style.controls.borderColor | Цвет бордера активной стрелки | string | '#FFFFFF' | | params.style.controls.backgroundImage | Иконка активной стрелки | string | 'https://...' | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека инициализирует вкладки по отложенному принципу — если внутри блоков находятся другие модификации, запуск вкладок откладывается до их полной отрисовки. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить вкладки по срабатыванию события** Отложить инициализацию табов можно с помощью параметров `event` и `timeout`. Например, запустить их через 100ms после срабатывания `customEvent` можно таким образом: ```js tabs.init(".uc-tabs", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки вкладок** Если код нужно выполнить после того, как табы полностью запустятся, добавьте слушатель события `tabsinit-id`, где `tabsinit` — событие их отрисовки, `id` — класс блока со вкладками без префикса `uc` или `rec`. Например, если у блока со вкладками класс `.uc-tabs1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("tabsinit-tabs1", function(){ ... }) ``` ### Инициализация Код инициализации вкладок вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--tabs.js Вкладки в Zero-блоке. https://postnikovmd.com/mods/tabs--> tabs.init(".uc-tabs") ``` ## Примеры использования ### Табы со вкладками и стрелками Классический вариант табов: вкладки, состоящие из шейпов `#tab` и текстовых элементов `.tab-elem`, помещаются в хэдер `.uc-tabs-header`, а переключаемые блоки `.uc-tabs` располагаются под ними. Стили состояний для вкладок и элементов настраиваются в генераторе кода: ```html tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } }) ``` Пример: [Табы со вкладками и стрелками](https://postnikovmd.com/mods/tabs/example) ### Табы с автолэйаутом Аналог классических табов, свёрстанный с использованием автолэйаута. Такой вариант визуально не отличим от предыдущего, но добавлять вкладки в интерфейсе намного удобнее: ```html tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } }) ``` Пример: [Табы с автолэйаутом](https://postnikovmd.com/mods/tabs/example-flex) ### Вкладки со слайдером Если внутри вкладок необходимо разместить один или несколько [слайдеров](https://postnikovmd.com/mods/slider), достаточно инициализировать вкладки по классу, а слайдеры – по ID. ```html <!--slider.js Слайдер внутри Zero-вкладок. https://postnikovmd.com/mods/slider--> slider.init("#rec000000001") slider.init("#rec000000002") slider.init("#rec000000003") tabs.init(".uc-tabs") ``` Пример: [Слайдер внутри Zero-вкладок](https://postnikovmd.com/mods/slider/example-tabs) ### Переключатель Zero-блоков по кнопкам Классические табы, у которых кнопки `#tab` располагаются непосредственно в переключаемых блоках `.uc-tabs`. Так как в исходном примере переключается 3 блока, то суммарное количество вкладок должно равняться 9. По инструкции располагаем их в правильном порядке и убираем плавность перехода с помощью параметра `transition: 0`. ```html tabs.init(".uc-tabs", { transition: 0 }) ``` Пример: [Переключатель Zero-блоков по кнопкам](https://postnikovmd.com/mods/tabs/inline/example) ### Переключатель с сохранением активной вкладки Если при попадании на страницу нужно открыть конкретную вкладку, можно воспользоваться параметром `hash: true`. При переключении вкладок он добавляет к ссылке в адресной строке хэш вида `#tab1234567890-1`, где `1234567890` — идентификатор первого блока в группе, `-1` — номер активной вкладки. ```html tabs.init(".uc-tabs", { hash: true, transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } }) ``` Ссылку на страницу с хэшем можно скопировать из адресной строки браузера и в дальнейшем использовать в кнопках, например: `https://example.com/page#tab1234567890-2` Пример: [Классические табы с сохранением активной вкладки](https://postnikovmd.com/mods/tabs/example-hash) Пример: [Переключатель Zero-блоков с сохранением активной вкладки](https://postnikovmd.com/mods/tabs/inline/example-hash) ### Переключатель контента в Zero-блоке Если всё содержимое должно переключаться в рамках одного блока, добавляем вкладки `#tab`, как группы Object или отдельные элементы, таким же образом создаём переключаемые элементы с классом `.tab-elem` и при необходимости — вкладки в активном состоянии `.tab-active`. По инструкции располагаем их в правильном порядке и добавляем параметр `hover: true` для переключения по наведению. ```html tabs.init(".uc-tabs", { hover: true }) ``` Пример: [Переключатель контента в Zero-блоке](https://postnikovmd.com/mods/tabs/switch/example) ### Переключатель контента в поп-апе Вкладки во всплывающем окне можно реализовать двумя способами: с помощью блока T1093 или модификации [кастомных поп-апов в Zero-блоке](https://postnikovmd.com/mods/popup). Для стандартного T1093 вкладки запускаются как обычно: ```html tabs.init(".uc-tabs", { hover: true }) ``` При использовании отдельной модификации для поп-апа, в блок T123 со слайдером добавляется ещё один код с его инициализацией. ```html tabs.init(".uc-tabs", { hover: true }) popup.init(".uc-tabs", { animation: "zoom", style: { blur: 4 } }) ``` Пример: [Переключатель контента в поп-апе](https://postnikovmd.com/mods/tabs/switch/example-popup) ### Выполнение стороннего кода при смене вкладки Пользовательскую функцию, которая будет выполняться при переключении вкладок, можно задать через параметр `onchange`. На входе она принимает `slide` в качестве аргумента – индекс вкладки, на которую произошло переключение. ```html tabs.init(".uc-tabs", { onchange: function(slide){ /*...*/ } }) ``` ## Распространенные проблемы ### Вкладки переключаются в случайном порядке Распространенная проблема, возникающая по следующим причинам: 1. Не соблюден порядок вкладок в слоях Модификация чувствительна к расположению вкладок в слоях, так как с помощью этого привязывает их к переключаемому контенту. Проверьте, что вкладки заданы в правильном порядке: первой (нижней в слоях) вкладке будет соответствовать первый переключаемый блок или элемент. 2. Количество вкладок не совпадает с количеством контента Так как вкладки и контент привязываются по принципу «1 к 1», лишние элементы могут нарушить их порядок. При возникновении такой проблемы, убедитесь, что ссылки `#tab` и классы `.tab-elem` заданы у одинакового количества элементов. ### Вкладки не переключаются совсем Данная проблема может возникать из-за того, что вкладки перекрывают другие элементы, и взаимодействие с ними становится невозможным. Для решения проблемы убедитесь, что вкладки не перекрываются другими элементами/блоками. ### При переключении вкладок контент сдвигается вниз Проблема связана с наличием внутренних отступов (padding) в настройках раскрывающихся блоков. Когда блоки скрываются, их высота становится равной нулю, а установленные отступы создают дополнительное пространство, которое сдвигает каждый следующий блок вниз. Для решения проблемы убедитесь, что у скрывающихся/раскрывающихся блоков отсутствуют отступы в настройках блока. ### Не меняется цвет текста активной вкладки Параметр `style.active.color` перекрашивает вкладку в активном состоянии, если она является кнопкой (Button). Если вкладка сделана текстовый элемент с классом `.tab-elem`, её цвет можно изменить через дополнительный css по классу `.tab-elem.selected`. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Кастомные формы в Zero-блоке Позволяет создавать несколько форм с кастомным дизайном внутри Zero-блока и собирать их в единую форму отправки данных > Время настройки: 1 минута ## Как работает модификация ### Общие механики Модификация объединяет несколько Zero-форм, расположенных в одном блоке, в единую форму отправки данных. Первая форма (нижняя в слоях) становится основной — именно к ней подключаются приёмщики данных и именно она отправляет заявку. Значения всех остальных форм собираются и передаются в неё через скрытые поля. После загрузки блок оборачивается в контейнер `.t-forms-container`, а модификация дожидается полной отрисовки Zero-форм Тильды. Затем она считывает поля всех дополнительных форм, создаёт для них скрытые поля внутри основной формы и синхронизирует их значения при каждом изменении. Поддерживаются все типы полей: текст, телефон с маской, чекбоксы, радиокнопки и загрузка файлов. Стандартные кнопки отправки в дополнительных формах удаляются, а отправка всех форм запускается по клику на свою кнопку со ссылкой `#submit` или по нажатию Enter. Перед отправкой выполняется проверка полей через валидацию Тильды — если есть ошибки, заявка не отправляется, а ошибки подсвечиваются. После успешной отправки модификация очищает поля и, если форма находится внутри стандартного поп-апа, закрывает его. Модификация подгружается синхронно, до отрисовки страницы, поэтому формы собираются ещё до того, как пользователь начнёт с ними взаимодействовать. Подробнее: [Кастомная мультиформа в Zero-блоке](https://postnikovmd.com/mods/forms) ### Своё окно успешной отправки данных Модификация позволяет заменить стандартное сообщение об успешной отправке на свой Zero-блок. Заданный блок скрывается, клонируется во всплывающее окно успеха и показывается после отправки формы. Кнопкам закрытия задаётся ссылка `#close`. Подробнее: [Своё окно успешной отправки данных](https://postnikovmd.com/mods/forms/success) ### Свои условия проверки форм Модификация позволяет задавать собственные правила валидации для полей ввода и выводить кастомное сообщение при ошибке. В качестве условия можно использовать как стандартную операцию (больше, меньше, содержит и др.), так и собственную функцию. Подробнее: [Свои условия проверки форм в Zero-блоке](https://postnikovmd.com/mods/forms/validate) ## Начало работы ### Установка библиотеки Для работы форм необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Кастомная мультиформа в Zero-блоке](https://postnikovmd.com/mods/forms) - [Своё окно успешной отправки данных](https://postnikovmd.com/mods/forms/success) - [Свои условия проверки форм в Zero-блоке](https://postnikovmd.com/mods/forms/validate) ### Инструкция по установке #### Кастомная мультиформа в Zero-блоке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Создайте Zero-блок и добавьте в него необходимые формы Они могут состоять из любого количества полей и быть расположены в любом месте внутри Zero-блока. 2. Расположите формы в слоях в правильном порядке. Если при отправке данных важно соблюдать порядок полей, расположите их в слоях в порядке возрастания: поля первой (нижней в слоях) формы будут отображаться в заявках в начале, последней (верхней) — в конце. 3. Подключите приемщики данных к первой форме Для всех остальных форм подключение приемщиков не обязательно. 4. Скройте стандартные кнопки отправки данных и добавьте в блок свою кнопку со ссылкой `#submit` Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0). Исключение — для форм, содержащих поля загрузки файлов, скрывать кнопку отправки не нужно. 5. Задайте в настройках модификации ID блока с мультиформой 6. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Своё окно успешной отправки данных 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Создайте Zero-блок с сообщением об успешной отправке данных Для того, чтобы всплывающее окно с блоком отображалось на весь экран, установите его высоту в 100% экрана 2. Задайте ссылку `#close` для кнопок закрытия всплывающего окна 3. Задайте в настройках модификации ID Zero-блока с сообщением об успехе 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоит мультиформа. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/ссылка | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | Кнопка отправки формы* | Элемент, при нажатии на который отправляются все формы блока. Стандартные кнопки отправки в Zero-формах нужно скрыть (убрать текст и задать нулевые ширину и высоту), кроме форм с загрузкой файлов. | `#submit` | | Кнопка закрытия поп-апа | Элемент, при нажатии на который закрывается всплывающее окно успешной отправки данных. | `#close` | \* — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой форм. Подгружаются синхронно, до срабатывания `t_onReady()`, как функции объекта `forms`. | Функция | Описание | Триггер | | ------------------------------- | ---------------------------------------------------- | ------------------ | | forms.init(selector, params) | Инициализирует мультиформу | DOM Content Loaded | | forms.success(selector, params) | Инициализирует сообщение об успешной отправке данных | DOM Content Loaded | | forms.validate(name, params) | Инициализирует валидацию полей в формах | DOM Content Loaded | В качестве аргументов для настройки форм передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ---------------- | --------------------------------------------------------- | -------- | --------------------- | | selector | Селектор для мультиформы / сообщения об успешной отправке | string | - | | params.submit | Ссылка для кнопки отправки формы | string | '#submit' | | params.close | Ссылка для кнопок закрытия сообщения об успешной отправке | string | '#close' | | params.onSuccess | Функция, которая выполняется при успешной отправке формы | function | - | | params.event | Пользовательское событие для запуска мультиформы | string | - | | params.timeout | Задержка после срабатывания события | number | 0 | Для валидации полей через `forms.validate` передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | --------------- | ----------------------------- | ---------------------- | --------------------- | | name | Название переменной (input) | string | - | | params.rule | Правило валидации поля | string/function(value) | - | | params.value | Значение для валидации поля | string/number/boolean | - | | params.message | Своё сообщение об ошибке | string | - | | params.onchange | Запускать валидацию при вводе | boolean | false | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы: **Запустить мультиформу по срабатыванию события** Отложить инициализацию форм можно с помощью параметров `event` и `timeout`. Например, запустить мультиформу через 100ms после срабатывания `customEvent` можно таким образом: ```js forms.init(".uc-forms", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после сборки мультиформы** Если код нужно выполнить после того, как мультиформа полностью соберётся, добавьте слушатель события `formsinit`, которое срабатывает после сборки всех форм на странице: ```js window.addEventListener("formsinit", function(){ ... }) ``` **Запустить другую модификацию после сборки мультиформы** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после сборки мультиформы можно через событие `formsinit`: ```js popup.init(".uc-popup", { event: "formsinit" }) ``` ### Инициализация Код инициализации мультиформы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--forms.js Кастомные формы в Zero-блоке. https://postnikovmd.com/mods/forms--> forms.init("#rec00000000") ``` ## Примеры использования ### Мультиформа в Zero-блоке В Zero-блок добавляются несколько форм, приёмщики данных подключаются к первой (нижней в слоях) форме, стандартные кнопки скрываются, а в блок добавляется своя кнопка со ссылкой `#submit`. В коде инициализации указывается ID блока: ```html forms.init("#rec00000000") ``` Пример: [Мультиформа в Zero-блоке](https://postnikovmd.com/mods/forms/example) ### Мультиформа в поп-апе Если мультиформа находится внутри стандартного поп-апа Тильды, она собирается так же, как обычная, и работает внутри окна. После успешной отправки модификация автоматически закрывает поп-ап. Инициализация не отличается от обычной мультиформы: ```html forms.init("#rec00000000") ``` Пример: [Мультиформа в поп-апе](https://postnikovmd.com/mods/forms/example-popup) ### Валидация полей в формах Для проверки значений задаётся название поля и правило валидации. Например, чтобы поле `quantity` принимало только значения больше 5, а при нарушении показывало своё сообщение: ```html forms.validate("quantity", { rule: "more", value: 5, message: "Введите число больше 5" }) ``` Если к одному полю нужно применить несколько правил, добавьте в блок T123 ещё один код с другими условиями. Пример: [Валидация полей в формах](https://postnikovmd.com/mods/forms/validate/example) ## Распространенные проблемы ### После отправки появляется стандартный поп-ап успеха или блокируется прокрутка Проблема возникает, когда `forms.init` (мультиформа) и `popup.init` запущены для одного блока — у обоих есть логика работы с формами, и они конфликтуют. Уберите `popup.init` для блока с формой либо встройте Zero-форму в стандартный поп-ап Тильды без него. Для кастомного окна успеха используйте отдельную функцию `forms.success`. ### Окно успешной отправки не появляется Окно успеха `forms.success` работает только с Zero-формой. Убедитесь, что на странице есть хотя бы одна Zero-форма (её можно сделать скрытой), а код инициализации в блоке T123 расположен после блока с сообщением об успехе. ### Форма не отправляется или заявки не приходят Проблема может возникать, если на странице есть несколько вызовов `forms.init` для одного блока. Для её решения оставьте один `forms.init` на класс блока и разделите код в T123 по модам. ### Поля формы заезжают друг на друга или форму «ведёт» В горизонтальных формах ширина полей не учитывает скрытую кнопку отправки, из-за чего поля могут растягиваться. Разбейте поля на отдельные формы — по одному полю на форму. ### Не объединяются формы из разных блоков Мультиформа работает только в пределах одного Zero-блока. Чтобы собрать данные из форм в разных блоках, передавайте значения через скрытые поля и JavaScript. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Квиз из Zero-блоков Позволяет создать пошаговый квиз из нескольких Zero-блоков с автоматической синхронизацией полей в единую форму > Время настройки: 5 минут ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Создайте Zero-блоки с шагами квиза и добавьте в них формы Каждый шаг — это отдельный Zero-блок, в котором может быть одна или несколько форм (их поля синхронизируются автоматически). Важно: поля в разных формах/шагах должны иметь разные названия переменных, чтобы их данные не перезаписывали друг друга. 2. Задайте блокам с квизом класс `.uc-quiz` Если вы планируете разместить несколько квизов на одной странице, задайте им разные названия классов, например, .uc-quiz1, .uc-quiz2 и т. д. 3. Задайте ссылки кнопкам переключения шагов: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Чтобы добавить необязательный шаг, который можно пропустить, задайте кнопке пропуска ссылку `#skip` или сделайте поля необязательными в настройках самих форм (Настройки поля → Снять галочку Required) 4. Скройте стандартные кнопки отправки данных и добавьте в последний блок свою кнопку со ссылкой `#submit` Стандартные кнопки отправки данных можно скрыть в настройках форм (задать им width: 0 и height: 0 и удалить caption). 5. Подключите приемщики данных к первой форме последнего блока Приемщики, сообщение успеха и все остальные настройки производятся с первой (нижней в слоях) формой последнего блока — именно она будет синхронизироваться со всеми остальными шагами. Для других форм это необязательно. 6. Задайте блоку, который нужно показать после отправки, класс `.uc-quiz-success` (опционально) Если блок не задан, после отправки квиза появится стандартный поп-ап успеха, указанный в настройках первой формы последнего блока. 7. Задайте в настройках модификации поведение и стили квиза 8. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Особенности | Собирается в одну заявку | **Сохраняет данные полей** | **Поддерживает прогресс-бар** | | --------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------ | | Поля всех шагов автоматически объединяются в единую форму | Посетитель может продолжить квиз с того места, где остановился | Индикатор над блоками показывает, сколько шагов уже пройдено | ## Элементы | Название | Тип | Класс | Ссылка | | ---------------------- | ------------ | ---------------- | ------- | | Блок с шагом квиза | Zero Block | .uc-quiz | - | | Кнопка «Вперёд» | Shape/Button | - | #next | | Кнопка «Назад» | Shape/Button | - | #prev | | Кнопка «Пропустить» | Shape/Button | - | #skip | | Кнопка отправки | Shape/Button | - | #submit | | Блок успешной отправки | Zero Block | .uc-quiz-success | - | ## Параметры | Функция | Описание | Триггер | | --------------------------- | ---------------------------------- | ------------------ | | quiz.init(selector, params) | Инициализирует квиз из Zero-блоков | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | ----------------------------------- | ------------------------------------------------------------- | -------- | --------------------- | | selector | Класс блоков с шагами квиза | string | - | | params.next | Ссылка для кнопки перехода вперёд | string | '#next' | | params.prev | Ссылка для кнопки возврата назад | string | '#prev' | | params.skip | Ссылка для перехода на следующий шаг без проверки полей | string | '#skip' | | params.submit | Ссылка для кнопки отправки квиза | string | '#submit' | | params.success | Класс блока, который отображается после успешной отправки | string | selector + '-success' | | params.toggle | Автоматический переход на следующий шаг после выбора варианта | boolean | true | | params.scroll | Прокрутка к началу шага при переходе | boolean | false | | params.save | Сохранение прогресса квиза в браузере | boolean | false | | params.transition | Скорость перехода между шагами в миллисекундах | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.onsuccess | Функция, которая выполняется при успешной отправке квиза | function | - | | params.event | Пользовательское событие для запуска квиза | string | — | | params.timeout | Задержка после срабатывания события | number | 0 | | params.style | Стили квиза | object | {} | | params.style.progressbar.color | Цвет прогресс-бара (без него прогресс-бар скрыт) | string | - | | params.style.progressbar.height | Высота прогресс-бара | string | 0 | | params.style.progressbar.transition | Скорость анимации прогресс-бара в миллисекундах | number | 400 | | params.style.progressbar.easing | Функция перехода для анимации прогресс-бара | string | 'ease-in-out' | --- # Продвинутый слайдер в Zero-блоке Позволяет создавать любые слайдеры внутри Zero-блоков без ограничений — с управлением кнопками, свайпом, пагинацией и множеством других настроек. > Время настройки: 5 минут ## Как работает модификация ### Общие механики Продвинутый слайдер работает на основе библиотеки [swiper.js](https://swiperjs.com/). Модификация адаптирует её работу под вёрстку Zero-блока: оборачивает слайды в контейнеры и выстраивает их геометрию на основе размеров и координат, заданных в интерфейсе Тильды. За счёт этого слайдер получает пролистывание, эффекты переключения и другие режимы. Функционал свайпера подгружается отдельно после загрузки страницы. Для базовых слайдеров используется облегчённая сборка, для слайдеров с эффектами и дополнительными модулями — расширенная. В качестве слайдов выступают группы Object с классом `.slide`. Модификация считывает их положение и размеры, выстраивает по координатам в вёрстке, оборачивает каждый из них в отдельный контейнер `.swiper-slide`, и затем все слайды — в группы `.swiper-wrapper` и `.swiper`, на которых в дальнейшем инициализируется сам слайдер. Переключение слайдов осуществляется по свайпу или кнопкам `#prev`/`#next`. Модификация также поддерживает кастомные элементы управления: точки пагинации `.dot`, полосу прокрутки `.scrollbar`/`.scrollbar-thumb`, и счетчик текущего и общего количества слайдов `.current`/`.total`. Их можно расположить в любом месте Zero-блока; для точек пагинации стиль первой из них будет использоваться для отображения активного состояния. При изменении размеров экрана слайдер разбирается до первоначального состояния и собирается заново с учётом новых координат и настроек элементов: это помогает поддерживать корректную работу модификации внутри Zero-блока. ### Слайдер с пагинацией Классический вариант, в котором переключение слайдов сопровождается точками пагинации. Подходит, когда слайдов немного и посетителю важно видеть, где он сейчас находится. Подробнее: [Слайдер с пагинацией](https://postnikovmd.com/mods/swiper) ### Слайдер со скроллбаром Продвинутый слайдер, в котором вместо точек используется полоса прокрутки с ползунком. Ползунок можно перетаскивать мышью — это подходит для длинных лент, где точки пагинации заняли бы слишком много места. Подробнее: [Слайдер со скроллбаром](https://postnikovmd.com/mods/swiper/scrollbar) ### Слайдер с нумерацией Продвинутый слайдер, в котором текущее состояние прокрутки показывает не пагинация, а счётчик с номером активного слайда и их общим количеством. Подробнее: [Слайдер с нумерацией](https://postnikovmd.com/mods/swiper/fractions) ## Начало работы ### Установка библиотеки Для работы слайдера необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Продвинутый слайдер с пагинацией](https://postnikovmd.com/mods/swiper) - [Продвинутый слайдер со скроллбаром](https://postnikovmd.com/mods/swiper/scrollbar) - [Продвинутый слайдер с нумерацией](https://postnikovmd.com/mods/swiper/fractions) ### Инструкция по установке #### Продвинутый слайдер с пагинацией 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок со слайдером и задайте ему класс `.uc-swiper` Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-swiper1, uc-swiper2 и т. д. 3. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый элемент в карточке, а их целиком. Внутри карточки может быть неограниченное количество элементов. 4. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. Модификация будет воспринимать за слайды именно их. 5. Объедините все карточки в общую группу `Object` Данная группа будет выступать оберткой для слайдера. Если задать ей overflow: hidden, то неактивные слайды будут скрываться за её пределами. 6. Добавьте в блок точки (пагинацию) и присвойте им класс `.dot`. Точки можно расположить в любом месте блока. Стиль первой из них будет определять внешний вид пагинации в активном состоянии. 7. Объедините все точки в общую группу `Object` 8. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 9. Задайте в настройках модификации поведение слайдера и его анимацию 10. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Продвинутый слайдер со скроллбаром 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок со слайдером и задайте ему класс `.uc-swiper` Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-swiper1, uc-swiper2 и т. д. 3. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый элемент в карточке, а их целиком. Внутри карточки может быть неограниченное количество элементов. 4. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. Модификация будет воспринимать за слайды именно их. 5. Объедините все карточки в общую группу `Object` Данная группа будет выступать оберткой для слайдера. Если задать ей overflow: hidden, то неактивные слайды будут скрываться за её пределами. 6. Добавьте в блок элементы скроллбара: полосу прокрутки (фон) с классом `.scrollbar` и ползунок `.scrollbar-thumb` Элементы можно расположить в любом месте блока. Важно — они должны быть выровнены относительно друг друга по левому верхнему краю. 7. Объедините элементы скроллбара в общую группу `Object` Скроллбар можно также настроить альтернативным способом, добавив фоновую заливку получившейся группе и задав ей класс .scrollbar. 8. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. См. пример. 9. Задайте в настройках модификации поведение слайдера и его анимацию 10. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Продвинутый слайдер с нумерацией 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок со слайдером и задайте ему класс `.uc-swiper` Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-swiper1, uc-swiper2 и т. д. 3. Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип `Object` Это позволит считать за слайды не каждый элемент в карточке, а их целиком. Внутри карточки может быть неограниченное количество элементов. 4. Присвойте получившимся карточкам со слайдами класс `.slide` Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. Модификация будет воспринимать за слайды именно их. 5. Объедините все карточки в общую группу `Object` Данная группа будет выступать оберткой для слайдера. Если задать ей overflow: hidden, то неактивные слайды будут скрываться за её пределами. 6. Добавьте в блок элементы с нумерацией слайдов: текущему слайду присвойте класс `.current`, общему их количеству — `.total` В качестве элементов рекомендуется использовать текст (Text) или кнопки (Button). Их можно расположить в любом месте блока. 7. Объедините элементы с нумерацией в общую группу `Object` Внутри этой группы могут также находиться разделитель и любые другие элементы. 8. Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. 9. Задайте в настройках модификации поведение слайдера и его анимацию 10. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоит продвинутый слайдер. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/ссылка | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | | Слайды* | Группы Object, которые принимаются за слайды. Их количество должно совпадать с количеством физических слайдов в блоке. Все карточки объединяются в общую группу Object, которая выступает обёрткой слайдера: если задать ей `overflow: hidden`, неактивные слайды будут скрываться за её пределами. | `.slide` | | Точки (пагинация) | Точки, отображающие текущее положение слайдера. Оформление первой точки определяет вид пагинации в активном состоянии. Если в содержимом точки есть число, в неё подставляется номер слайда. Объединяются в общую группу Object. | `.dot` | | Полоса прокрутки (скроллбар) | Фон скроллбара, задающий его границы и размеры. Может быть отдельным шейпом или группой Object с фоновой заливкой. | `.scrollbar` | | Ползунок скроллбара | Элемент, перемещающийся по полосе прокрутки вслед за слайдами. Выравнивается с полосой по левому верхнему краю. | `.scrollbar-thumb` | | Счетчик текущего слайда | Текстовый элемент или кнопка со счётчиком номера активного слайда. | `.current` | | Счетчик количества слайдов | Текстовый элемент или кнопка с общим количеством слайдов. Вместе со счётчиком текущего слайда объединяется в общую группу Object, куда можно добавить разделитель. | `.total` | | Кнопки управления | Элементы, при клике на которые выполняется пролистывание слайдера. Поддерживают изменение фона, бордера и иконки в активном состоянии, для настройки которого обеим кнопкам задаются одинаковые стили, одна из них поворачивается на 180º, после чего в генераторе кода указываются их новые значения. | `#prev`, `#next` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой слайдера. Подгружаются асинхронно как функции объекта `swiper`. | Функция | Описание | Триггер | | -------------------------------- | -------------------------------------------------------------- | --------------------------------- | | swiper.init(selector, params) | Инициализирует отрисовку слайдера | DOM Content Loaded, Window Resize | | swiper.destroy(selector) | Отключает слайдер и возвращает блок до первоначальных настроек | Window Resize | | swiper.scrollTo(selector, index) | Пролистывает слайдер до слайда index | - | В качестве аргументов для настройки слайдера передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ------------------------------------- | ---------------------------------------------- | ------- | --------------------- | | selector | Класс слайдера | string | - | | params.slides | Класс слайдов в слайдере | string | '.slide' | | params.dots | Класс точек пагинации | string | '.dot' | | params.scrollbar | Класс полосы прокрутки (скроллбара) | string | '.scrollbar' | | params.scrollthumb | Класс ползунка прокрутки | string | '.scrollbar-thumb' | | params.current | Класс счётчика текущего слайда | string | '.current' | | params.total | Класс счётчика общего количества слайдов | string | '.total' | | params.prev | Ссылка для кнопки переключения назад | string | '#prev' | | params.next | Ссылка для кнопки переключения вперёд | string | '#next' | | params.thumbs | Класс для синхронизации слайдера с миниатюрами | string | — | | params.infinite | Бесконечное пролистывание слайдов | boolean | false | | params.loop | Зацикленное переключение слайдов | boolean | false | | params.center | Выравнивание активного слайда по центру | boolean | false | | params.ticker | Режим бегущей строки | boolean | false | | params.pauseonhover | Останавливать бегущую строку при наведении | boolean | false | | params.mousewheel | Переключение слайдов колесиком мыши | boolean | false | | params.effect | Эффект переключения слайдов | string | - | | params.active | Активный слайд при загрузке страницы | number | 0 | | params.group | Переключение сразу нескольких слайдов | number | 1 | | params.drag | Пролистывание слайдера зажатой мышью | boolean | true | | params.autoplay | Автоматическое пролистывание слайдов | boolean | false | | params.interval | Интервал автопроигрывания слайдов | number | 6000 | | params.transition | Скорость переключения слайдов | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.event | Пользовательское событие для запуска слайдера | string | — | | params.timeout | Задержка после срабатывания события | number | 0 | | params.style | Стили слайдера | object | {} | | params.style.controls.backgroundColor | Цвет фона активной стрелки | string | '#FFFFFF' | | params.style.controls.borderColor | Цвет бордера активной стрелки | string | '#FFFFFF' | | params.style.controls.backgroundImage | Иконка активной стрелки | string | 'https://...' | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека автоматически определяет порядок запуска — например, встроить слайдер в поп-ап можно при обычном вызове двух функций. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить слайдер по срабатыванию события** Отложить инициализацию слайдера можно с помощью параметров `event` и `timeout`. Например, запустить слайдер через 100ms после срабатывания `customEvent` можно таким образом: ```js swiper.init(".uc-swiper", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки слайдера** Если код нужно выполнить после того, как слайдер полностью запустится, добавьте слушатель события `swiperinit-id`, где `swiperinit` — событие отрисовки слайдера, `id` — класс блока со слайдером без префикса `uc` или `rec`. Например, если у блока со слайдером класс `.uc-swiper1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("swiperinit-swiper1", function(){ /*...*/ }) ``` ### Инициализация Код инициализации слайдера вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--swiper.js Продвинутый слайдер в Zero-блоке. https://postnikovmd.com/mods/swiper--> swiper.init(".uc-swiper") ``` ## Примеры использования ### Слайдер с пагинацией Базовый вариант продвинутого слайдера. В Zero-блок с классом `.uc-swiper` добавляются слайды `.slide`, точки пагинации `.dot` и кнопки `#prev` и `#next`. Вид активной точки повторяет оформление первой из них, а стили стрелок в активном состоянии настраиваются в генераторе кода: ```html swiper.init(".uc-swiper", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) ``` Пример: [Слайдер с пагинацией](https://postnikovmd.com/mods/swiper/example) ### Слайдер с полосой прокрутки Аналог слайдера с пагинацией, в котором вместо точек используется полоса прокрутки `.scrollbar` с ползунком `.scrollbar-thumb`, объединёнными в группу Object. Модификация подхватывает их сама, поэтому код инициализации аналогичен базовому варианту: ```html swiper.init(".uc-swiper") ``` Пример: [Слайдер с полосой прокрутки](https://postnikovmd.com/mods/swiper/example-scrollbar) ### Слайдер со счётчиком Вариант слайдера, в котором текущее положение отражает не пагинация, а счётчик, состоящий из элементов `.current` и `.total`, объединённых в группу Object. Между ними можно добавить разделитель — он подставится в счётчик автоматически. Дополнительных параметров такой слайдер не требует: ```html swiper.init(".uc-swiper") ``` Пример: [Слайдер со счётчиком](https://postnikovmd.com/mods/swiper/example-fractions) ### Слайдер с нумерацией Слайдер с пагинацией, точки `.dot` которого содержат номера слайдов. Если внутри точки есть число, модификация подставит в него порядковый номер. Вёрстка и код инициализации совпадают с базовым примером: ```html swiper.init(".uc-swiper") ``` Пример: [Слайдер с нумерацией](https://postnikovmd.com/mods/swiper/example-numbers) ### Бесконечный слайдер Пример реализации слайдера, который листается по кругу, без остановки на последнем слайде. Верстается и настраивается так же, как и слайдер с пагинацией, но в код инициализации добавляется параметр `infinite: true`: ```html swiper.init(".uc-swiper", { infinite: true }) ``` Пример: [Бесконечный слайдер](https://postnikovmd.com/mods/swiper/example-infinite) Дополнительно: бесконечное пролистывание и зацикливание — разные настройки; если задать одновременно `infinite` и `loop`, сработает только `infinite`. ### Слайдер с центрированием Вариант слайдера, в котором `center: true` выравнивает активный слайд по центру экрана: ```html swiper.init(".uc-swiper", { center: true, infinite: true }) ``` Пример: [Слайдер с центрированием](https://postnikovmd.com/mods/swiper/example-center) Дополнительно: в примере добавили бесконечное пролистывание через `infinite: true` — центрирование сочетается с ним лучше всего. ### Слайдер с 3D-эффектом Слайдер, в котором карточки переключаются с 3D-трансформацией — эффектом Coverflow. Задаётся параметром `effect: "coverflow"`: ```html swiper.init(".uc-swiper", { effect: "coverflow" }) ``` Пример: [Слайдер с 3D-эффектом](https://postnikovmd.com/mods/swiper/example-coverflow) ### Слайдер с масштабированием Слайдер, в котором активный слайд увеличивается относительно остальных. Задаётся параметром `effect: "scale"`: ```html swiper.init(".uc-swiper", { effect: "scale" }) ``` Пример: [Слайдер с масштабированием](https://postnikovmd.com/mods/swiper/example-scale) ### Слайдер-бегущая строка Пример, в котором слайды непрерывно движутся в одну сторону, создавая эффект бегущей строки. Данный режим включается параметром `ticker: true`: ```html swiper.init(".uc-swiper", { ticker: true, interval: 6000, pauseonhover: true }) ``` Пример: [Слайдер-бегущая строка](https://postnikovmd.com/mods/swiper/example-ticker) Примечание: `ticker` сам зацикливает слайдер и включает автопроигрывание, поэтому отдельно их задавать не нужно. Скорость движения регулирует `interval`, а `pauseonhover: true` останавливает ленту при наведении курсора. ### Слайдер в поп-апе Слайдер во всплывающем окне собирается двумя способами: через стандартный блок `T1093` или через модификацию [кастомных поп-апов в Zero-блоке](https://postnikovmd.com/mods/popup). В блоке `T1093` слайдер запускается как обычно: ```html swiper.init(".uc-swiper") ``` При использовании отдельной модификации для поп-апов, обоим блокам задаётся одинаковый класс, и в блок *T123* со слайдером добавляется ещё один код с инициализацией. ```html swiper.init(".uc-swiper") popup.init(".uc-swiper", { animation: "zoom", style: { blur: 4 } }) ``` ## Если модификация не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Поп-ап из Zero-блоков Позволяет создавать кастомные всплывающие окна из Zero-блоков с настраиваемой анимацией, поддержкой форм и переключением слайдов > Время настройки: 2 минуты ## Как работает модификация ### Общие механики Модификация подставляет блоки с заданным классом в стандартный поп-ап T1093 или BF503 и позволяет переключать их с помощью кнопок вперёд/назад. В отличие от стандартных поп-апов, мод позволяет управлять моментом подстановки блоков и запускать функционал после инициализации стороннего кода или модификаций. Это позволяет добавлять в поп-апы свой функционал — слайдер, вкладки, аккордеон и пр. Анимация и её скорость регулируется параметрами `animation` и `transition` в настройках модификации. ### Классический поп-ап из Zero-блоков Аналог стандартных блоков T1093 и BF503, запуском которых можно управлять с помощью параметров `event` и `timeout`. В качестве содержимого можно использовать как стандартные, так и Zero-блоки. Подробнее: [Классический поп-ап из Zero-блоков](https://postnikovmd.com/mods/popup) ### Поп-ап с переключением слайдов Классический поп-ап, состоящий из нескольких блоков, последовательно переключающихся при нажатии на кнопки вперёд/назад. Подробнее: [Поп-ап с переключением слайдов](https://postnikovmd.com/mods/popup/slides) ### Поп-ап с формой обратной связи Поп-ап с переключением слайдов, состоящий из двух блоков — формы обратной связи и сообщения об успехе, которое появляется при её успешной отправке. Подробнее: [Поп-ап с формой обратной связи](https://postnikovmd.com/mods/popup/form) ## Начало работы ### Установка библиотеки Для работы поп-апов необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией поп-апов. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Классический поп-ап из Zero-блоков](https://postnikovmd.com/mods/popup) - [Поп-ап с переключением слайдов](https://postnikovmd.com/mods/popup/slides) - [Поп-ап с формой обратной связи](https://postnikovmd.com/mods/popup/form) ### Инструкция по установке #### Классический поп-ап из Zero-блоков 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте на страницу стандартный блок `T1093` и присвойте ему класс `.uc-popup` В настройках поп-апа ID блока с содержимым оставьте пустым — привязка будет происходить через классы. Чтобы добавить стандартный блок в поп-ап, используйте блок BF503 (Popup: Information). 3. Добавьте на страницу Zero-блок с содержимым поп-апа и присвойте ему такой же класс Для корректного отображения лучше всего задать Zero-блоку высоту в 100% экрана. Если вы планируете использовать на странице несколько поп-апов, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т. д. 4. Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку `#close` 5. Задайте в настройках модификации параметры анимации поп-апа 6. Скопируйте код и вставьте его в блок `T123` в конец страницы Для плавной загрузки рекомендуется разместить поп-ап и его содержимое в конце страницы. #### Поп-ап с переключением слайдов 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте на страницу стандартный блок `T1093` и присвойте ему класс `.uc-popup` В настройках поп-апа ID блока с содержимым оставьте пустым — привязка будет происходить через классы. 3. Добавьте на страницу Zero-блоки с содержимым поп-апа и присвойте им такой же класс Блоки должны быть расположены в той последовательности, в которой будут переключаться слайды. Для корректного отображения лучше всего задать им высоту в 100% экрана. Если вы планируете использовать на странице несколько поп-апов, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т. д. 4. Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку `#close` 5. Задайте ссылки кнопкам переключения слайдов: `#prev` для перехода назад и `#next` для перехода вперёд 6. Задайте в настройках модификации параметры анимации поп-апа 7. Скопируйте код и вставьте его в блок `T123` в конец страницы Для плавной загрузки рекомендуется разместить поп-ап и его содержимое в конце страницы. #### Поп-ап с формой обратной связи 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте на страницу стандартный блок `T1093` и присвойте ему класс `.uc-popup` В настройках поп-апа ID блока с содержимым оставьте пустым — привязка будет происходить через классы. 3. Добавьте на страницу Zero-блок с формой обратной связи и присвойте ему такой же класс Если вы хотите создать своё сообщение об успешной отправке данных, добавьте ещё один Zero-блок с таким же классом и расположите его после формы. Для корректного отображения блокам лучше задать высоту в 100% экрана. Если вы планируете использовать на странице несколько поп-апов, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т. д. 4. Скройте стандартную кнопку отправки данных в настройках формы и добавьте в блок свою кнопку со ссылкой `#submit` Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0). 5. Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку `#close` 6. Задайте в настройках модификации параметры анимации поп-апа В сообщение об успешной отправке данных можно добавить lottie-анимацию. Для этого создайте в блоке шейп с классом .lottie, куда будет загружаться анимация и задайте в генераторе кода ссылку на файл с анимацией 7. Скопируйте код и вставьте его в блок `T123` в конец страницы Для плавной загрузки рекомендуется разместить поп-ап и его содержимое в конце страницы. ### Элементы Ниже приведены элементы, из которых состоит кастомный поп-ап. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/Ссылка | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | Поп-ап* | Стандартный блок T1093/BF503 с основным функционалом. Если в качестве содержимого используются Zero-блоки, для поп-апа подойдёт T1093, для поп-апов со стандартными блоками лучше всего использовать BF503. | `.uc-popup` | | Содержимое поп-апа* | Блоки, подставляющиеся внутрь поп-апа. При использовании поп-апа с несколькими слайдами или формой обратной связи, блоки будут последовательно переключаться при нажатии на кнопки. Для классического поп-апа при отсутствии данных кнопок, можно размещать несколько блоков прямо друг под другом. | `.uc-popup` | | Кнопка закрытия | Кнопка, при нажатии на которую будет закрываться поп-ап. Если на странице открыто сразу несколько поп-апов, они будут скрываться последовательно, в зависимости от того, на каком из них была нажата соответствующая кнопка. | `#close` | | Кнопка «Вперёд» | Кнопка переключения на следующий слайд. Если в поп-апе есть элементы со ссылками `#prev` и `#next`, блоки будут переключаться последовательно друг за другом. При отсутствии кнопок навигации, блоки поп-апа будут отображаться сразу друг под другом. | `#next` | | Кнопка «Назад» | Кнопка переключения на предыдущий слайд. Работает аналогично кнопке «Вперёд» | `#prev` | | Кнопка отправки формы | Своя кнопка, при нажатии на которую в поп-апе будет отправляться форма. В качестве кнопки может быть выбран любой элемент со ссылкой `#submit`, при условии, что стандартная кнопка Submit в форме отсутствует. | `#submit` | | Контейнер для lottie-анимации | Шейп, в который будет вставляться Lottie-анимация при успешной отправки формы. Работает только на следующем после формы слайде. | `.lottie` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой слайдера. Подгружаются асинхронно как функции объекта `popup`. | Функция | Описание | Триггер | | ---------------------------- | ------------------------------- | ------------------ | | popup.init(selector, params) | Инициализирует кастомный поп-ап | DOM Content Loaded | В качестве аргументов для настройки поп-апа передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ---------------------- | ------------------------------------------------- | ------- | --------------------- | | selector | Класс поп-апа и его содержимого | string | - | | params.close | Ссылка для кнопок закрытия поп-апа | string | '#close' | | params.prev | Ссылка для переключения назад | string | '#prev' | | params.next | Ссылка для переключения вперёд | string | '#next' | | params.submit | Ссылка для кнопки отправки формы | string | '#submit' | | params.slide | Номер активного слайда при открытии | number | 0 | | params.hash | Открытие поп-апа по ссылке при заходе на страницу | boolean | false | | params.animation | Анимация появления поп-апа | string | 'fade' | | params.transition | Скорость анимации | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.lottie.selector | Класс шейпа для загрузки Lottie | string | '.lottie' | | params.lottie.url | Ссылка на файл с Lottie-анимацией | string | - | | params.lottie.speed | Скорость Lottie-анимации | number | 1 | | params.event | Пользовательское событие для запуска поп-апа | string | - | | params.timeout | Задержка после срабатывания события | number | 0 | | params.style.blur | Размытие фона поп-апа | number | 0 | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека инициализирует поп-ап по отложенному принципу — если внутри блоков находятся другие модификации, запуск поп-апа откладывается до их полной отрисовки. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить поп-ап по срабатыванию события** Отложить инициализацию поп-апа можно с помощью параметров `event` и `timeout`. Например, запустить его через 100ms после срабатывания `customEvent` можно таким образом: ```js popup.init(".uc-popup", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки поп-апа** Если код нужно выполнить после того, как поп-ап полностью запустится, добавьте слушатель события `popupinit-id`, где `popupinit` — событие отрисовки поп-апа, `id` — класс поп-апа без префикса `uc` или `rec`. Например, если у блока с поп-апом класс `.uc-popup1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("popupinit-popup1", function(){ /*...*/ }) ``` **Запустить другую модификацию после отрисовки поп-апа** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки слайдера можно через событие `sliderinit`: ```js popup.init(".uc-popup", { event: "sliderinit-slider" }) ``` ### Инициализация Код инициализации поп-апа вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--popup.js Поп-ап из Zero-блока. https://postnikovmd.com/mods/popup--> popup.init(".uc-popup") ``` ## Примеры использования ### Поп-ап из Zero-блока Классический вариант, в котором на страницу добавляется блок T1093, ему и блокам с содержимым присваивается класс `.uc-popup`, и кнопкам закрытия — ссылка `#close`. В настройках T1093 указывать ID блока с содержимым не нужно. ```html popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } }) ``` Для стилизации поп-апа дополнительно задаём анимацию с увеличением и размытие заднего фона в параметрах инициализации. Пример: [Поп-ап из Zero-блока](https://postnikovmd.com/mods/popup/example) ### Поп-ап с переключением слайдов Аналог классического поп-апа с несколькими Zero-блоками и навигацией через кнопки `#prev` и `#next`. Устанавливается таким же образом. ```html popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } }) ``` Пример: [Поп-ап с переключением слайдов](https://postnikovmd.com/mods/popup/slides/example) ### Поп-ап с формой обратной связи Поп-ап с несколькими слайдами, в одном из которых расположена форма обратной связи, а в другом — сообщение об успехе. Выполняем аналогичные действия по настройке поп-апа, скрываем стандартную кнопку отправки данных в форме и добавляем свою со ссылкой `#submit`. ```html popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } }) ``` Блок с сообщением об успехе добавлять необязательно. Если в поп-апе оно не предусмотрено, появится стандартное сообщение об успехе, предусмотренное функционалом Тильды. Пример: [Поп-ап с формой обратной связи](https://postnikovmd.com/mods/popup/form/example) ### Поп-ап со стандартным блоком Аналог классического варианта, в котором вместо стандартного блока T1093 используется поп-ап BF503, а в качестве содержимого — любые стандартные блоки (в одном поп-апе их может быть как один, так и несколько). Задаём поп-апу BF503 и блокам с содержимым класс `.uc-popup` и добавляем дополнительные параметры в код инициализации: ```html popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } }) /* Убираем отступы для стандартного блока */ .uc-popup .t819 .t-col { margin: 0 !important; padding: 0 !important; } ``` Для того, чтобы стандартный блок корректно вписывался в поп-ап, указали ему нулевые отступы через CSS. Пример: [Поп-ап со стандартным блоком](https://postnikovmd.com/mods/popup/default/example) ### Поп-ап в другом поп-апе Если добавить внутрь поп-апа кнопку открытия другого поп-апа, он будет открываться поверх первого. Все настройки выполняются аналогично классическому варианту. ```html popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } }) popup.init(".uc-popup2", { animation: "zoom", style: { blur: 4 } }) ``` Пример: [Поп-ап в другом поп-апе](https://postnikovmd.com/mods/popup/example-multiply) ### Слайдер из Zero-блока в поп-апе Для вставки [слайдера из Zero-блоков](https://postnikovmd.com/mods/slider) в поп-ап используются пользовательские события. После отрисовки необходимо встроить слайдер в стандартный поп-ап T1093 с помощью события `sliderinit`. ```html <!--Инициализируем слайдер--> slider.init(".uc-slider") <!--Отслеживаем инициализацию слайдера и запускаем поп-ап--> popup.init(".uc-slider", { event: "sliderinit-slider" }) ``` Пример: [Слайдер из Zero-блока в поп-апе](https://postnikovmd.com/mods/slider/shape/example-popup) ### Аккордеон из Zero-блока в поп-апе Если внутри поп-апа находится [кастомный аккордеон](https://postnikovmd.com/mods/accordion), то по аналогии со слайдером запускать его необходимо перед помещением в поп-ап. Добавляем пользовательское событие `accordioninit` в код инициализации поп-апа: ```html <!--Инициализируем аккордеон--> accordion.init(".uc-popup", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) <!--Отслеживаем инициализацию аккордеона и запускаем кастомный поп-ап--> popup.init(".uc-popup", { event: "accordioninit-popup", animation: "zoom", style: { blur: 4 } }) ``` Пример: [Аккордеон из Zero-блока в поп-апе](https://postnikovmd.com/mods/accordion/example-popup) ### Табы из Zero-блока в поп-апе Если внутри поп-апа находятся [вкладки из Zero-блока](https://postnikovmd.com/mods/tabs/switch), то их необходимо запускать после того, как блок встроится в поп-ап. Добавляем пользовательское событие `popupinit` в код инициализации вкладок, а в качестве их селектора указываем ID блока с поп-апом: ```html <!--Инициализируем кастомный поп-ап--> popup.init(".uc-tabs", { animation: "zoom", style: { blur: 4 } }) <!--Отслеживаем инициализацию поп-апа и запускаем вкладки--> tabs.init("#rec1013325591", { event: "popupinit-tabs" }) ``` Пример: [Табы из Zero-блока в поп-апе](https://postnikovmd.com/mods/tabs/switch/example-popup) ### Открытие поп-апа по ссылке Поп-ап можно открывать при заходе на страницу — для этого в код инициализации необходимо добавить параметр `hash: true`. Поп-ап откроется автоматически, если хэш в адресе страницы совпадёт с его ссылкой (например, `#popup`). ```html popup.init(".uc-popup", { hash: true, animation: "zoom", style: { blur: 4 } }) ``` Ссылку с хэшем можно использовать в кнопках и внешних переходах: `https://example.com/page#popup`. ## Распространённые проблемы ### Поп-ап проявляется при загрузке страницы Тильда отрисовывает блок до того, как модификация его скроет, поэтому поп-ап и его содержимое могут на мгновение появиться при загрузке. Чтобы этого избежать, переместите блок поп-апа и его содержимое в конец страницы или добавьте на страницу блок `T228` (эффект плавной загрузки). ### После отправки формы появляется стандартное окно успеха Проблема возникает, когда в блоке одновременно вызваны и мультиформа, и поп-ап: обе модификации управляют логикой формы, и при их совместной работе возникает конфликт. Для решения необходимо оставить только одну из модификаций. Если поп-ап нужен именно для формы, добавьте её в блок без `forms.init` — окно успеха отобразится отдельным слайдом. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Тултипы в Zero-блоке Позволяет создавать кастомные тултипы в Zero-блоках и настраивать их анимацию > Время настройки: 2 минуты ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте карточку с тултипом внутри Zero-блока Её расположение и визуальный стиль могут быть любыми. 3. Объедините элементы тултипа в группу с типом `Object` и присвойте ей класс `.uc-tooltip` Выделите все элементы, которые должны появляться при открытии подсказки, и объедините их в группу Object. Если вы планируете использовать несколько тултипов на странице, задайте им разные названия классов, например, .uc-tooltip1, .uc-tooltip2 и т.д. 4. Добавьте иконку открытия тултипа и задайте ей ссылку (например, `#tooltip`) Если внутри самого тултипа должна быть иконка закрытия, присвойте ей ссылку #close 5. Задайте в настройках модификации параметры поведения тултипа и ссылку для его открытия 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Тултипы в Zero-блоке** Пример со всплывающими подсказками внутри одного Zero-блока. [Пример](https://postnikovmd.com/mods/tooltip/example) ## Особенности | Можно переключать по ховеру | Работает с автоскейлом | Создан специально для Тильды | | --- | --- | --- | | Поведение тултипа можно гибко настроить под свой запрос | Мод работает с масштабированием так же корректно, как и без него | Модификация учитывает особенности Тильды и легко встраивается в неё | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | tooltip.init(selector, params) | Инициализирует функционал для тултипов | DOM Content Loaded | | Параметр | Описание | Тип | Значение по умолчанию | | --- | --- | --- | --- | | selector | Класс тултипа | string | - | | params.link | Ссылка для открытия тултипа | string | '#tooltip' | | params.hover | Открывать тултип по наведению мыши | boolean | true | | params.close | Ссылка для закрытия тултипа | string | '#close' | | params.closeall | Закрывать остальные тултипы при нажатии | boolean | false | | params.transition | Скорость анимации тултипа (в миллисекундах) | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | --- # Аккордеон в Zero-блоке Позволяет создавать полностью кастомные аккордеоны внутри Zero-блока, задавать им уникальный дизайн, поведение и размещать карточки в несколько колонок > Время настройки: 5 минут ## Как работает модификация ### Общие механики Аккордеон преобразует свёрстанные вкладки и контент в карточки и помещает их в общий контейнер с исходными размерами и позиционированием. В качестве вкладок и контента выступают группы Object с классом `.accordion` и `.accordion-content`. Раскрытие и скрытие карточек осуществляется за счет добавления к ним класса `.collapsed`, который регулирует высоту видимого контента. Расстояние между карточками определяется автоматически по их расположению в вёрстке и сохраняется при работе аккордеона. Задать или изменить его вручную можно через параметр `gap`. Изменение состояния карточек запускает автоматическое вычисление размеров аккордеона и регулирует высоту Zero-блока на их основе. При расчете также учитываются другие элементы в блоке, которые определяют его минимальную высоту, а элементы, располагающиеся ниже аккордеона, сдвигаются пропорционально изменению его размеров так, что отступ между ними и аккордеоном сохраняется постоянным. Иконки раскрытия `.accordion-icon` располагаются во вкладках и привязываются к состоянию карточек, в которых они находятся. В генераторе кода им можно задать стили активного состояния. Изменение размеров экрана перезапускает отрисовку аккордеона: он разбирается до первоначального состояния и собирается заново с учетом новых координат и настроек элементов. ### Классический аккордеон в Zero-блоке Аккордеон, в котором все вкладки и контент располагаются друг под другом в одном Zero-блоке. С его помощью можно создавать как обычные выпадающие списки, так и встраивать их в хэдер, меню, поп-апы и др. Поддерживает вёрстку в автолэйауте (см. пример: Аккордеон с автолэйаутом) Подробнее: [Классический аккордеон в Zero-блоке](https://postnikovmd.com/mods/accordion) ### Аккордеон с несколькими колонками Классический аккордеон, в котором вкладки и контент располагаются в несколько колонок. Модификация автоматически определяет их порядок (слева направо и сверху вниз), и создаёт несколько аккордеонов, связанных друг с другом. Подробнее: [Аккордеон с несколькими колонками](https://postnikovmd.com/mods/accordion/multiple) ### Аккордеон из отдельных Zero-блоков Распространенный вариант аккордеона, в котором каждая вкладка и контент — отдельный блок, раскрывающийся по клику. Поддерживает как Zero, так и стандартные блоки, легко устанавливается, но ограничен по возможностям вёрстки. Подробнее: [Аккордеон из отдельных Zero-блоков](https://postnikovmd.com/mods/accordion/default) ### Определение и порядок карточек Модификация имеет встроенные механики автоматического ранжирования и фильтрации карточек. Перед объединением каждая вкладка и контент упорядочиваются по координатам — слева направо и сверху вниз. Это позволяет выстроить правильный порядок карточек в аккордеоне и распределить по колонкам в зависимости от положения. Кроме того, модификация проверяет, что классы `.accordion` и `.accordion-content` заданы группам Object и автоматически исключает из выборки вложенные внутри них элементы с таким же классом. За счёт этого вложенные элементы с ошибочно указанными классами не считаются за отдельные вкладки. При необходимости отключить авторанжирование и фильтрацию можно с помощью параметров `arrange: false` и `filter: false`. ## Начало работы ### Установка библиотеки Для работы аккордеона необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией аккордеона. Подробнее: [Синхронизация обновлений в модификациях](https://t.me/postnikovmds/29) Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Классический аккордеон в Zero-блоке](https://postnikovmd.com/mods/accordion) - [Аккордеон с несколькими колонками](https://postnikovmd.com/mods/accordion/multiple) - [Аккордеон из отдельных Zero-блоков](https://postnikovmd.com/mods/accordion/default) ### Инструкция по установке #### Классический аккордеон в Zero-блоке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок и добавьте в него карточки аккордеона в раскрытом состоянии Он может состоять из любого количества элементов и быть расположен в любом месте внутри Zero-блока. Каждая карточка должна иметь заголовочную секцию (вкладку) и её содержимое. 3. Задайте блоку с аккордеоном класс `.uc-accordion` Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion2 и т. д. 4. Объедините каждую вкладку и её содержимое в отдельные группы и задайте им тип `Object` Количество групп со вкладками и содержимым должно совпадать, а карточки — плотно прилегать друг к другу. Чтобы расширить границы карточки, можно добавить прозрачный шейп или подложку. 5. Присвойте группам со вкладками класс `.accordion`, а их содержимому — `.accordion-content` Если в заголовочной секции должна быть иконка, которая будет поворачиваться при раскрытии, добавьте её как шейп с фоновым изображением и присвойте класс .accordion-icon. 6. Расположите карточки в слоях в порядке возрастания Первой карточке должен соответствовать самый нижний по расположению слой, а каждой следующей — на уровень выше. Первой группе с заголовочной секцией будет соответствовать первая группа с её содержимым. 7. Задайте в настройках модификации стили и поведение аккордеона 8. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Аккордеон с несколькими колонками 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок и добавьте в него карточки аккордеона в раскрытом состоянии Они могут состоять из любого количества элементов и быть расположены в несколько колонок в любом месте внутри Zero-блока. Каждая карточка должна иметь заголовочную секцию (вкладку) и её содержимое. 3. Задайте блоку с аккордеоном класс `.uc-accordion` Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion2 и т. д. 4. Объедините каждую вкладку и её содержимое в отдельные группы и задайте им тип `Object` Количество групп со вкладками и содержимым должно совпадать, а карточки — плотно прилегать друг к другу. Чтобы расширить границы карточки, можно добавить прозрачный шейп или подложку. 5. Присвойте группам со вкладками класс `.accordion`, а их содержимому — `.accordion-content` Если в заголовочной секции должна быть иконка, которая будет поворачиваться при раскрытии, добавьте её как шейп с фоновым изображением и присвойте класс .accordion-icon. 6. Расположите карточки в слоях в порядке возрастания Первой карточке должен соответствовать самый нижний по расположению слой, а каждой следующей — на уровень выше. Первой группе с заголовочной секцией будет соответствовать первая группа с её содержимым. 7. Задайте в настройках модификации стили и поведение аккордеона 8. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Аккордеон из отдельных Zero-блоков 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте на страницу отдельные Zero-блоки для каждой заголовочной секции (вкладки) и содержимого аккордеона Они должны быть расположены в том же порядке, в котором должны идти карточки аккордеона. 3. Задайте блокам с вкладками класс `.uc-accordion`, а блокам с содержимым — класс `.uc-accordion-block` Если вы планируете использовать несколько аккордеонов на одной странице, задайте им разные названия классов, например, .uc-accordion1, .uc-accordion1-block .uc-accordion2, .uc-accordion2-block и т. д. 4. Присвойте элементам, при нажатии на которые будут раскрываться карточки аккордеона, класс `.accordion-button` Если в заголовочной секции должна быть иконка, которая будет поворачиваться при раскрытии, добавьте её как шейп с фоновым изображением и присвойте класс .accordion-icon. 5. Задайте в настройках модификации стили и поведение аккордеона 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоит аккордеон. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/ссылка | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | Вкладки* | Группы Object со вкладками, при взаимодействии с которыми будет раскрываться контент карточек. Для того, чтобы карточки сохраняли свои размеры, добавьте прозрачный шейп или подложку по их границам или задайте им внутренние отступы через padding. | `.accordion` | | Контент* | Группы Object с раскрывающимся контентом. Их количество должно совпадать с количеством вкладок в блоке. При установке классов убедитесь, что они заданы только группам и не указаны у элементов внутри них. | `.accordion-content` | | Иконки | Элементы, которые будут переворачиваться и менять стили при раскрытии карточек. Должны располагаться во вкладках и иметь квадратные пропорции. Изменение стилей активного состояния (фон, бордер и иконка) поддерживаются только для шейпов с фоновым изображением. | `.accordion-icon` | | Кнопки раскрытия | Элементы, при нажатии на которые необходимо раскрывать и скрывать карточки. Работают только для аккордеона из отдельных блоков. В каждой вкладке может быть только одна такая кнопка. | `.accordion-button` | | Доп. элементы | Любые элементы, имеющие привязку к карточкам аккордеона. Используются в случае, когда необходимо переключать состояние не только карточек, но и сопутствующих им элементов. | `.accordion-elem` | | Карточки аккордеона | Flex-группы Object, состоящие из вкладки и контента и являющиеся для них общим контейнером. По-умолчанию генерируется автоматически, но можно задать вручную через группу Object с автолэйаутом. Свёрнутым карточкам присваивается класс `.collapsed`. | `.tn-accordion-card` | | Аккордеон | Flex-группа Object с карточками аккордеона, являющаяся для них общим контейнером. По-умолчанию генерируется автоматически, но можно задать вручную через группу Object с автолэйаутом. Не должна иметь никаких стилей и отступов. Если между карточками необходимо добавить вертикальный отступ, задайте параметр `gap` в коде инициализации. | `.tn-accordion` | | Нижняя часть карточки | Группа Object, располагающаяся внутри карточки после вкладки и контента. Входит в состав карточки аккордеона и подходит для добавления в конец разделительных линий или иконок. Должна иметь ту же ширину, что и вкладки/контент. | `.tn-accordion-bottom` | | Статические элементы | Элементы, которые необходимо исключить при расчете высоты Zero-блока. Подходит для фоновых изображений, линий и других элементов, чья высота может препятствовать закрытию аккордеона. Не сдвигаются при раскрытии карточек аккордеона. | `.tn-accordion-exclude` | | Динамические элементы | Элементы, которые должны сдвигаться при изменении раскрытии карточек аккордеона. По-умолчанию определяются автоматически, как элементы, располагающиеся под раскрытым аккордеоном, но можно также задать их вручную, добавив им указанный класс. | `.tn-accordion-dynamic` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой аккордеона. Подгружаются асинхронно как функции объекта `accordion`. | Функция | Описание | Триггер | | -------------------------------- | ----------------------------------------------------------------------------- | --------------------------------- | | accordion.init(selector, params) | Инициализирует аккордеон | DOM Content Loaded, Window Resize | | accordion.destroy(selector) | Отключает функционал аккордеона и возвращает блок к первоначальному состоянию | Window Resize | В качестве аргументов для настройки аккордеона передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ----------------------------------- | ------------------------------------------------ | -------- | --------------------- | | selector | Класс аккордеона | string | - | | params.tabs | Класс вкладок аккордеона | string | '.accordion' | | params.icons | Класс иконок во вкладках | string | '.accordion-icon' | | params.content | Класс содержимого карточек | string | '.accordion-content' | | params.elems | Класс доп.элементов для вкладок/содержимого | string | '.accordion-elem' | | params.buttons | Класс кнопок раскрытия секции | string | '.accordion-button' | | params.gap | Вертикальный отступ между карточками (px) | number | 0 | | params.hover | Переключение аккордеона по наведению мыши | boolean | false | | params.collapse | Отображение только одной раскрытой карточки | boolean | false | | params.scroll | Перемещение к раскрытой карточке | boolean | false | | params.expand | Раскрывать первую карточку по-умолчанию | boolean | false | | params.active | Индекс раскрытой карточки при загрузке | number | - | | params.filter | Фильтрация вложенных элементов | boolean | true | | params.arrange | Ранжирование карточек по их координатам | boolean | true | | params.transition | Скорость раскрытия карточек | number | 300 | | params.easing | Функция перехода для раскрытия | string | 'ease-in-out' | | params.event | Пользовательское событие для запуска аккордеона | string | -- | | params.timeout | Задержка после срабатывания события | number | 0 | | params.onexpand | Пользовательская функция при раскрытии карточки | function | - | | params.oncollapse | Пользовательская функция при скрытии карточки | function | - | | params.style | Стили аккордеона | object | {} | | params.style.active.backgroundColor | Цвет фона активной карточки | string | '#FFFFFF' | | params.style.active.borderColor | Цвет бордера активной карточки | string | '#FFFFFF' | | params.style.active.borderWidth | Ширина бордера активной карточки | number | 1 | | params.style.active.borderRadius | Радиус скругления активной карточки | number | 12 | | params.style.elems.opacity | Непрозрачность доп.элементов неактивных карточек | number | 0.8 | | params.style.icon.backgroundColor | Цвет фона активной иконки | string | '#FFFFFF' | | params.style.icon.borderColor | Цвет бордера активной иконки | string | '#FFFFFF' | | params.style.icon.borderWidth | Ширина бордера активной иконки | number | 1 | | params.style.icon.backgroundImage | Изображение активной иконки | string | 'https://...' | | params.style.icon.rotate | Угол поворота активной иконки (градусы) | number | 180 | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. По умолчанию библиотека автоматически определяет порядок запуска — например, собрать аккордеон во вкладках можно при обычном вызове двух функций. Пользовательские события нужны для более тонкой настройки — их можно использовать, чтобы: **Запустить аккордеон по срабатыванию события** Отложить инициализацию аккордеона можно с помощью параметров `event` и `timeout`. Например, запустить аккордеон через 100ms после срабатывания `customEvent` можно таким образом: ```js accordion.init(".uc-accordion", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки аккордеона** Если код нужно выполнить после того, как аккордеон полностью запустится, добавьте слушатель события `accordioninit-id`, где `accordioninit` — событие отрисовки аккордеона, `id` — класс блока с аккордеоном без префикса `uc` или `rec`. Например, если у блока с аккордеоном класс `.uc-accordion1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("accordioninit-accordion1", function(){ ... }) ``` ### Инициализация Код инициализации аккордеона вставляется в блок `T123` в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--accordion.js Аккордеон в Zero-блоке. https://postnikovmd.com/mods/accordion--> accordion.init(".uc-accordion") ``` ## Примеры использования ### Классический аккордеон в Zero-блоке Для сборки классического аккордеона создаётся Zero-блок с классом `.uc-accordion` и аккордеоном в раскрытом состоянии. Вкладкам присваиваются классы `.accordion`, контенту — `.accordion-content`. По желанию добавляется иконка `.accordion-icon` и задаются стили в генераторе кода: ```html accordion.init(".uc-accordion", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) ``` Пример: [Классический аккордеон в Zero-блоке](https://postnikovmd.com/mods/accordion/example) ### Аккордеон с автолэйаутом Классический аккордеон, расположенный в контейнере с автолэйаутом. Используется, когда необходимо расположить его в общей карточке и подстраивать её высоту под размер контента. Верстается так же, как и классический вариант, но вкладка и контент объединяются в общую группу Object, а эти группы — во внешнюю группу с аккордеоном. Служебные классы `.tn-accordion-card` и `.tn-accordion` присваиваются модификацией автоматически, задавать их вручную не требуется. При необходимости общую группу с аккордеоном можно и дальше объединять с другими элементами, повышая её уровень вложенности. Внутренние отступы карточек, заданные группам через padding, учитываются при расчёте размеров аккордеона. ```html accordion.init(".uc-accordion", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) ``` Пример: [Аккордеон с автолэйаутом](https://postnikovmd.com/mods/accordion/example-flex) Автовысота Hug у Zero-блока с аккордеоном переключается модификацией на фиксированную автоматически — задавать блоку фиксированную высоту вручную не требуется. У самих групп с карточками автовысота при этом сохраняется, чтобы карточки подстраивались под размер контента. Пример с внутренними отступами: [Аккордеон с паддингами](https://postnikovmd.com/mods/accordion/example-padding) ### Аккордеон по Window-контейнеру Аккордеон, у которого вкладки и контент имеют привязку по Window-контейнеру. Настраивается, как классический вариант, но может быть так же свёрстан в автолэйауте, если карточки и контент необходимо растягивать по всей ширине экрана. Для привязки аккордеона по Window в настройках группы необходимо изменить тип контейнера с Grid на Window. Код инициализации аналогичен предыдущим вариантам: ```html accordion.init('.uc-accordion', { collapse: true, style: { active: { backgroundColor: '#F8F7FA', borderColor: '#F3F2F7', borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: '#18181B', backgroundImage: 'https://static.postnikovmd.com/img/accordion-arrow-w.svg' } } }) ``` Чтобы растянуть аккордеон на всю ширину экрана, необходимо изменить его размерные единицы с пикселей на %. На данный момент в Тильде нет прямого способа это сделать для групп, поэтому задаём ширину через css-стили: ```html @media screen and (min-width: 1200px) { .uc-accordion .tn-accordion { width: calc(100% - 560px) !important; /* Отступ от левого и правого края для компьютерной версии — 40px, ширина левой колонки 400px, расстояние от колонки до аккордеона 80px. Устанавливаем ширину аккордеона как разницу между 100% экрана и 560px (40px * 2 + 400px + 80px) */ } } @media screen and (max-width: 479px) { .uc-accordion .tn-accordion { width: calc(100% - 20px) !important; /* Отступ от левого и правого края для мобильной версии — 10px. В таком случае ширина аккордеона — это разница между 100% экрана и 20px (10px * 2) */ } } ``` Пример: [Аккордеон по Window-контейнеру](https://postnikovmd.com/mods/accordion/example-window) Данный пример свёрстан через автолэйаут, чтобы при изменении ширины экрана, размеры карточек автоматически под него подстраивались с учетом заданных отступов. ### Аккордеон в хэдере и выпадающем меню Классический аккордеон, совмещенный с модификацией [Zero-хэдера](https://postnikovmd.com/mods/header). Свёрстан внутри выпадающего меню и меню-бургера с использованием автолэйаута. ```html <!--Инициализируем хэдер вместе с выпадающим меню и меню-бургером--> header.init(".uc-header", { hideDistance: 360, hideDistanceMobile: 240, style: { active:{ color: "#FFFFFF", backgroundColor: "#2C2B31", borderColor: "#2C2B31", underline: 1 }, hover:{ color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } }, submenu: { style: { hover: { color: "#988FFF" }, link:{ color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } } }, menu: { fullscreen: true, animation: 'fade', style: { active:{ color: "#A3A3A4" }, hover:{ color: "#988FFF" } } } }) <!--Инициализируем аккордеон в хэдере--> accordion.init(".uc-submenu", { hover: true, style: { icon: { rotate: -90 } } }) accordion.init(".uc-menu") ``` Пример: [Аккордеон в хэдере и выпадающем меню](https://postnikovmd.com/mods/accordion/example-header) Выпадающее меню и меню-бургер задаются компонентами хэдера в его коде инициализации. Для аутентичного поведения меню аккордеону задали раскрытие по наведению и повернули активную иконку на 90 градусов против часовой стрелки. ### Аккордеон внутри поп-апа Аккордеон внутри [кастомного поп-апа](https://postnikovmd.com/mods/popup) собирается при обычном вызове функций — поп-ап дожидается его отрисовки автоматически, без пользовательского события. Обоим блокам задаётся класс `.uc-popup`, а в настройках стандартного блока поп-апа (T1093) ID Zero-блока с аккордеоном не указывается, иначе блок встраивается до того, как аккордеон соберётся. ```html <!--Инициализируем аккордеон--> accordion.init(".uc-popup", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) <!--Запускаем кастомный поп-ап--> popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } }) ``` Пример: [Аккордеон внутри поп-апа](https://postnikovmd.com/mods/accordion/example-popup) ### Аккордеон c несколькими колонками Для создания аккордеона с несколькими колонками, вкладки и контент располагают друг под другом в несколько рядов. Первая карточка должна находиться в слоях в самом низу, каждая следующая — на уровень выше, а для каждого следующего ряда карточки располагаются на уровень выше, чем карточки предыдущего. Можно верстать как в классическом виде, так и с помощью автолэйаута. ```html accordion.init(".uc-accordion", { style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) ``` Пример: [Аккордеон c несколькими колонками](https://postnikovmd.com/mods/accordion/multiple/example) Если аккордеон необходимо сверстать по Window-контейнеру, изменяем у вкладок и контента тип привязки с Grid на Window. Для позиционирования и растягивания колонок, используем css-стили, позволяющие вычислять расстояние в процентах: ```html @media screen and (min-width: 1200px) { .uc-accordion .tn-accordion { width: calc(50% - 20px) !important; /* Задаём ширину каждого аккордеона, как 50% экрана с учетом отступов в 20px с каждой стороны */ } .uc-accordion .tn-accordion[data-accordion-index="0"] { left: calc(0% + 20px) !important; /* Позиционируем первую колонку с учетом отступа 20px */ } .uc-accordion .tn-accordion[data-accordion-index="1"] { left: calc(50% + 0px) !important; /* Позиционируем вторую колонку с учетом отступа 20px */ } } @media screen and (max-width: 479px) { .uc-accordion .tn-accordion { width: calc(100% - 20px) !important; /* Задаём ширину аккордеона для мобильной версии с учетом отступов в 10px с каждой стороны */ } } ``` Пример: [Аккордеон c несколькими колонками по Window-контейнеру](https://postnikovmd.com/mods/accordion/multiple/example-window) ### Аккордеон из отдельных Zero-блоков Аккордеон, в котором каждая вкладка и контент — отдельный блок, раскрывающийся по клику. Блокам со вкладками присваивается класс `.uc-accordion`, блокам с контентом — `.uc-accordion-block`, а иконке — `.accordion-icon`. По-умолчанию контент раскрывается при нажатии на всю вкладку, но при необходимости ограничить область клика, в неё можно добавить элемент с классом `.accordion-button`. Сгенерированный код идентичен классическому аккордеону: ```html accordion.init(".uc-accordion", { collapse: true, style: { icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } }) ``` Пример: [Аккордеон из отдельных Zero-блоков](https://postnikovmd.com/mods/accordion/default/example) ### Аккордеон с переключением доп. элементов Для того, чтобы переключать другие элементы при раскрытии/скрытии карточек аккордеона, достаточно задать в параметрах `onexpand`/`oncollapse` пользовательскую функцию с необходимой логикой. Например, для смены статичного изображения сбоку от аккордеона, код может выглядеть так: ```html accordion.init(".uc-accordion", { onexpand: function(accordion, index){ let images = document.querySelectorAll(".accordion-image"); images.forEach(function(image, imageindex){ image.classList.remove('active'); if (imageindex === index) image.classList.add('active') }) } }) .uc-accordion .accordion-image { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s ease-in-out !important; } .uc-accordion .accordion-image.active { opacity: 1 !important; pointer-events: auto !important; } ``` ## Распространенные проблемы ### Карточки аккордеона остаются развернутыми Проблема возникает, когда в аккордеоне не совпадает количество вкладок и контента. Проверьте, что классы `.accordion` и `.accordion-content` заданы только группам с типом Object, а их количество совпадает. ### После аккордеона остается пустое пространство/блок обрезается Одна из распространенных проблем, возникающая по нескольким причинам: 1. В блоке присутствуют элементы, которые мешают ему закрыться. Элементы, нижняя граница которых располагается ниже, чем сам аккордеон, могут препятствовать его закрытию, так как учитываются при расчете минимальной высоты блока. Для решения проблемы добавьте им класс `.tn-accordion-exclude`, чтобы исключить их из логики обработки, или сделайте их размеры меньше. Пример: [Аккордеон в общей карточке](https://postnikovmd.com/mods/accordion/example-card) 2. В мобильных версиях есть элементы, вынесенные за пределы экрана. Положение таких элементов также учитывается при расчете высоты блока. Для корректного отображения лучше выравнивать их относительно верхней границы аккордеона или всего блока. Если блок обрезается, в большинстве случаев это связано с тем, что исходная высота блока оказывается меньше, чем сам аккордеон в раскрытом состоянии. В таком случае между аккордеоном и границами блока образуется отрицательный отступ, который сохраняется при дальнейшей работе аккордеона. Для исправления проблемы достаточно убедиться, что высота блока вмещает весь аккордеон в раскрытом состоянии. ### Пропадает отступ между карточками аккордеона Расстояние между карточками определяется автоматически по их расположению в вёрстке. Если отступ пропал или отличается от нужного, задайте его явно через параметр `gap` в коде инициализации. Если необходимо добавить вертикальный отступ между вкладкой и контентом, используйте `padding-top` для группы с контентом. ### Не работает иконка раскрытия Если иконка некорректно обрезается или смещается при повороте, убедитесь, что она имеет квадратные пропорции и задана как шейп (Shape) с фоновой заливкой. Изменение стилей активной иконки для элементов Image не поддерживается. ### Карточки перемешиваются в случайном порядке Порядок карточек определяется автоматически на основании их координат. Если вкладки и контент не выровнены по левому краю или имеют отрицательные отступы друг от друга, это может нарушить их порядок в аккордеоне. Если вёрстка сознательно предусматривает нарушение сетки, отключить авторасстановку карточек можно через параметр `arrange: false` — в таком случае карточки будут выстраиваться по расположению в слоях. ### При раскрытии карточек происходит скролл Когда высота раскрытого аккордеона оказывается больше, чем высота экрана, модификация автоматически включает скролл до раскрытой вкладки. Это помогает перемещаться к раскрытой вкладке, когда её контент уходит за пределы экрана. Отключить эту функцию можно через параметр `scroll: false` ### На странице работает только первый аккордеон Такая проблема может возникнуть, если внутри блоков с другими аккордеонами изменены классы элементов. При использовании нескольких аккордеонов на странице, изменять нужно только класс самого блока (например, `.uc-accordion1`, `.uc-accordion2`). Классы внутренних элементов должны оставаться одинаковыми: `.accordion`, `.accordion-content` и др. Для решения проблемы убедитесь, что элементам внутри блоков заданы одинаковые классы, а в коде инициализации содержится несколько отдельных вызовов для каждого блока: ```html accordion.init(".uc-accordion1") accordion.init(".uc-accordion2") ``` ### Не получается сделать закрытыми все карточки При включённой настройке «Оставлять раскрытой только одну карточку» (`collapse: true`) первая карточка раскрывается автоматически. Для того, чтобы все карточки были закрыты по умолчанию, в коде инициализации аккордеона нужно дополнительно указать параметр `expand: false`. ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Кнопки управления видео в Zero-блоке Позволяет создавать кастомные кнопки управления видео и аудио в Zero-блоках и добавляет новые возможности управления проигрыванием. > Время настройки: 2 минуты ## Вариации Кнопки управления видео в Zero-блоке ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок, добавьте в него элементы с видео в формате `.mp4` и задайте им класс `.uc-video` В одном блоке может быть несколько видео с таким классом. Если вы планируете добавить несколько таких блоков, задайте для видео внутри них разные названия классов, например, .uc-video1, .uc-video2 и т. д. Модификация работает только с файлами .mp4. Их можно загрузить на Dropbox, Kinescope или любой другой хостинг (наведите на ссылки, чтобы увидеть нужный формат) 3. Добавьте кнопки управления для видео. Кнопке проигрывания поставьте ссылку `#play`, а кнопке паузы — `#pause` Если вы хотите сделать одну кнопку, которая будет менять состояние в зависимости от проигрывания, задайте кнопкам одинаковое положение и вынесите кнопку проигрывания на передний план относительно кнопки паузы 4. Задайте в настройках модификации класс видео и параметры его поведения 5. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Свои кнопки управления для видео** Пример слайдера с видео и кастомными иконки play/pause. [Пример](https://postnikovmd.com/mods/media/example) - **Запуск видео по наведению** Пример кастомных видео, которые запускаются по наведению (ховеру). [Пример](https://postnikovmd.com/mods/media/hover/example) ## Особенности | Работает с файлами .mp4 | Можно переключать по ховеру | Поддерживает low power mode | | --- | --- | --- | | Поддерживаются только видео формата .mp4, загруженные на хостинг | Подойдёт для анимации статичных изображений. Подробнее | Скрывает системную кнопку Play, если у видео есть превью | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Кнопка «Play» | Shape/Button | - | #play | | Кнопка «Pause» | Shape/Button | - | #pause | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | video.init(selector, params) | Инициализирует функционал для видео | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс элемента с видео | string | - | | params.hover | Управление по ховеру | boolean | false | | params.pauseAll | Остановка других видео при запуске | boolean | false | | params.play | Ссылка для кнопки проигрывания | string | '#play' | | params.pause | Ссылка для кнопки паузы | string | '#pause' | --- # Свои аудиофайлы в Zero-блоке Позволяет создавать кастомные кнопки управления видео и аудио в Zero-блоках и добавляет новые возможности управления проигрыванием. > Время настройки: 2 минуты ## Вариации Кнопки управления видео в Zero-блоке · Свои аудиофайлы в Zero-блоке ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте в Zero-блок кнопки управления аудио: кнопке проигрывания поставьте ссылку `#audio-play`, а кнопке паузы — `#audio-pause` Если вы хотите сделать единую кнопку, которая будет менять состояние в зависимости от проигрывания, задайте обеим кнопкам одинаковое положение и вынесите кнопку проигрывания на передний план относительно кнопки паузы. Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свои ссылки, например, #audio1-play и #audio1-pause. 3. Задайте в настройках модификации класс для аудио (например, `.uc-audio` или любой другой) Он необходим для привязки кнопок к конкретному файлу. Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свой уникальный класс, например, .uc-audio1, .uc-audio2 и т.д. 4. Задайте в настройках модификации ссылку на аудиофайл Его можно загрузить на Dropbox или свой хостинг (наведите на ссылки, чтобы увидеть нужный формат). 5. Скопируйте код и вставьте его в блок T123 в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Аудиофайлы в Zero-блоке** Пример реализации музыки/голосовых сообщений в Zero-блоке. [Пример](https://postnikovmd.com/mods/media/audio/example) ## Особенности | Работает с файлами .mp3 | Управляется кнопками | Создан специально для Тильды | | --- | --- | --- | | Поддерживаются только аудио формата .mp3, загруженные на хостинг | Подойдёт для создания музыкальных плееров и голосовых сообщений | Модификация учитывает особенности Тильды и легко встраивается в неё | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Кнопка «Play» | Shape/Button | - | #audio-play | | Кнопка «Pause» | Shape/Button | - | #audio-pause | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | audio.init(selector, params) | Инициализирует аудиофайл | DOM Content Loaded | | audio.toggle(selector, state) | Запускает/останавливает аудио | — | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс аудиопроигрывателя | string | - | | params.source | Ссылка на аудиофайл | string | - | | params.start | Секунда, с которой начать проигрывание аудио | number | 0 | | params.loop | Зациклить проигрывание аудио | boolean | false | | params.volume | Громкость аудио при проигрывании | number | 1 | | params.play | Ссылка для кнопки проигрывания | string | '#audio-play' | | params.pause | Ссылка для кнопки паузы | string | '#audio-pause' | | params.hide | Скрывать неактивные кнопки управления | boolean | false | --- # Прелоадер в Zero-блоке Позволяет создавать кастомный прелоадер для сайта с настраиваемой логикой и поддержкой Lottie-анимаций. > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок с прелоадером, поместите его в начало страницы и задайте ему высоту в 100% экрана Чтобы добавить в прелоадер Lottie-анимацию, создайте в блоке шейп и присвойте ему класс .lottie — анимация отобразится внутри него. 3. Задайте в настройках модификации ID прелоадера и параметры его поведения 4. Скопируйте код и вставьте его в блок `T123` сразу после прелоадера ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Прелоадер в Zero-блоке** Кастомный прелоадер с поддержкой SBS или Lottie-анимаций. [Пример](https://postnikovmd.com/mods/preloader/example) - **Прелоадер со индикатором загрузки** Кастомный прелоадер с анимацией счетчика загрузки (проценты). [Пример](https://postnikovmd.com/mods/preloader/example-numbers) ## Особенности | Работает с автоскейлом | Работает в приложениях | Поддерживает анимации | | --- | --- | --- | | Мод работает с масштабированием так же корректно, как и без него | Прелоадер работает во встроенных браузерах Telegram и Instagram* | Модификация поддерживает работу Lottie, базовых и SBS-анимаций | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | preloader.init(selector, params) | Инициализирует прелоадер | Load start | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | ID блока с прелоадером | string | - | | params.delay | Задержка после загрузки страницы (в миллисекундах) | number | 0 | | params.reset | Скрытие прелоадера при перезагрузке страницы | boolean | false | | params.transition | Скорость исчезновения прелоадера (в миллисекундах) | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.lottie.selector | Класс шейпа для загрузки Lottie | string | '.lottie' | | params.lottie.url | Ссылка на файл с Lottie-анимацией | string | - | | params.lottie.speed | Скорость Lottie-анимации | number | 1 | | params.unload | Экспериментально Эффект плавного перехода при выходе со страницы | boolean | false | --- # Свои иконки в кнопках Zero-блока Позволяет добавлять кастомные иконки для кнопок в Zero-блоке, настраивать их стили при наведении и регулировать положение изображения относительно текста > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Добавьте на страницу кнопки, для которых нужно добавить иконку и задайте им определённый класс Он может быть любым и нужен для выделения кнопок с иконками среди остальных элементов на странице. 3. Задайте в настройках модификации класс кнопок, ссылку на иконку и её стили 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Свои иконки в кнопках Zero-блока** Кастомные иконки для всех кнопок с определенной ссылкой/классом. [Пример](https://postnikovmd.com/mods/buttons/example) ## Особенности | Имеет адаптивный размер | Можно переключать по ховеру | Работает для всех ссылок | | --- | --- | --- | | Иконка динамически подстраивается под размер текста в кнопке | Позволяет задавать другую иконку при наведении на элемент | Иконка появляется у всех кнопок с определенной ссылкой | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | buttons.init(selector, params) | Инициализирует свои иконки для кнопок | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс/ссылка для кнопок | string | - | | params.icon | Ссылка на изображение иконки | string | - | | params.align | Расположение иконки в кнопке | string | 'right' | | params.reverse | Отражение иконки по горизонтали | boolean | false | | params.size | Размер иконки (px) | number | - | | params.gap | Отступ между иконкой и текстом (px) | number | - | | params.padding | Внутренний отступ от краёв кнопки (px) | number | - | | params.shift | Корректировка сдвига иконки (px) | number | - | | params.transition | Скорость анимации (в миллисекундах) | number | 300 | | params.easing | Функция перехода для анимации | string | 'ease-in-out' | | params.style.icon.icon | Изображение иконки при наведении | string | 'https://...' | | params.style.hover.backgroundColor | Цвет фона иконки при наведении | string | '#FFFFFF' | | params.style.hover.color | Цвет текста иконки при наведении | string | '#FFFFFF' | | params.style.hover.borderColor | Цвет бордера иконки при наведении | string | '#FFFFFF' | --- # Таймер в Zero-блоке Добавляет таймер обратного отсчёта в Zero-блок и позволяет собрать его из одного или нескольких текстовых элементов > Время настройки: 5 минут ## Как работает модификация ### Общие механики Таймер считывает текстовое содержимое элемента с классом `.timer` и по нему определяет, какие единицы времени нужно отсчитывать. Исходный текст сохраняется в атрибуте `data-timer-original`, поэтому при каждом обновлении мод опирается на изначальную разметку, а не на уже подставленные цифры. Разметка распознаётся двумя способами. В первом единицы вычисляются прямо из текста: формат с двоеточием «12:30:59» раскладывается на дни, часы, минуты и секунды (хвостом, справа налево), а словесная запись — «осталось 12 дней 5 часов» — разбирается по словарю склонений `labels`. Во втором единица задаётся элементу напрямую через атрибут `data-time`, что позволяет собрать таймер из отдельных текстовых элементов. Поведение таймера зависит от режима `mode`, который определяет точку отсчёта и направление хода времени: - **Отсчёт до даты** (`countdown`) — обратный отсчёт до конкретной даты `date`, после которой таймер истекает. Подходит для дедлайнов акций и распродаж. - **С момента захода** (`evergreen`) — отсчёт фиксированной длительности `time`, который для каждого посетителя начинается заново с момента визита. С параметром `storage` дедлайн сохраняется в браузере, и после перезагрузки страницы отсчёт продолжается с того же места, а не запускается с нуля. - **Регулярный** (`recurring`) — отсчёт до заданного времени суток `time`, который повторяется каждый день. Когда это время уже прошло, таймер автоматически нацеливается на следующие сутки. - **Прошло с даты** (`elapsed`) — прямой счёт времени, прошедшего после даты `date`. В отличие от остальных режимов, такой таймер не истекает, а увеличивается. Дата окончания и длительность вычисляются в выбранном часовом поясе, если он задан через `timezone`, иначе используется пояс устройства посетителя. Если режим не указан, но длительность вписана прямо в вёрстку — например «осталось 30 минут», — таймер работает как `evergreen` и отсчитывает её от момента визита. ### Классический таймер в Zero-блоке Таймер, собранный из одного текстового элемента, в котором время записано целиком — табло «12:30:59» или словами «осталось 12 дней 5 часов». Модификация сама находит в тексте числа и единицы, поэтому отдельная разметка не требуется. Подробнее: [Классический таймер в Zero-блоке](https://postnikovmd.com/mods/timer) ### Таймер из отдельных элементов Таймер, в котором каждая единица времени вынесена в свой текстовый элемент, а склоняемые подписи — в отдельные элементы рядом. Принадлежность элемента к единице задаётся атрибутом `data-time` («days», «hours», «minutes» и т. д.), а для подписей используется значение вида `data-time="days-label"`. Такой способ подходит, когда числа и подписи нужно стилизовать и располагать независимо друг от друга. Подробнее: [Таймер из отдельных элементов](https://postnikovmd.com/mods/timer/split) ## Начало работы ### Установка библиотеки Для работы таймера необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Классический таймер в Zero-блоке](https://postnikovmd.com/mods/timer) - [Таймер из отдельных элементов](https://postnikovmd.com/mods/timer/split) ### Инструкция по установке #### Классический таймер в Zero-блоке 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Добавьте в Zero-блок текстовый элемент таймера и присвойте ему класс `.timer` Модификация сама распознает содержимое: можно задать время через двоеточие — «12:30:59» (часы, минуты и секунды), либо словами, например: «осталось 12 дней 5 часов». Если вы планируете использовать несколько таймеров на одной странице, задайте им разные названия классов, например, .timer1, .timer2 и т. д. 2. Задайте в настройках модификации точку отсчёта и поведение таймера 3. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Таймер из отдельных элементов 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Добавьте в Zero-блок текстовые элементы таймера и присвойте им класс `.timer` Они могут содержать дни, часы, минуты и секунды и любые слова в начале и конце, например: «30 дней», «4 часа», «59 минут». При необходимости можно также разделить их на отдельные слова: «30», «дней», «4», «часа», и т.д. Если вы планируете использовать несколько таймеров на одной странице, задайте им разные названия классов, например, .timer1, .timer2 и т. д. 2. Задайте элементам таймера data-атрибут `data-time` с нужной единицей времени Для каждого типа времени укажите своё значение: - `days` – для количества дней - `hours` – для часов - `minutes` – для минут - `seconds` – для секунд - `weeks` – для недель - `months` – для месяцев - `years` – для лет Если у времени склоняемый текст располагается в отдельных элементах, укажите для него атрибут `data-time="*-label"`, где вместо `*` – нужная единица времени (например, days-label, hours-label, minutes-label и т. д.). По этому атрибуту модификация определяет, к какому элементу относится текст. 3. Задайте в настройках модификации точку отсчёта и поведение таймера 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоит таймер. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/ссылка | | --- | --- | --- | | Текстовый элемент таймера* | Текстовый элемент в Zero-блоке, который модификация превращает в таймер. Содержимое распознаётся автоматически: время можно записать через двоеточие — «12:30:59» (часы, минуты и секунды) — либо словами, например «осталось 12 дней 5 часов». До и после времени допускается любой текст, он сохраняется при отрисовке. | `.timer` | | Единица времени | Атрибут, который задаёт элементу конкретную единицу при сборке таймера из отдельных элементов: `days`, `hours`, `minutes`, `seconds`, `weeks`, `months`, `years`. По нему модификация понимает, какое значение подставлять в элемент. | `[data-time="days"]` | | Подпись единицы | Атрибут для отдельного элемента со склоняемой подписью единицы, где вместо `*` указывается нужная единица. По нему модификация определяет, к какому числу относится подпись, и склоняет её по значению. | `[data-time="days-label"]` | \* — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой таймера. Подгружаются асинхронно как функции объекта `timer`. | Функция | Описание | Триггер | | --- | --- | --- | | timer.init(selector, params) | Инициализирует таймер обратного отсчёта в Zero-блоке | DOM Content Loaded | В качестве аргументов для настройки таймера передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс текстового элемента таймера | string | - | | params.mode | Режим работы таймера: «countdown» (отсчёт до даты), «evergreen» (с момента захода), «recurring» (регулярный) или «elapsed» (прошло с даты) | string | - | | params.date | Дата окончания отсчёта (для режимов «countdown» и «elapsed») | string | - | | params.time | Время окончания или длительность отсчёта (для режимов «evergreen» и «recurring») | string | - | | params.timezone | Часовой пояс, к которому привязывается таймер для всех посетителей | string | - | | params.storage | Запоминать точку отсчёта в браузере, чтобы отсчёт продолжился после перезагрузки | boolean | false | | params.expired | Текст, заменяющий таймер после окончания отсчёта | string | - | | params.onexpire | Триггеры, срабатывающие после окончания отсчёта | object | - | | params.onexpire.hide | Селектор блоков, скрывающихся после окончания отсчёта | string | - | | params.onexpire.show | Селектор блоков, скрытых на старте и отображающихся после окончания отсчёта | string | - | | params.onexpire.popup | Ссылка на поп-ап, который открывается после окончания отсчёта | string | - | | params.onexpire.redirect | URL страницы для перехода после окончания отсчёта | string | - | | params.onexpire.callback | Пользовательская функция, вызывающаяся после окончания отсчёта | function | - | | params.labels | Словарь склонений единиц времени для подписей | object | {} | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы: **Запустить таймер по срабатыванию события** Отложить инициализацию таймера можно с помощью параметров `event` и `timeout`. Например, запустить таймер через 100ms после срабатывания `customEvent` можно таким образом: ```js timer.init(".uc-timer", { event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки таймера** Если код нужно выполнить после того, как таймер полностью запустится, добавьте слушатель события `timerinit-id`, где `timerinit` — событие отрисовки таймера, `id` — класс блока с таймером без префикса `uc` или `rec`. Например, если у блока с таймером класс `.uc-timer1`, то слушатель события добавляется следующим образом: ```js window.addEventListener("timerinit-timer1", function(){ /*...*/ }) ``` **Запустить сторонний код после окончания отсчёта** В дополнение к событию отрисовки таймер диспатчит событие `timerexpired-id` в момент, когда отсчёт доходит до нуля. С его помощью можно выполнить свой код по окончании таймера, не задавая `callback` в параметрах: ```js window.addEventListener("timerexpired-timer1", function(){ /*...*/ }) ``` **Запустить другую модификацию после отрисовки таймера** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки таймера можно через событие `timerinit`: ```js popup.init(".uc-timer", { event: "timerinit-timer" }) ``` ### Инициализация Код инициализации таймера вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--timer.js Таймер в Zero-блоке. https://postnikovmd.com/mods/timer--> timer.init(".uc-timer") ``` ## Примеры использования ### Отсчёт до даты Базовый сценарий: в Zero-блок добавляется текстовый элемент с классом `.timer` и временем в вёрстке — табло «12:30:59» или запись словами. В коде инициализации задаётся дата окончания, при необходимости — время и часовой пояс, общий для всех посетителей. ```html timer.init(".uc-timer", { mode: "countdown", date: "2026-12-31", time: "23:59:59", timezone: "Europe/Moscow" }) ``` ### Таймер с момента захода Таймер фиксированной длительности, который для каждого посетителя начинает отсчёт заново с момента визита. Режим `evergreen` задаёт длительность через `time`, а `storage: true` сохраняет точку отсчёта в браузере, чтобы после перезагрузки страницы отсчёт продолжился с того же места. ```html timer.init(".uc-timer", { mode: "evergreen", time: "23:59:59", storage: true }) ``` ### Таймер с триггерами Таймер, который после окончания отсчёта выполняет действия на странице. В объекте `onexpire` указываются блоки, которые нужно скрыть и показать, а также текст, заменяющий таймер по нулю. Показанные блоки скрываются на старте и появляются только после окончания отсчёта. ```html timer.init(".uc-timer", { mode: "countdown", date: "2026-12-31", expired: "Время вышло", onexpire: { hide: "#rec00000000", show: ".uc-show" } }) ``` ### Таймер из отдельных элементов Каждая единица времени и её подпись выносятся в свои текстовые элементы. Числам задаётся атрибут `data-time` с единицей («days», «hours», «minutes», «seconds»), а склоняемым подписям — значение вида `data-time="days-label"`. Код инициализации не отличается от классического таймера — модификация сама собирает значения по атрибутам. ```html timer.init(".uc-timer", { mode: "countdown", date: "2026-12-31" }) ``` ## Распространенные проблемы ### Если модификация не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Показ/скрытие блоков по кнопкам Показывает и скрывает один или несколько блоков по клику на заданные кнопки и позволяет сделать эффект «разворачивания» контента. > Время настройки: 2 минуты ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте блокам, которые должны раскрываться/скрываться по клику, класс `.uc-more` В одной секции с таким классом может быть несколько блоков — как стандартных, так и Zero. Если вы планируете использовать на странице несколько раскрывающихся секций, задайте им разные названия классов, например, .uc-more1, .uc-more2 и т. д. 3. Определите, где будут находиться кнопки управления Кнопки могут располагаться по-разному. Если кнопки находятся в отдельных блоках, то при переключении состояния скрываться/показываться будет весь блок, в котором находится кнопка. Такие блоки лучше размещать после разворачиваемых блоков. Если кнопки управления находятся в одном блоке, то при переключении будут скрываться именно отдельные элементы, а не весь блок. Оба варианта корректны — выбирайте подходящий под верстку. 4. Присвойте кнопкам управления ссылки и укажите их в настройках модификации Для кнопок «Показать» подойдёт любая ссылка вида `#show`, для кнопок «Скрыть» — `#hide`. Для нескольких секций ссылки следует задавать по-разному, например `#show1`, `#hide1`, `#show2`, `#hide2` и т.д. Кнопку скрытия можно не использовать совсем — тогда соответствующий параметр в настройках модификации нужно оставить пустым. 5. Задайте в настройках модификации класс секции и её параметры 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Показ/скрытие блоков по кнопкам** Пример управления видимостью нескольких блоков по клику. [Пример](https://postnikovmd.com/mods/more/example) ## Особенности | Работает с любыми блоками | Поддерживает несколько блоков | Работает с автоскейлом | | --- | --- | --- | | Модификация поддерживает как Zero, так и стандартные блоки | Скрывать и показывать можно целую связку блоков с одним классом | Мод работает корректно как с масштабированием, так и без него | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Раскрываемые блоки | Любые блоки | .uc-more | - | | Кнопка показа | Button/Object | - | #show | | Кнопка скрытия | Button/Object | - | #hide | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | more.init(selector, params) | Запускает скрытие/показ блоков по клику | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | ID/класс блоков, участвующих в скрытии | string | - | | params.show | Ссылка для кнопки показа блоков | string | - | | params.hide | Ссылка для кнопки скрытия блоков | string | - | | params.scroll | Автоматическая прокрутка к раскрытому блоку | boolean | true | | params.transition | Скорость переходов при показе/скрытии | number | 300 | | params.easing | Тип переходов для анимации | string | 'ease-in-out' | --- # Копирование текста в Zero-блоке Добавляет кнопку копирования текста в Zero-блоке с настраиваемым сообщением и подсказкой. > Время настройки: 2 минуты ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте кнопке, при нажатии на которую будет копироваться текст, ссылку `#copy`. Если вы планируете использовать несколько кнопок копирования на странице, задайте им разные ссылки, например, #copy1, #copy2 и т. д. 3. Задайте текстовому элементу, который будет копироваться при нажатии на кнопку, класс `.copy-text`. Если отдельный текстовый элемент отсутствует, копироваться будет содержимое самой кнопки. Аналогично ссылкам, для нескольких кнопок задайте соответствующие им классы .copy1-text, .copy2-text и т.д. 4. Если при копировании текста должно изменяться содержимое любого другого элемента, кроме кнопки, присвойте ему класс `.copy-label`. По-умолчанию модификация добавляет сообщение успеха в текст самой кнопки (Button). Если в качестве неё выступает группа объектов, то для вывода сообщения об успехе текстовому элементу внутри неё необходимо присвоить указанный класс. Если внутри кнопки нет текста, и класс .copy-label не указан ни для одного элемента внутри неё, сообщение об успехе выведется в скопированный текст. Для нескольких кнопок копирования по аналогии задайте разные названия классов, например, .copy1-label, .copy2-label и т.д. 5. Задайте в настройках модификации параметры и поведение кнопки копирования. 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Копирование текста в Zero-блоке** Пример копирования по клику содержимого текста в буфер обмена. [Пример](https://postnikovmd.com/mods/copy/example) ## Особенности | Работает с Zero-блоками | Поддерживает любую верстку | Имеет встроенные подсказки | | --- | --- | --- | | Кнопка позволяет копировать текст только из Zero-блока | Элементы могут располагаться в разных блоках | Можно настроить появление подсказок при копировании | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Кнопка копирования | Button / Object | - | #copy | | Текст для копирования | Text Element | .copy-text | - | | Элемент для сообщения об успехе | Text Element | .copy-label | - | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | copy.init(selector, params) | Запускает функцию копирования текста | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Ссылка для кнопки копирования | string | - | | params.target | Класс текста, который нужно копировать | string | selector + '-text' | | params.label | Класс для вывода сообщения об успехе | string | selector + '-label' | | params.message | Сообщение после успешного копирования | string | 'Скопировано' | | params.timeout | Задержка перед возвратом исходного текста | number | 2000 | | params.transition | Скорость перехода для анимации | number | 300 | | params.easing | Тип перехода для анимации | string | 'ease-in-out' | | params.event | Событие, после которого должна запуститься модификация | string | - | | params.hint.hover | Включить отображение подсказки при наведении | boolean | false | | params.hint.position | Положение подсказки относительно кнопки | string | 'top' | | params.hint.message | Текст подсказки при наведении | string | 'Скопировать' | | params.style | Стили элементов копирования | object | {} | | params.style.hint.margin | Внешний отступ подсказки | number | 0 | | params.style.hint.padding | Внутренний отступ текста подсказки | number | 0 | | params.style.hint.backgroundColor | Цвет фона подсказки | string | '#000000' | | params.style.hint.borderColor | Цвет бордера подсказки | string | '#000000' | | params.style.hint.borderWidth | Толщина бордера подсказки | number | 0 | | params.style.hint.borderRadius | Скругление углов подсказки | number | 0 | | params.style.hint.color | Цвет текста подсказки | string | '#FFFFFF' | | params.style.hint.fontSize | Размер текста подсказки | number | 12 | | params.style.hint.fontWeight | Толщина текста подсказки | number | 500 | --- # Мультизаголовки в Zero-блоке Позволяет объединить несколько текстовых элементов в общий заголовок, который поисковики будут воспринимать как единый H1, H2 или H3. > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте класс `.uc-title` для текстовых элементов, которые нужно объединить Если вы планируете использовать несколько текстовых блоков с разными параметрами (например, H1 и H2), задайте им разные классы, например, .uc-title1, .uc-title2 и т.д. 3. Задайте в настройках модификации тег, в который должен объединяться выбранный текст Его также можно настроить в интерфейсе Тильды, указав всем текстовым элементам с классом одинаковый SEO-тег (Настройки элемента → Tag). 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Мультизаголовки в Zero-блоке** Пример объединения нескольких текстовых элементов в общий H1/H2. [Пример](https://postnikovmd.com/mods/tags/example) ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | tags.init(selector, params) | Инициализирует функцию объединения текста | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс текстовых элементов | string | - | | params.tag | HTML-тег мультизаголовка | string | 'h1' | | params.combine | Правило объединения элементов (сепаратор) | string | ' ' | | params.arrange | Автоматическая расстановка слоев | boolean | true | --- # Сокращение текста по количеству строк Добавляет возможность сокращать любой текст в Zero-блоке по количеству строк > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте класс `.uc-trim` для текстовых блоков, которые нужно сократить Если вы планируете добавить несколько текстовых блоков с разными параметрами сокращения, задайте им разные классы, например, .uc-trim1, .uc-trim2 и т. д. 3. Задайте в настройках модификации количество строк, до которых будет сокращаться текст Если вы хотите разворачивать и сворачивать текст по кнопкам, задайте им любые ссылки и укажите их в настройках. Блоки с кнопками лучше всего верстать в автолэйауте. 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Сокращение текста по количеству строк** Пример сокращения текста в карточках до определенного количества строк. [Пример](https://postnikovmd.com/mods/truncate/example) ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | truncate.init(selector, params) | Инициализирует функцию сокращения текста | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс текстовых блоков для сокращения | string | - | | params.lines | Количество строк после сокращения | number | 3 | | params.expand | Ссылка для раскрытия текста | string | - | | params.collapse | Ссылка для сворачивания текста | string | - | | params.position | Сокращение текста относительно начала, середины или конца текста | string | 'end' | --- # Lottie-анимации в Zero-блоке Добавляет настраиваемые lottie-анимации в любой шейп в Zero-блоке > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте шейп внутри Zero-блока, в который будет загружаться анимация и задайте ему класс `.uc-lottie` Если вы планируете использовать несколько lottie-анимаций на странице, задайте им разные классы, например, .uc-lottie1, .uc-lottie2 и т.д. 3. Задайте в настройках модификации класс шейпа и ссылку на файл с анимацией 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Lottie-анимации в Zero-блоке** Добавление настраиваемых анимаций внутрь шейпа в Zero-блоке. [Пример](https://postnikovmd.com/mods/lottie/example) ## Особенности | Можно встроить в любой шейп | Запускается по триггеру | Работает с автоскейлом | | --- | --- | --- | | Lottie встраивается в размеры шейпа и работает внутри него | Если элемент с контейнером находится в видимой зоне экрана | Мод работает с масштабированием так же корректно, как и без него | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | lottie.init(selector, params) | Инициализирует lottie-анимации | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс шейпа для загрузки Lottie | string | - | | params.url | Ссылка на файл с Lottie-анимацией | string | - | | params.speed | Скорость Lottie-анимации | number | 1 | --- # Гравитация объектов в Zero-блоке Добавляет физику элементам в Zero-блоке и позволяет создать эффект их падения с реалистичными столкновениями и взаимодействием. > Время настройки: 2 минуты ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте блок, в котором будет работать эффект, и присвойте ему класс `.uc-gravity` Если вы планируете использовать несколько блоков с гравитацией на одной странице, задайте им разные названия классов, например, .uc-gravity1, .uc-gravity2 и т. д. 3. Задайте элементам, для которых должна работать гравитация, класс `.matter-elem` Это могут быть как отдельные элементы (картинки, шейпы, текст), так и группы с типом Object. Каждый объект начнёт падение из точки, в которой он изначально располагается. Его форма и размер могут быть любыми. 4. Создайте шейп, внутри которого будут находиться падающие элементы, и присвойте ему класс `.matter`. Данный шейп будет выступать границей для элементов с гравитацией. Если элементы должны падать из-за границ контейнера, но после падения оставаться внутри него, разместите их выше созданного шейпа. 5. Задайте в настройках модификации параметры гравитации и поведение элементов 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Гравитация объектов в Zero-блоке** Пример с падающими элементами (физикой) внутри одного блока. [Пример](https://postnikovmd.com/mods/gravity/example) ## Особенности | Элементы имеют массу | Запускается по триггеру | Работает с автоскейлом | | --- | --- | --- | | Бóльшие элементы падают быстрее и могут толкать маленькие | Если контейнер с элементами находится в видимой зоне экрана | Мод работает корректно как с масштабированием, так и без него | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Контейнер симуляции | Shape/Object | .matter | - | | Падающие элементы | Любые элементы/Object | .matter-elem | - | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | gravity.init(selector, params) | Запускает гравитацию в Zero-блоке | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока с гравитацией | string | - | | params.matter | Класс контейнера для симуляции | string | .matter | | params.elems | Класс элементов, участвующих в падении | string | .matter-elem | | params.click | Включить взаимодействие по клику (толчок элемента) | boolean | false | | params.random | Использовать случайное начальное положение элементов | boolean | false | | params.rotate | Использовать случайный поворот элементов | boolean | false | | params.mass | Учитывать массу элементов при падении | boolean | true | | params.padding | Внутренний отступ контейнера, формирующий область симуляции | number | 0 | | params.gravity | Сила гравитации, влияющая на скорость падения | number | 1 | | params.force | Сила толчка при клике | number | 1 | | params.maxangle | Максимальный случайный угол наклона в градусах | number | 15 | | params.trigger | Триггер появления (window-bottom, window-center, window-top) | string | window-bottom | | params.offset | Дополнительное смещение для триггера | number | 0 | | params.event | Событие, после которого должен запуститься эффект | string | - | | params.timeout | Задержка после срабатывания события | number | - | --- # Потоки в Zero-блоке Позволяет вывести карточки постов из потоков Тильды в Zero-блок с любой вёрсткой и внешним видом > Время настройки: 10 минут ## Как работает модификация ### Общие механики Поток выводит посты из ленты Тильды в Zero-блок, оформляя их собственными карточками. Карточка верстается один раз как шаблон, а модификация запрашивает посты потока через API Тильды и размножает шаблон по их количеству, подставляя в каждую карточку реальные данные — название, описание, изображение, дату и ссылку на пост. За счёт этого внешний вид постов полностью определяется вёрсткой блока, а содержимое остаётся на стороне Тильды. Пока данные подгружаются из потока, на месте контента показываются скелетоны — заглушки, которые сменяются реальными значениями после загрузки. Сетка карточек пересчитывается автоматически, в том числе при изменении размера окна. Если в потоке нет ни одного поста, вместо ленты показывается отдельный блок пустого состояния. Дата публикации форматируется модификацией по параметрам `dateformat` и `lang`: поддерживаются полный и сокращённый месяц («1 января 2026», «1 янв 2026») и числовой формат («01.01.2026», «01.01.26») на русском или английском языке. Язык по умолчанию определяется по стране проекта Тильды. ### Определение номера потока Поток, из которого выводятся посты, задаётся параметром `params.feeduid` — это внутренний идентификатор раздела потоков в Тильде. Определить его можно двумя способами. В генераторе кода есть возможность автоматически определить номер потока по ссылке на опубликованную страницу. Для этого на временную страницу необходимо добавить блок потоков FD301, выбрать нужный раздел с потоком, опубликовать страницу и вставить ссылку на неё в генератор кода. После нажатия на кнопку 🔄, номер потока автоматически подтянется в код. Если на странице нет блока потока или она недоступна, генератор сообщит об этом в диалоговом окне. Автоопределение ограничено по частоте обращений (до 5 запросов в час). Номер потока также можно получить вручную: в разделе проекта «Сайт → Потоки → Поток» адрес страницы потока имеет вид `https://feeds.tilda.ru/posts/?feeduid=000000000000`, где значение после `feeduid=` – и есть нужный идентификатор. ### Пагинация Когда постов в потоке больше, чем помещается на одной странице (`params.perpage`, по умолчанию 12), они разбиваются на страницы, а под потоком появляется отдельный блок пагинации. Переключение страницы подгружает следующую порцию постов без перезагрузки страницы, а если включён параметр `params.scrolltotop` — прокручивает к началу блока. Внешний вид номеров страниц в активном и неактивном состоянии берётся из кнопок-шаблонов в самом блоке. ## Начало работы ### Установка библиотеки Для работы потоков необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции: - [Потоки в Zero-блоке](https://postnikovmd.com/mods/feed) ### Инструкция по установке #### Потоки 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок с одним рядом карточек постов В одном ряду может быть любое количество карточек. Модификация будет использовать их расположение и размеры как шаблон и автоматически клонировать карточки для каждого поста из потока. 3. Задайте блоку с карточками постов класс `.uc-feed` 4. Объедините содержимое каждой карточки в группу с типом `Object` Внутри карточки может быть любое количество элементов. Карточки рекомендуется верстать через автолэйаут — это позволит им динамически подстраивать размеры под контент, подгружаемый из каталога. 5. Присвойте получившимся группам класс `.post` и ссылку `#post` Если вы хотите открывать детальную страницу поста по определенной кнопке в карточке, задайте ссылку #post только ей 6. Задайте элементам в карточках соответствующие классы и ссылки: Все элементы опциональны — можно добавить только те, которые нужны в вашем дизайне: - .post-title — название поста - .post-descr — короткое текстовое описание поста - .post-image — изображение поста (Image) - .post-date — дата публикации поста - .post-parts – разделы поста (через запятую) 7. Создайте Zero-блок для пустого состояния и присвойте ему класс `.uc-feed-empty` Блок будет отображаться автоматически, когда в потоках нет ни одного поста. По умолчанию он скрыт. 8. Задайте в настройках модификации параметры, стили и поведение потоков 9. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Пагинация 1. Создайте Zero-блок с пагинацией и присвойте ему класс `.uc-feed-pagination` Блок будет отображаться, если общее количество постов превышает количество постов, доступных на одной странице. 2. Добавьте в блок кнопки с номерами страниц и задайте им ссылку `#page` В качестве кнопок рекомендуется использовать элементы с типом Button. Их можно расположить в любом месте блока. Первой кнопке задайте стили активного состояния, второй — неактивного: модификация будет использовать их как шаблон для всех остальных элементов. Для того, чтобы сделать разделитель «...», добавьте между страницами ещё одну кнопку и присвойте ей класс .page-separator. 3. Добавьте в блок кнопки переключения страниц и задайте им ссылки: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` 4. Объедините получившиеся элементы в группу с типом `Object` и `Auto Layout` ### Элементы Ниже приведены элементы, из которых состоят потоки. Они задаются и настраиваются в интерфейсе Тильды. | Элемент | Описание | Класс/ссылка | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | Блок потоков* | Zero-блок с одним рядом карточек-шаблонов. Модификация клонирует карточки под посты из потока. | `.uc-feed` | | Карточка поста* | Содержимое карточки, объединённое в группу типа Object. Рекомендуется верстать через автолэйаут. Чтобы открывать пост по отдельной кнопке, задайте ссылку `#post` только ей. | `.post`, `#post` | | Изображение поста | Изображение поста (Image). | `.post-image` | | Название поста | Название поста. | `.post-title` | | Описание поста | Короткое текстовое описание поста. | `.post-descr` | | Дата поста | Дата публикации. Форматируется по параметрам `dateformat` и `lang`. | `.post-date` | | Блок пагинации | Отображается, если постов больше, чем помещается на странице. | `.uc-feed-pagination` | | Номер страницы | Кнопка с номером страницы. | `#page` | | Разделитель | Кнопка-разделитель «…» между страницами. | `.page-separator` | | Кнопки «Назад»/«Вперёд» | Переключение страниц пагинации. | `#prev`, `#next` | | Блок пустого состояния | Показывается, когда в потоке нет ни одного поста. | `.uc-feed-empty` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой потоков. Подгружаются асинхронно как функции объекта `feed`. | Функция | Описание | Триггер | | --------------------------- | ---------------------------------- | --------------------------------- | | feed.init(selector, params) | Инициализирует потоки в Zero-блоке | DOM Content Loaded, Window Resize | В качестве аргументов для настройки потоков передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ---------------------------------------------- | ----------------------------------------------------------------------------- | ------- | ------------------------ | | selector | Класс блока потоков | string | - | | params.feeduid | Идентификатор раздела потока в Тильде | string | - | | params.card | Класс карточки поста | string | '.post' | | params.title | Класс названия поста | string | '.post-title' | | params.descr | Класс короткого описания поста | string | '.post-descr' | | params.image | Класс изображения поста | string | '.post-image' | | params.date | Класс даты публикации поста | string | '.post-date' | | params.link | Ссылка для перехода на страницу поста | string | '#post' | | params.empty | Класс блока пустого состояния | string | selector + '-empty' | | params.perpage | Количество постов на странице | number | 12 | | params.sort | Порядок отображения постов ('desc' — новые в начале, 'asc' — старые в начале) | string | 'desc' | | params.dateformat | Формат отображения даты ('ddmonthyyyy' / 'ddmonyyyy' / 'ddmmyyyy' / 'ddmmyy') | string | 'ddmmyyyy' | | params.lang | Язык отображения даты ('ru' / 'en') | string | по стране проекта | | params.scrolltotop | Прокручивать страницу к началу при переключении страниц | boolean | true | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.pagination.selector | Класс блока пагинации | string | selector + '-pagination' | | params.pagination.page | Ссылка номеров страниц | string | '#page' | | params.pagination.prev | Ссылка кнопки «Назад» | string | '#prev' | | params.pagination.next | Ссылка кнопки «Вперёд» | string | '#next' | | params.pagination.separator | Класс разделителя страниц | string | '.page-separator' | | params.style.skeleton.backgroundColor | Цвет скелетона при загрузке | string | '#F3F3F3' | | params.style.pagination.active.backgroundColor | Цвет фона активной страницы | string | - | | params.style.pagination.active.backgroundImage | Изображение активной страницы | string | - | | params.style.pagination.active.borderColor | Цвет бордера активной страницы | string | - | | params.style.pagination.active.opacity | Непрозрачность активной страницы | number | - | | params.style.pagination.inactive.opacity | Непрозрачность неактивных стрелок пагинации | number | - | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы: **Запустить потоки по срабатыванию события** Отложить инициализацию потоков можно с помощью параметров `event` и `timeout`. Например, запустить их через 100ms после срабатывания `customEvent` можно таким образом: ```js feed.init(".uc-feed", { feeduid: "000000000000", event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки потоков** Если код нужно выполнить после того, как потоки полностью отрисуются, добавьте слушатель события `feedinit-id`, где `feedinit` — событие отрисовки потоков, `id` — класс блока без префикса `uc` или `rec`. Например, если у блока с потоками класс `.uc-feed`, то слушатель события добавляется следующим образом: ```js window.addEventListener("feedinit-feed", function(){ ... }) ``` **Запустить другую модификацию после отрисовки потоков** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки потоков можно через событие `feedinit`: ```js tabs.init(".uc-feed", { event: "feedinit-feed" }) ``` ### Инициализация Код инициализации потоков вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом: ```html <!--feed.js Потоки в Zero-блоке. https://postnikovmd.com/mods/feed--> feed.init(".uc-feed", { feeduid: "000000000000" }) ``` ## Примеры использования ### Блог с карточками постов и пагинацией В блоке `.uc-feed` создаётся ряд карточек-шаблонов с классом `.post` и ссылкой `#post`, внутри — элементы `.post-image`, `.post-title`, `.post-descr`, `.post-date`; рядом — блок пагинации `.uc-feed-pagination`. В коде инициализации указывается класс блока и номер раздела потока: ```html feed.init(".uc-feed", { feeduid: "000000000000" }) ``` Пример: [Потоки в Zero-блоке](https://postnikovmd.com/mods/feed/example) ## Распространенные проблемы ### Если модификация не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Кнопка «Вернуться назад» Позволяет перейти на предыдущую или главную страницу по кнопке с определенной ссылкой > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте в настройках модификации ссылку для кнопки «Вернуться назад» 3. Скопируйте код и вставьте его в блок T123 в конец страницы ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | back.init(url, params) | Инициализирует функцию | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | url | Ссылка для кнопок возврата назад | string | #back | | params.indexurl | Ссылка для страницы возврата при отсутствии истории | string/boolean | '/'\|false | --- # Эффект переворота карточек Добавляет эффект переворота карточек при наведении, клике или нажатии на определенную кнопку > Время настройки: 5 минут ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок и добавьте в него карточки, которые будут переворачиваться (переднюю и заднюю сторону) 3. Объедините элементы передних и задних карточек в группы с типом `Object` В одну группу должны входить элементы только одной стороны карточки. Таким образом, каждая карточка будет содержать две отдельные группы. 4. Присвойте передним карточкам класс `.uc-flip`, и задним — `.uc-flip-back` Если вы планируете использовать на странице несколько блоков с таким эффектом, задайте карточкам в каждом блоке разные названия классов, например, .uc-flip1, .uc-flip1-back, .uc-flip2, .uc-flip2-back и т.д. 5. Расположите карточки в слоях в порядке возрастания Первая карточка должна находиться в самом низу, а каждая следующая — на уровень выше. Первой передней карточке будет соответствовать первая задняя карточка, и т.д. Задние карточки необходимо расположить позади передних. 6. Задайте в настройках модификации поведение карточек и параметры их анимации 7. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Эффект переворота карточек** Анимация переворота (отражения) карточек при наведении. [Пример](https://postnikovmd.com/mods/flip/example) - **Слайдер с переворотом карточек** Эффект переворота (анимация) карточек внутри Zero-слайдера. [Пример](https://postnikovmd.com/mods/flip/example-slider) - **Переворачивающиеся карточки с видео** Анимация переворота карточек, видео и слайдер в одном блоке. [Пример](https://postnikovmd.com/mods/flip/example-video) - **Автоматический переворот карточек** Эффект переворота (анимация) карточек с определенным интервалом. [Пример](https://postnikovmd.com/mods/flip/example-autoplay) ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Передние карточки | Element/Object | .uc-flip | - | | Задние карточки | Element/Object | .uc-flip-back | - | | Кнопка переворота | Shape/Button | - | #flip | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | flip.init(selector, params) | Инициализирует переворот карточек | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс передних карточек | string | - | | params.back | Класс задних карточек | string | selector + '-back' | | params.click | Переворот карточек по клику | boolean | false | | params.link | Ссылка для кнопки переворота | string | - | | params.single | Оставлять перевернутой только одну карточку | boolean | false | | params.perspective | Перспектива переворота карточек | number | 1500 | | params.transition | Скорость переворота карточек в миллисекундах | number | 300 | | params.easing | Функция переворота карточек | string | 'ease-in-out' | --- # Эффект 3D-карточек при наведении Добавляет эффект 3D-поворота карточек в Zero-блоке с настраиваемой анимацией > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок и добавьте в него карточки, для которых будет применён эффект 3. Объедините элементы карточек в группы с типом `Object` и задайте каждой из них класс `.uc-tilt` Если вы планируете использовать на странице несколько блоков с таким эффектом, задайте карточкам в каждом блоке разные классы, например, .uc-tilt1, .uc-tilt2 и т. д. 4. Задайте в настройках модификации класс карточек и параметры их анимации 5. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Эффект 3D-поворота карточек** Пример интерактивной анимации карточек при наведении. [Пример](https://postnikovmd.com/mods/tilt/example) ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | tilt.init(selector, params) | Инициализирует 3D-поворот карточек | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс карточек | string | - | | params.rotate | Максимальный угол поворота | number | 5 | | params.speed | Скорость поворота карточек | number | 300 | | params.perspective | Перспектива 3D-трансформации | number | 1000 | | params.glare | Эффект бликов при повороте | boolean | true | | params.maxglare | Яркость бликов при повороте | number | | --- # Анимация появления текста по словам Добавляет эффекты появления текста в Zero-блоках по каждому слову или букве > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 1. Задайте тексту, для которого хотите применить эффект, класс `.uc-text` Если вы планируете использовать на странице несколько текстов с таким эффектом, задайте им разные классы, например, .uc-text1, .uc-text2 и т.д. 2. Задайте в настройках модификации параметры анимации текста 3. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Анимация текста по словам** Пример эффекта плавного появления текста по скроллу. [Пример](https://postnikovmd.com/mods/textsplit/example) - **Анимация текста по буквам** Аналогичный пример эффекта появления текста по скроллу. [Пример](https://postnikovmd.com/mods/textsplit/example) ## Особенности | Поддерживает анимации | Работает с автоскейлом | Запускается по триггеру | | ----------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------- | | Модификация поддерживает несколько вариантов анимаций | Мод работает с масштабированием так же корректно, как и без него | Если элемент с контейнером находится в видимой зоне экрана | ## Параметры | Функция | Описание | Триггер | | -------------------------------- | ---------------------------------- | ------------------ | | textsplit.init(selector, params) | Инициализирует анимацию для текста | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | ----------------- | ---------------------------------- | ------ | --------------------- | | selector | Класс текстового элемента | string | - | | params.animation | Тип анимации | string | 'slide-up' | | params.split | Разделение текста по словам/буквам | string | 'word' | | params.trigger | Запуск анимации по триггеру | string | 'window-bottom' | | params.link | Ссылка для кнопки проигрывания | string | ' ' | | params.offset | Дистанция скролла для триггера | number | 0 | | params.delay | Задержка для триггера | number | 100 | | params.transition | Скорость анимации текста | number | 300 | | params.interval | Интервал между появлением слов | number | 100 | | params.easing | Функция анимации текста | string | 'ease-in-out' | --- # Анимация чисел с увеличением/уменьшением Добавляет эффект увеличения/уменьшения чисел в Zero-блоках > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте тексту, для которого хотите применить эффект, класс `.uc-numbers` Если вы планируете использовать несколько элементов с таким эффектом, задайте им разные классы, например, .uc-numbers1 и .uc-numbers2 3. Задайте в настройках модификации параметры анимации чисел 4. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Анимация чисел (линейная)** Пример эффекта плавного увеличения/уменьшения текста по скроллу. [Пример](https://postnikovmd.com/mods/numbers/example) - **Анимация чисел (экспоненциальная)** Пример эффекта плавного увеличения/уменьшения текста по скроллу. [Пример](https://postnikovmd.com/mods/numbers/example-easing) ## Особенности | Работает с целыми числами | Поддерживает префиксы | Запускается по триггеру | | --- | --- | --- | | Модификация поддерживает только целые числа. Например, 100 или 1 000 | Любые символы до и после числа. Например, «<» или «руб.» | Если элемент с контейнером находится в видимой зоне экрана | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | numbers.init(selector, params) | Инициализирует анимацию чисел | DOM Content Loaded | | numbers.animate(selector, params) | Запускает проигрывание анимации |- | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс текстового элемента с числом | string | - | | params.start | Начинать анимацию с числа | number | - | | params.end | Заканчивать анимацию числом | number | - | | params.format | Разделитель между тысячами | string | ' ' | | params.link | Ссылка для кнопки проигрывания | string | ' ' | | params.transition | Скорость анимации в миллисекундах | number | 1000 | | params.easing | Функция анимации | string | 'linear' | --- # Анимация перемешивания текста Добавляет эффект перемешивания букв в тексте с запуском по скроллу или нажатию определенной кнопки. > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте тексту, для которого хотите применить эффект, класс `.uc-shuffle` Если вы планируете использовать на странице несколько текстовых элементов с таким эффектом, задайте им разные классы, например, .uc-shuffle1, .uc-shuffle2 и т. д. 3. Чтобы эффект запускался по кнопке, задайте ей ссылку `#shuffle` Для нескольких текстовых элементов на странице, по аналогии, задайте разные названия ссылок и укажите их в настройках модификации. 4. Задайте в настройках модификации параметры анимации текста 5. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Анимация перемешивания текста** Эффект перемешивания символов в тексте по скроллу или клику. [Пример](https://postnikovmd.com/mods/shuffle/example) ## Особенности | Работает с автоскейлом | Запускается по триггеру | Запускается по кнопке | | --- | --- | --- | | Мод работает корректно как с масштабированием, так и без него | Если текстовый элемент находится в видимой зоне экрана | Анимация будет срабатывать при нажатии на заданную кнопку | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Текст для перемешивания | Текст | .uc-shuffle | - | | Кнопка запуска анимации | Button/Object | - | #shuffle | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | shuffle.init(selector, params) | Запускает анимацию перемешивания текста | DOM Content Loaded | | shuffle.shuffle(selector, params) | Перемешивает текст принудительно | - | | shuffle.arrange(selector, params) | Возвращает текст в исходный порядок | - | | Параметр | Описание | Тип | Значение по-умолчанию | | ----------------- | ----------------------------------------------------------------------- | ------- | --------------------- | | selector | Класс текстового элемента, к которому применяется эффект | string | - | | params.trigger | Триггер для запуска анимации (window-bottom, window-center, window-top) | string | 'window-bottom' | | params.offset | Дополнительное смещение триггера от края экрана | number | 0 | | params.delay | Задержка анимации после срабатывания триггера | number | 100 | | params.transition | Длительность анимации | number | 1000 | | params.link | Ссылка для кнопки перемешивания | string | '#shuffle' | | params.reset | Возвращать текст в исходный вид после перемешивания | boolean | true | | params.event | Событие, после которого должна запуститься модификация | string | - | | params.timeout | Задержка после срабатывания пользовательского события | number | - | --- # Эффект конфетти в Zero-блоке Добавляет эффект разлетающихся частиц конфетти внутри любого элемента в Zero-блоке. > Время настройки: 1 минута ## Инструкция 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Задайте блоку, в котором должен срабатывать эффект конфетти, класс `.uc-confetti`. Если таких блоков на странице несколько, укажите для них разные названия классов, например, .uc-confetti1, .uc-confetti2 и т.д. 3. Добавьте в блок шейп, внутри которого будет появляться конфетти и задайте ему класс `.confetti`. Размер данного шейпа будет определять область, в пределах которой должны появляться частицы. 4. Если конфетти должно запускаться по кнопке — задайте ей ссылку `#confetti` Если на странице несколько блоков с конфетти, используйте разные ссылки: #confetti1, #confetti2 и т.д., предварительно указав их в настройках модификации. 5. Задайте в настройках модификации параметры появления эффекта 6. Скопируйте код и вставьте его в блок `T123` в конец страницы ## Примеры Примеры модификации — можно открыть и скопировать к себе как готовый шаблон. Полный каталог: Примеры. - **Эффект конфетти в Zero-блоке** Анимация падающих частиц (конфетти) внутри заданного шейпа. [Пример](https://postnikovmd.com/mods/confetti/example) ## Особенности | Работает с автоскейлом | Поддерживает свои цвета | Можно встроить в любой шейп | | --- | --- | --- | | Мод работает корректно как с масштабированием, так и без него | Можно задать свою цветовую палитру для эффекта конфетти | Позволяет разместить эффект в карточках в любом месте блока | ## Элементы | Название | Тип | Класс | Ссылка | | --- | --- | --- | --- | | Контейнер для конфетти | Shape | .confetti | - | | Кнопка запуска эффекта | Button/Object | - | #confetti | ## Параметры | Функция | Описание | Триггер | | --- | --- | --- | | confetti.init(selector, params) | Запускает эффект конфетти | DOM Content Loaded | | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока, в котором должен запускаться эффект | string | - | | params.container | Класс контейнера, внутри которого генерируются частицы конфетти | string | '.confetti' | | params.link | Ссылка кнопки, запускающей эффект конфетти | string | '#confetti' | | params.transition | Длительность эффекта | number | 1000 | | params.particles | Количество генерируемых частиц конфетти | number | 300 | | params.spread | Интервал появления новых частиц (в мс) | number | 40 | | params.minsize | Минимальный размер частицы конфетти | number | 3 | | params.maxsize | Максимальный размер частицы конфетти | number | 12 | | params.eccentricity | Экцентриситет кривых движения частиц | number | 10 | | params.deviation | Амплитуда отклонения частиц от траектории | number | 100 | | params.colors | Цветовая палитра частиц конфетти | string | '#7C55FB, #6FEFB0, #FED650' | | params.trigger | Триггер для срабатывания эффекта | string | 'window-bottom' | | params.offset | Смещение триггера от края экрана | number | 0 | | params.delay | Задержка после срабатывания триггера | number | 100 | | params.event | Событие, после которого должна запуститься модификация | string | - | | params.timeout | Задержка после срабатывания пользовательского события | number | - | --- # Страница авторизации в Zero-блоке Позволяет собирать полностью кастомные страницы входа, регистрации и восстановления пароля в личном кабинете из Zero-блоков. > Время настройки: 5 минут ## Как работает модификация ### Общие механики В основе модуля лежит механика синхронизации с нативным личным кабинетом Тильды. За авторизацию, профиль и историю заказов отвечает внутренняя логика Тильды. Модификация не реализует эту логику заново внутри Zero-блока: такой подход был бы хрупким, потому что обновление кабинета со стороны Тильды могло бы его сломать. Вместо этого Тильда сама запускает и отрисовывает стандартный личный кабинет по своим правилам, а модификация скрывает его элементы от пользователя и связывает их с Zero-блоком. Значения, которые пользователь вводит в Zero-вёрстке, синхронизируются со скрытым нативным кабинетом, и данные на сервер отправляет именно он. За счёт этого Zero-блок работает как оболочка поверх стандартного механизма Тильды и не зависит от того, как устроена его внутренняя логика. Остальное поведение модуля следует из этого подхода. Каждая страница кабинета подключается своей функцией, и её код подгружается только при вызове. Страницы профиля, заказов и курсов доступны только авторизованному пользователю: если он не вошёл, модификация перенаправляет его на страницу входа, а после входа возвращает на исходную страницу. Пока данные пользователя подгружаются из нативного кабинета, на месте контента отображаются скелетоны — заглушки в форме элементов, которые сменяются реальными значениями после загрузки. Страницы входа и регистрации, как и в Тильде, могут открываться отдельной страницей или во всплывающем окне. ### Страницы входа, регистрации и восстановления пароля Авторизация в личном кабинете работает за счет синхронизации Zero-формы со скрытой стандартной формой Тильды. Данные, которые пользователь вводит в форму, попадают в оригинальную форму авторизации, и при нажатии на кнопку #submit уходят на сервер Тильды, как это происходит на стандартных страницах. Если сервер возвращает ошибку авторизации (например, неверный пароль), она выводится в форме Zero-блока, обеспечивая таким образом двустороннюю интеграцию и обмен данными. Сама Zero-форма при этом не отправляется – это защищает от утечек чувствительных данных и персональной информации. Страницы авторизации работают как на отдельной странице, так и внутри поп-апа за счет встраивания документа через iframe. В случае с iframe, внутри поп-апа может также происходить навигация по внутренним ссылкам (например, регистрация → авторизация → восстановление пароля). Подробнее: [Страница входа в личный кабинет](https://postnikovmd.com/mods/members/sign) ### Профиль, смена пароля и вывод данных Страница профиля работает по той же механике, что и авторизация. Сначала модификация подтягивает текущие данные пользователя из кабинета Тильды и подставляет их в поля Zero-формы — имя, email, телефон и язык. При сохранении по кнопке `#save` изменённые значения уходят на сервер через стандартную форму Тильды; кнопка `#cancel` отменяет правки. Так же, через нативный механизм, обновляется и аватар: загрузка нового изображения и удаление текущего выполняются средствами Тильды, а результат сразу отражается в шейпе профиля. Смена пароля работает аналогично — отдельная страница с полями текущего и нового пароля, чья отправка тоже идёт через стандартную форму кабинета. Подробнее: [Страница профиля в Zero-блоке](https://postnikovmd.com/mods/members/profile) ### История заказов и покупок Историю заказов и покупок Тильда формирует своим встроенным виджетом. Модификация не строит этот список заново, а запускает отрисовку штатного виджета и переносит готовый результат внутрь Zero-блока — в шейп с классом `.container`. За счёт этого история оформляется вёрсткой Zero-блока, но остаётся полностью на стороне Тильды и обновляется вместе с её кабинетом. Пока история загружается, на её месте показывается скелетон. Подробнее: [История заказов в Zero-блоке](https://postnikovmd.com/mods/members/orders) ### Список курсов Список курсов выводит карточки, доступные пользователю в его аккаунте. В отличие от истории заказов, здесь вёрстка карточек полностью своя: в Zero-блоке создаётся ряд карточек-шаблонов, а модификация запрашивает у Тильды доступные пользователю курсы и размножает шаблон по их количеству, подставляя в каждую карточку название курса и ссылку на него. Готовая сетка карточек подстраивается под их исходное расположение и пересчитывается при изменении размера экрана. Если у пользователя нет ни одного доступного курса, вместо списка показывается отдельный блок пустого состояния. Подробнее: [Страница курсов в Zero-блоке](https://postnikovmd.com/mods/members/courses) ### Кнопка выхода Функция `members.logout` превращает любой элемент со ссылкой `#logout` в кнопку выхода из личного кабинета. По клику модификация вызывает стандартный выход Тильды и очищает данные авторизации из хранилища. Если включён параметр `params.reload`, страница после выхода перезагружается, а на страницах `/members/...` — отправляет на страницу входа. Подробнее: [Своя кнопка выхода из личного кабинета](https://postnikovmd.com/mods/members/logout) ### Скрытие стандартной иконки профиля Функция `members.hideuserbar` скрывает стандартную иконку личного кабинета (userbar), которую Тильда добавляет на страницы. Модификация добавляет служебный стиль, прячущий элемент `.tlk-userbar`. Код работает только на тех страницах, где он установлен; чтобы скрыть иконку по всему сайту, его можно перенести в общий подвал. Подробнее: [Скрытие стандартной иконки профиля](https://postnikovmd.com/mods/members/hideuserbar) ## Начало работы ### Установка библиотеки Для работы личного кабинета необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Страница входа в личный кабинет](https://postnikovmd.com/mods/members/sign) - [Своя страница регистрации в личном кабинете](https://postnikovmd.com/mods/members/sign/register) - [Своя страница восстановления пароля](https://postnikovmd.com/mods/members/sign/recover) - [Страница профиля в Zero-блоке](https://postnikovmd.com/mods/members/profile) - [Страница изменения пароля в Zero-блоке](https://postnikovmd.com/mods/members/profile/password) - [Загрузка данных профиля в Zero-блок](https://postnikovmd.com/mods/members/profile/load) - [История заказов в Zero-блоке](https://postnikovmd.com/mods/members/orders) - [История покупок в Zero-блоке](https://postnikovmd.com/mods/members/orders/purchased) - [Страница курсов в Zero-блоке](https://postnikovmd.com/mods/members/courses) - [Своя кнопка выхода из личного кабинета](https://postnikovmd.com/mods/members/logout) - [Скрытие стандартной иконки профиля](https://postnikovmd.com/mods/members/hideuserbar) ### Инструкция по установке #### Страница входа в личный кабинет 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает работать модификациям личного кабинета. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте отдельную страницу для входа в личный кабинет Чтобы заменить стандартную страницу авторизации, задайте для неё ссылку "members/login". После этого любые кнопки с такой ссылкой будут автоматически открывать её во всплывающем окне. По умолчанию Тильда открывает ссылки /members/login и /members/signup во всплывающем окне. Чтобы страница открывалась в поп-апе, достаточно присвоить ей одну из этих ссылок. Если задать ей любую другую ссылку, она будет открываться в отдельном окне. 3. Создайте на странице Zero-блок с формой авторизации и присвойте ему класс `.uc-sign` Если блок должен открываться внутри поп-апа, задайте ему прозрачный фон и установите высоту в 100% экрана. 4. Добавьте в форму авторизации обязательные поля: `login` (тип Email) и `password` (тип One line input field) Для авторизации можно использовать как одну форму с несколькими полями, так и разбить их на несколько разных форм. Главное условие для работы модификации — точное соответствие названий и типов полей в формах. 5. Скройте стандартные кнопки отправки данных в настройках форм и добавьте в блок свою кнопку со ссылкой `#submit` Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0). 6. Задайте ссылку `#close` для кнопок закрытия страницы Данные кнопки будут работать, если страница авторизации откроется в поп-апе. Если открыть её в отдельном окне — кнопки закрытия скроются автоматически. 7. Задайте в настройках модификации параметры и стили страницы авторизации 8. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Своя страница регистрации в личном кабинете 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает работать модификациям личного кабинета. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте отдельную страницу регистрации в личном кабинете Чтобы заменить стандартную страницу авторизации, задайте для неё ссылку "members/signup". После этого любые кнопки с такой ссылкой будут автоматически открывать её во всплывающем окне. По умолчанию Тильда открывает ссылки /members/login и /members/signup во всплывающем окне. Чтобы страница открывалась в поп-апе, достаточно присвоить ей одну из этих ссылок. Если задать ей любую другую ссылку, она будет открываться в отдельном окне. 3. Создайте на странице Zero-блок с формой регистрации и присвойте ему класс `.uc-sign` Если блок должен открываться внутри поп-апа, задайте ему прозрачный фон и установите высоту в 100% экрана. 4. Добавьте в форму регистрации обязательные поля: `name` (тип Name), `login` (тип Email) и `password` (тип One line input field) Для регистрации можно использовать как одну форму с несколькими полями, так и разбить их на несколько разных форм. Главное условие для работы модификации — точное соответствие названий и типов полей в формах. 5. Скройте стандартные кнопки отправки данных в настройках форм и добавьте в блок свою кнопку со ссылкой `#submit` Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0). 6. Задайте ссылку `#close` для кнопок закрытия страницы Данные кнопки будут работать, если страница регистрации откроется в поп-апе. Если открыть её в отдельном окне — кнопки закрытия скроются автоматически. 7. Задайте в настройках модификации параметры и стили страницы регистрации 8. Скопируйте код и вставьте его в блок `T123` в конец страницы #### Своя страница восстановления пароля 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает работать модификациям личного кабинета. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте отдельную страницу для восстановления пароля Чтобы заменить стандартную страницу восстановления, задайте для неё ссылку "members/recover-password". 3. Создайте на странице Zero-блок с формой восстановления пароля и присвойте ему класс `.uc-sign` Если блок должен открываться внутри поп-апа, задайте ему прозрачный фон и установите высоту в 100% экрана. 4. Добавьте в форму восстановления пароля обязательное поле `login` (тип Email) 5. Скройте стандартную кнопку отправки данных в настройках формы и добавьте в блок свою кнопку со ссылкой `#submit` Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0). 6. Создайте на странице Zero-блок с сообщением успеха и присвойте ему класс `.uc-sign-success` Данный блок будет появляться при отправке письма на указанный в форме email. 7. Задайте ссылку `#close` для кнопок закрытия страницы Данные кнопки будут работать, если страница восстановления пароля откроется в поп-апе. Если открыть её в отдельном окне — кнопки закрытия скроются автоматически. 8. Задайте в настройках модификации параметры и стили страницы 9. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоят страницы личного кабинета. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от собираемой страницы. **Страницы входа, регистрации и восстановления пароля** | Элемент | Описание | Класс/ссылка | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | | Блок с формой авторизации* | Zero-блок, в который добавляется форма входа, регистрации или восстановления пароля. Для работы в поп-апе задайте ему прозрачный фон и высоту 100% экрана. | `.uc-sign` | | Поля формы* | Обязательные поля под сценарий: вход — `login` (Email) и `password`; регистрация — `name`, `login`, `password`; восстановление — `login`. Названия и типы полей должны точно совпадать. | `login`, `password`, `name` | | Кнопка отправки формы* | Элемент, по которому отправляется форма. Стандартную кнопку Zero-формы нужно скрыть (убрать текст и задать нулевые ширину и высоту). | `#submit` | | Кнопка закрытия окна | Элемент, по которому закрывается всплывающее окно. В отдельном окне скрывается автоматически. | `#close` | | Блок успеха восстановления | Zero-блок, который показывается после отправки письма для восстановления пароля. | `.uc-sign-success` | \* — обязательные элементы **Страница профиля и смены пароля** | Элемент | Описание | Класс/ссылка | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | Блок профиля* | Zero-блок со страницей профиля или смены пароля. | `.uc-profile` | | Поля профиля* | Для профиля: `name`, `login`, `phone`, `language`. Для смены пароля: `current-password`, `new-password`, `confirm-password`. | — | | Кнопка сохранения* | Сохраняет изменения профиля или новый пароль. Стандартные кнопки форм скрываются. | `#save` | | Кнопка отмены | Возвращает на предыдущую страницу или перезагружает текущую. | `#cancel` | | Изображение профиля | Шейп с аватаром пользователя по умолчанию; в него подставляется загруженный аватар. | `.profile-image` | | Кнопки аватара | Загрузка нового изображения профиля (`#upload`) и удаление (`#delete`). | `#upload`, `#delete` | | Данные профиля | Текстовые элементы для синхронизации имени, email и телефона. | `.profile-name`, `.profile-login`, `.profile-phone` | \* — обязательные элементы **История заказов и покупок** | Элемент | Описание | Класс/ссылка | | --------------------- | ------------------------------------------------------------------------ | ------------------------------ | | Блок истории* | Zero-блок страницы заказов (`.uc-orders`) или покупок (`.uc-purchased`). | `.uc-orders` / `.uc-purchased` | | Контейнер для вывода* | Шейп внутри блока, в который подгружается история. | `.container` | \* — обязательные элементы **Страница курсов** | Элемент | Описание | Класс/ссылка | | ------------------------- | -------------------------------------------------------------------------- | ------------------- | | Блок с карточками курсов* | Zero-блок с одним рядом карточек-шаблонов. | `.uc-courses` | | Шаблон карточки курса* | Содержимое карточки, объединённое в группу типа Object. | `.course`, `#card` | | Название курса | Текстовый элемент внутри карточки, в который подставляется название курса. | `.course-title` | | Блок пустого состояния | Zero-блок, который показывается, если у пользователя нет доступных курсов. | `.uc-courses-empty` | \* — обязательные элементы **Кнопка выхода** | Элемент | Описание | Класс/ссылка | | -------------------------- | -------------------------------------------------------------------- | ------------ | | Кнопка выхода из аккаунта* | Элемент (кнопка или ссылка), по нажатию на который происходит выход. | `#logout` | \* — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой личного кабинета. Подгружаются асинхронно как функции объекта `members`: загрузчик сам подключает нужный подмодуль при первом вызове. | Функция | Описание | Триггер | | ------------------------------------- | ----------------------------------------------------- | ---------------------------- | | members.login(selector, params) | Инициализирует кастомную форму входа в аккаунт | DOM Content Loaded | | members.signup(selector, params) | Инициализирует кастомную форму регистрации | DOM Content Loaded | | members.recover(selector, params) | Инициализирует своё окно восстановления пароля | DOM Content Loaded | | members.profile(selector, params) | Инициализирует кастомную страницу профиля | DOM Content Loaded | | members.password(selector, params) | Инициализирует страницу смены пароля | DOM Content Loaded | | members.loadcontent(selector, params) | Загружает данные профиля в указанный блок | Tilda Members Authentication | | members.orders(selector, params) | Инициализирует историю заказов в блоке | DOM Content Loaded | | members.purchased(selector, params) | Инициализирует историю покупок в блоке | DOM Content Loaded | | members.courses(selector, params) | Инициализирует функционал курсов в Zero-блоке | DOM Content Loaded | | members.logout(params) | Инициализирует свою кнопку выхода из личного кабинета | DOM Content Loaded | | members.hideuserbar() | Скрывает стандартную иконку профиля личного кабинета | DOM Content Loaded | В качестве аргументов для страниц авторизации (`login`, `signup`, `recover`) передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока с формой авторизации/регистрации/восстановления | string | - | | params.submit | Ссылка для кнопок отправки форм | string | '#submit' | | params.close | Ссылка для кнопок закрытия поп-апа | string | '#close' | | params.success | Класс блока с окном успешной регистрации | string | selector + '-success' | | params.redirect | Ссылка для редиректа после успешной авторизации | string | - | | params.animation | Анимация появления поп-апа | string | 'fade' | | params.transition | Скорость анимации и переходов | number | 300 | | params.easing | Тип переходов для анимации | string | 'ease-in-out' | | params.style | Пользовательские стили | object | {} | | params.style.errorbox.backgroundColor | Цвет фона для сообщений об ошибках | string | '#FF0000' | | params.style.errorbox.borderColor | Цвет бордера для сообщений об ошибках | string | '#FF0000' | | params.style.errorbox.borderWidth | Толщина бордера для сообщений об ошибках | number | 0 | | params.style.errorbox.borderRadius | Скругление углов для сообщений об ошибках | number | 0 | | params.style.errorbox.color | Цвет текста для сообщений об ошибках | string | '#FFFFFF' | | params.style.errorbox.fontSize | Размер текста для сообщений об ошибках | number | 14 | | params.style.errorbox.fontWeight | Толщина текста для сообщений об ошибках | string | 'Regular' | | params.style.fade.backgroundColor | Цвет затемнения всплывающего окна | string | '#000000' | | params.style.fade.opacity | Непрозрачность затемнения всплывающего окна | number | 0.5 | | params.style.fade.blur | Размытие фона всплывающего окна | number | 0 | | params.style.progressbar.height | Высота прогрессбара загрузки | number | 0 | | params.style.progressbar.color | Цвет прогрессбара загрузки | string | '#FFFFFF' | | params.style.skeleton.backgroundColor | Цвет скелета элементов при загрузке | string | '#F0F0F0' | | params.style.password.show | Ссылка для иконки показа пароля | string | - | | params.style.password.hide | Ссылка для иконки скрытия пароля | string | - | | params.style.password.size | Размер иконки показа/скрытия пароля | number | 14 | Для страницы профиля (`profile`) и смены пароля (`password`): | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока со страницей профиля | string | - | | params.save | Ссылка кнопки, по которой сохранить изменения | string | '#save' | | params.cancel | Ссылка кнопки, по которой отменить редактирование | string | '#cancel' | | params.uploadimg | Ссылка кнопки для загрузки изображения профиля | string | '#upload' | | params.deleteimg | Ссылка кнопки для удаления аватара | string | '#delete' | | params.transition | Скорость анимации и переходов | number | 300 | | params.easing | Тип переходов для анимации | string | 'ease-in-out' | | params.style | Пользовательские стили | object | {} | | params.style.errorbox.* | Стили сообщений об ошибках (см. таблицу выше) | object | — | | params.style.skeleton.backgroundColor | Цвет скелета элементов при загрузке | string | '#F0F0F0' | | params.style.password.show | Ссылка для иконки показа пароля | string | - | | params.style.password.hide | Ссылка для иконки скрытия пароля | string | - | | params.style.password.size | Размер иконки показа/скрытия пароля | number | 14 | Для истории заказов и покупок (`orders`, `purchased`): | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока с историей заказов/покупок | string | - | | params.container | Класс контейнера для загрузки истории | string | '.container' | | params.style.skeleton.backgroundColor | Цвет скелета элементов при загрузке | string | '#F0F0F0' | Для страницы курсов (`courses`): | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | selector | Класс блока курсов | string | - | | params.empty | Класс пустого состояния | string | selector + '-empty' | | params.course | Класс шаблона карточки курса | string | '.course' | | params.coursetitle | Класс текстового элемента с названием курса | string | '.course-title' | | params.style.skeleton.backgroundColor | Цвет скелета элементов при загрузке | string | '#F0F0F0' | Для кнопки выхода (`logout`): | Параметр | Описание | Тип | Значение по-умолчанию | | --- | --- | --- | --- | | params.logout | Ссылка для кнопок выхода из личного кабинета | string | '#logout' | | params.reload | Перезагружать страницу после выхода | boolean | true | ### Инициализация Код инициализации каждой страницы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить вручную. В исходном виде он выглядит так (на примере страницы входа): ```html <!--members.js Личный кабинет в Zero-блоке. https://postnikovmd.com/mods/members--> members.login(".uc-sign") ``` ## Примеры использования ### Кастомная страница входа Создаётся отдельная страница со ссылкой `members/login`, на ней — Zero-блок с формой и классом `.uc-sign`. В форму добавляются поля `login` (Email) и `password`, стандартная кнопка скрывается, добавляется своя со ссылкой `#submit`. В коде инициализации указывается класс блока: ```html members.login(".uc-sign") ``` Пример: [Страница входа в личный кабинет](https://postnikovmd.com/mods/members/sign) ### Страница профиля с синхронизацией данных В блоке `.uc-profile` собирается форма с полями `name`, `login`, `phone`, `language`, шейпом аватара `.profile-image` и кнопкой `#save`. Модификация подгружает в них данные пользователя и сохраняет изменения по кнопке: ```html members.profile(".uc-profile") ``` Пример: [Страница профиля в Zero-блоке](https://postnikovmd.com/mods/members/profile) ### Стартовая страница со списком курсов В Zero-блоке `.uc-courses` создаётся ряд карточек-шаблонов: каждая — группа Object с классом `.course` и ссылкой `#card`, название внутри — `.course-title`. Модификация клонирует карточки по числу курсов пользователя: ```html members.courses(".uc-courses") ``` Пример: [Личный кабинет в Zero-блоке](https://postnikovmd.com/mods/members/example) ## Распространенные проблемы ### Регистрация или вход не срабатывает Для работы форм названия и типы полей должны точно совпадать с ожидаемыми: `login` (тип Email), `password`, `name`. Частая ошибка — назвать поле почты `email` вместо `login`: возникает конфликт имени переменной, и данные не уходят. Если при регистрации используются ссылки на группы доступа, проверьте их формат — ссылка должна вести на `/members/signup/group/…`. Чтобы увидеть, какое именно поле не найдено или заполнено неверно, добавьте к ссылке `?showerrors`. ### Личный кабинет грузит метрику на каждой странице Страница входа предзагружается в скрытом iframe, и если на ней стоят счётчики аналитики, они срабатывают вместе с предзагрузкой. Если это мешает статистике, счётчик можно отключить отдельным скриптом в `` страницы входа: ```html window['disableYaCounterXXXXXXXX']=true ``` ### Если модификация все равно не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Каталог товаров в Zero-блоке Позволяет вывести карточки товаров из каталога Тильды в Zero-блок с абсолютно любой вёрсткой и внешним видом. > Время настройки: 15 минут ## Как работает модификация ### Общие механики В основе модуля лежит общий принцип: данные о товарах берутся из стандартного каталога Тильды через её API, а Zero-вёрстка блока используется только как шаблон оформления. Модификация находит в блоке размеченные элементы, берёт их расположение и размеры как образец, при необходимости клонирует карточку под нужное число товаров и подставляет в элементы реальные значения из каталога. За счёт этого внешний вид полностью определяется вёрсткой блока и не зависит от стандартного дизайна магазина Тильды. Пока данные подгружаются из каталога, на месте контента показываются скелетоны — заглушки в форме элементов, которые сменяются реальными значениями после загрузки. Размеры блока и сетки карточек пересчитываются автоматически, в том числе при изменении размера окна. Модуль не заменяет стандартный магазин Тильды, а работает поверх него: за корзину, избранное и оформление заказа по-прежнему отвечают штатные блоки ST100 (корзина) и ST110 (избранное), а функции модуля синхронизируются с ними. ### Каталог товаров Каталог выводит товары выбранного раздела Тильды в Zero-блок, оформляя их собственными карточками. Карточка верстается один раз как шаблон, а модификация запрашивает товары раздела через API Тильды и размножает шаблон по их количеству, подставляя в каждую карточку реальные данные — название, цену, изображение, остаток. Если в разделе нет товаров или поиск ничего не нашёл, вместо каталога показывается отдельный блок пустого состояния. Каталог дополняется тремя независимыми блоками — пагинацией, разделами и поиском: - **Пагинация** появляется, когда товаров больше, чем помещается на одной странице (`params.perpage`, по умолчанию 12), и подгружает следующую порцию товаров без перезагрузки страницы. Внешний вид страниц и стрелок берётся из кнопок-шаблонов в самом блоке. - **Разделы** фильтруют каталог по категориям: переключение раздела заново запрашивает товары и перерисовывает карточки. Раздел определяется по тексту кнопки (он должен совпадать с названием в каталоге) или по заданному номеру. - **Поиск** ищет товары по введённому запросу в пределах текущего раздела и так же перерисовывает выдачу. Чтобы результат фильтрации или поиска можно было открыть по прямой ссылке, текущий раздел и запрос сохраняются в адресной строке (`params.urlparams`). Подробнее: [Каталог товаров в Zero-блоке](https://postnikovmd.com/mods/store) ### Определение раздела каталога Раздел каталога, из которого выводятся товары, задаётся параметром `params.storepart` — это внутренний идентификатор раздела в Тильде. Он нужен каталогу, карточке товара и похожим товарам. Определить его можно двумя способами. В генераторе кода есть возможность автоматически определить номер раздела по ссылке на опубликованную страницу. Для этого на временную страницу необходимо добавить блок каталога ST300, выбрать нужный раздел, опубликовать страницу и вставить ссылку на неё в генератор кода. После нажатия на кнопку 🔄, номер раздела автоматически подтянется в код. Если на странице нет блока каталога или она недоступна, генератор сообщит об этом в диалоговом окне. Автоопределение ограничено по частоте обращений (до 5 запросов в час). Номер раздела также можно получить вручную, если нужен конкретный раздел (для раздела «Все товары» способ не подходит): в проекте по пути «Товары → выбранный раздел» адрес страницы имеет вид `https://store.tilda.ru/store/?projectid=0000000&storepartuid=000000000000`, где значение после `storepartuid=` и есть нужный идентификатор. ### Карточка товара Карточка товара заменяет стандартную страницу `/tproduct/` собственной вёрсткой. Модификация определяет, какой товар показывать, по его идентификатору и подставляет данные из каталога в размеченные элементы блока — название, описание, артикул, цену, остаток, изображение или галерею. На стандартной странице товара идентификатор определяется автоматически из адреса; для отдельной страницы его задают вручную (номер берётся в проекте по пути «Настройки товаров → Товар → Product ID»). Кроме основных данных карточка показывает опции и характеристики товара. Опции — это варианты по свойствам (цвет, размер и т.д.): модификация подставляет в их элементы реальные значения из каталога, а если у товара нет какого-то свойства, его опции скрываются. Характеристики устроены так же, как карточки каталога: пара «название — значение» верстается как шаблон и размножается под количество характеристик товара. Хлебные крошки выводятся отдельным блоком и заполняются уровнями навигации товара, начиная с последних: если уровней больше, чем кнопок, показываются ближайшие к товару. Их можно отрисовать вместе с карточкой или независимо от неё. Подробнее: [Карточка товара в Zero-блоке](https://postnikovmd.com/mods/store/product) ### Похожие товары Похожие товары работают по той же механике, что и каталог: карточки-шаблоны размножаются под данные из каталога Тильды. Разница в подборе — модификация берёт не весь раздел, а товары из категории текущего товара, поэтому блок обычно ставят на странице товара. Если подходящих товаров меньше, чем карточек в блоке, лишние скрываются. Подробнее: [Похожие товары в Zero-блоке](https://postnikovmd.com/mods/store/relevants) ### Корзина, избранное и ограничение оплаты Иконки корзины и избранного работают поверх штатных блоков Тильды — ST100 (корзина) и ST110 (избранное): их стандартные иконки скрываются, а вместо них в любом Zero-блоке размещается своя кнопка со счётчиком. Счётчик берёт актуальное количество товаров из этих блоков и обновляется при каждом изменении корзины или избранного; для корзины можно вывести и общую сумму заказа. За счёт связи со штатными блоками вся логика заказа остаётся на стороне Тильды, а оформление полностью своё. Ограничение оплаты не требует вёрстки: модификация выбирает в корзине нужную платёжную систему по её идентификатору и скрывает остальные варианты от покупателя. Подробнее: [Иконка корзины и избранного в Zero-блоке](https://postnikovmd.com/mods/store/cart) ### Особенности SEO Интернет-магазин в Zero-блоке работает по той же механике, что и стандартный каталог Тильды, и, как следствие, индексируется точно так же. Карточки каталога и похожих товаров подставляются скриптом после ответа API магазина, поэтому в исходном коде страницы их нет, и поисковики сами решают, как индексировать контент: после рендеринга JavaScript или до него (чаще всего – до). Если данные каталога важно отдавать поисковику, можно включить обработку JS в [настройках вебмастера](https://webmaster.yandex.ru/site/indexing/js-render/). Для карточки товара в Zero-блоке механика немного отличается и зависит от того, где она размещена. На стандартной странице `/tproduct/` все данные товара автоматически попадают в исходный код при публикации, поэтому такая карточка индексируется полностью: модификация только синхронизирует эти данные с Zero-блоком. На любой другой странице они, как и в каталоге, подставляются скриптом и в индекс попадают по усмотрению поисковиков. Интересный нюанс: если в заглушках используются заголовки H1–H3, их текст может попасть в индекс до js-обработки и снизить качество выдачи. Поэтому в карточках их лучше не применять. ## Начало работы ### Установка библиотеки Для работы магазина необходимо подключить библиотеку модификаций в `` сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции. ```html ``` Если карточка товара или похожие товары размещаются на стандартной странице товара (URL `/tproduct/...`), перед кодом инициализации дополнительно подключается скрипт магазина: ```html ``` Дальнейшая настройка производится по инструкции к каждому из вариантов: - [Каталог товаров в Zero-блоке](https://postnikovmd.com/mods/store) - [Карточка товара в Zero-блоке](https://postnikovmd.com/mods/store/product) - [Похожие товары в Zero-блоке](https://postnikovmd.com/mods/store/relevants) - [Иконка корзины в Zero-блоке](https://postnikovmd.com/mods/store/cart) - [Иконка избранного в Zero-блоке](https://postnikovmd.com/mods/store/cart/wishlist) - [Ограничение способов оплаты в корзине](https://postnikovmd.com/mods/store/cart/paysystem) ### Инструкция по установке #### Каталог 1. Скопируйте код ниже и вставьте его внутрь `` в настройках сайта Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг. ``` ``` 2. Создайте Zero-блок с одним рядом карточек товаров В одном ряду может быть любое количество карточек. Модификация будет использовать их расположение и размеры как шаблон и автоматически клонировать карточки для каждого товара из каталога. 3. Задайте блоку с карточками товаров класс `.uc-store` 4. Объедините содержимое каждой карточки в группу с типом `Object` Внутри карточки может быть любое количество элементов. Карточки рекомендуется верстать через автолэйаут — это позволит им динамически подстраивать размеры под контент, подгружаемый из каталога. 5. Присвойте получившимся группам класс `.product` и ссылку `#product` 6. Задайте элементам в карточках соответствующие классы и ссылки: Все элементы опциональны — можно добавить только те, которые нужны в вашем дизайне: - .product-title — название товара - .product-descr — короткое текстовое описание товара - .product-image — изображение товара (Image или Gallery). Для галереи с одним изображением стрелки и точки пагинации скрываются автоматически. - .product-price — цена - .product-priceold — старая цена. Скрывается автоматически, если не задана в карточке товара в каталоге - .product-discount — скидка в процентах. Можно задать значение в определенном формате (например, -20%). Скрывается автоматически, если отсутствует старая цена - .product-quantity — количество товаров на складе (остаток) - .product-tag — метка/тег товара. Скрывается автоматически, если не задана в каталоге - .product-option — опции товара (цвет, размер и др.). Чтобы привязать опцию к определенному свойству в каталоге, задайте ей атрибут data-option="Имя", где имя будет соответствовать названию свойства в каталоге. В карточке может быть несколько элементов с одинаковым классом и атрибутом — при отсутствии в каталоге они скроются автоматически - .product-like — кнопка добавления товара в избранное. Работает при наличии на странице блока ST110 («Избранное») 7. Задайте в настройках каталога шапку и подвал для товаров и включите опцию «Открывать страницу вместо попапа» Каталог работает только с карточками, которые открываются на отдельных страницах. В дальнейшем их можно кастомизировать через Zero-блок с помощью отдельной модификации. #### Пагинация 8. Создайте Zero-блок с пагинацией и присвойте ему класс `.uc-store-pagination` Блок будет отображаться, если общее количество товаров превышает количество товаров, доступных на одной странице. 9. Добавьте в блок кнопки с номерами страниц и задайте им ссылку `#page` В качестве кнопок рекомендуется использовать элементы с типом Button. Их можно расположить в любом месте блока. Первой кнопке задайте стили активного состояния, второй — неактивного: модификация будет использовать их как шаблон для всех остальных элементов. Для того, чтобы сделать разделитель «...», добавьте между страницами ещё одну кнопку и присвойте ей класс .page-separator. 10. Добавьте в блок кнопки переключения страниц и задайте им ссылки: кнопке «вперёд» ссылку `#next`, кнопке «назад» — `#prev` 11. Объедините получившиеся элементы в группу с типом `Object` и автолэйаутом #### Разделы 12. Создайте Zero-блок с разделами и присвойте ему класс `.uc-store-tabs` 13. Добавьте кнопку для раздела «Все» и задайте ей ссылку `#tab-all` 14. Добавьте кнопки остальных разделов и задайте им ссылку `#tab` Текст кнопок должен совпадать с реальным названием раздела в каталоге. Если вы хотите его изменить, используйте для привязки кнопок атрибут data-storepart="0000", где вместо 0000 укажите номер раздела из каталога. #### Поиск 15. Добавьте форму с поиском в блок с разделами каталога (`.uc-store-tabs`) Если разделов на странице нет или поиск нужно разместить отдельно, создайте для формы отдельный Zero-блок и задайте ему класс .uc-store-search. 16. Добавьте в форму поле с типом One line input field и названием переменной search 17. Добавьте в блок кнопки управления поиском и задайте им ссылки: кнопке «найти» ссылку `#search`, кнопке сброса — `#search-reset` #### Пустое состояние 18. Создайте Zero-блок для пустого состояния и присвойте ему класс `.uc-store-empty` Блок будет отображаться автоматически, когда в каталоге нет товаров или поиск по нему не нашёл результатов. По умолчанию он скрыт. 19. Оформите блок по своему усмотрению При необходимости добавьте кнопку сброса поиска и задайте ей ссылку #search-reset. 20. Задайте в настройках модификации параметры, стили и поведение каталога 21. Скопируйте код и вставьте его в блок `T123` в конец страницы ### Элементы Ниже приведены элементы, из которых состоят страницы магазина. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от собираемой страницы. **Каталог товаров** | Элемент | Описание | Класс/ссылка | | ----------------------- | ------------------------------------------------------------------------------------------------ | -------------------------- | | Блок каталога* | Zero-блок с одним рядом карточек-шаблонов. Модификация клонирует карточки под товары из каталога | `.uc-store` | | Карточка товара* | Содержимое карточки, объединённое в группу типа Object. Рекомендуется верстать через автолэйаут | `.product`, `#product` | | Изображение товара | Image или Gallery. Для галереи с одним изображением стрелки и точки скрываются автоматически | `.product-image` | | Название | Название товара | `.product-title` | | Описание | Короткое описание товара | `.product-descr` | | Цена | Цена товара | `.product-price` | | Старая цена | Скрывается автоматически, если не задана | `.product-priceold` | | Скидка | Скидка в процентах. Можно задать в нужном формате (например, −20%). Скрывается без старой цены | `.product-discount` | | Остаток на складе | Количество товаров на складе | `.product-quantity` | | Метка/тег | Скрывается автоматически, если не задана в каталоге | `.product-tag` | | Опция товара | Опции (цвет, размер и др.). Привязываются к свойству каталога через атрибут [data-option] | `.product-option` | | Кнопка избранного | Работает при наличии на странице блока ST110 | `.product-like` | | Кнопка «В корзину» | Работает при наличии на странице блока ST100 | `#order` | | Блок пагинации | Отображается, если товаров больше, чем помещается на странице | `.uc-store-pagination` | | Номер страницы | Кнопка с номером страницы | `#page` | | Разделитель | Кнопка-разделитель «…» между страницами | `.page-separator` | | Кнопки «Назад»/«Вперёд» | Переключение страниц пагинации | `#prev`, `#next` | | Блок разделов | Кнопки фильтрации каталога по категориям | `.uc-store-tabs` | | Кнопка «Все» | Сбрасывает фильтр по разделам | `#tab-all` | | Кнопка раздела | Текст должен совпадать с названием раздела или быть задан через [data-storepart] | `#tab` | | Блок поиска | Отдельный блок поиска (если поиск не в блоке разделов) | `.uc-store-search` | | Поле поиска | Поле формы с именем переменной search | `search` | | Кнопки поиска | Запуск поиска и сброс | `#search`, `#search-reset` | | Блок пустого состояния | Показывается, когда товаров нет или поиск ничего не нашёл | `.uc-store-empty` | — обязательные элементы **Карточка товара** | Элемент | Описание | Класс/ссылка | | --------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------- | | Блок карточки товара* | Zero-блок с карточкой. Для автоподстройки высоты — автолэйаут (Display: Flex) | `.uc-product` | | Изображение товара | Image или Gallery (для галереи подгружаются все фото товара) | `.product-image` | | Название | Название товара | `.product-title` | | Короткое описание | Поле «Описание» товара | `.product-descr` | | Полное описание | Поле «Текст» товара | `.product-text` | | Артикул | Артикул товара | `.product-sku` | | Цена / старая цена / скидка | Старая цена и скидка скрываются, если скидка не задана | `.product-price`, `.product-priceold`, `.product-discount` | | Остаток на складе | Количество товаров на складе | `.product-quantity` | | Метка/тег | Скрывается автоматически, если не задана | `.product-tag` | | Кнопка избранного | Работает при наличии блока ST110 | `.product-like` | | Кнопка «В корзину» | Работает при наличии блока ST100 | `#order` | | Группа опций | Объединяет опции одного свойства. Скрывается, если у товара нет доступных значений | `.product-option-group` | | Название опции | Текст с названием свойства (например, «Цвет») | `.product-option-title` | | Опция | Button/Shape/Form. Привязывается к свойству через атрибут [data-option] | `.product-option` | | Группа характеристик | Скрывается целиком, если у товара нет характеристик | `.product-chars-group` | | Характеристика | Пара «название — значение», клонируется под доступные характеристики | `.product-char`, `.product-char-value` | | Блок хлебных крошек | Отдельный Zero-блок с навигацией по разделам | `.uc-product-header` | | Уровень навигации | Кнопка уровня. Заполняется с последних уровней | `#breadcrumb` | | Кнопка «Назад» | Возврат на предыдущую страницу или по заданной ссылке | `#return` | — обязательные элементы **Похожие товары** | Элемент | Описание | Класс/ссылка | | --------------------- | ----------------------------------------------------------------------------------------- | ---------------------- | | Блок похожих товаров* | Zero-блок с карточками-шаблонами | `.uc-relevants` | | Карточка товара* | Группа типа Object с содержимым карточки | `.product`, `#product` | | Элементы карточки | Размечаются так же, как в каталоге (.product-image, .product-title, .product-price и др.) | `.product-`* | — обязательные элементы **Иконки корзины и избранного** | Элемент | Описание | Класс/ссылка | | --------------------------- | ---------------------------------------------------------------- | ------------------- | | Иконка открытия корзины* | Кнопка/шейп/группа с любым внешним видом. Требует блок ST100 | `#cart` | | Счётчик товаров в корзине | Подставляется актуальное количество товаров | `.cart-counter` | | Сумма заказа | Общая стоимость товаров в корзине. При пустой корзине скрывается | `.cart-total` | | Иконка открытия избранного* | Кнопка/шейп/группа. Требует блок ST110 | `#wishlist` | | Счётчик товаров в избранном | Подставляется актуальное количество товаров | `.wishlist-counter` | — обязательные элементы ### Функции и параметры Методы, с помощью которых можно управлять работой магазина. Подгружаются асинхронно как функции объекта `store`: загрузчик сам подключает нужный подмодуль при первом вызове. | Функция | Описание | Триггер | | ----------------------------------- | ----------------------------------------------------- | ---------------------------------------- | | store.init(selector, params) | Инициализирует каталог товаров в Zero-блоке | DOM Content Loaded, Window Resize | | store.product(selector, params) | Инициализирует карточку товара в Zero-блоке | DOM Content Loaded | | store.breadcrumbs(selector, params) | Инициализирует хлебные крошки для товара | DOM Content Loaded; store.product() Init | | store.relevants(selector, params) | Инициализирует похожие товары в Zero-блоке | DOM Content Loaded | | store.cart(selector, params) | Инициализирует иконку корзины со счётчиком | DOM Content Loaded | | store.wishlist(selector, params) | Инициализирует иконку избранного со счётчиком | DOM Content Loaded | | store.paysystem(paysystem) | Выбирает способ оплаты в корзине и скрывает остальные | DOM Content Loaded | В качестве аргументов для каталога (`init`) передаются следующие параметры: | Параметр | Описание | Тип | Значение по-умолчанию | | ---------------------------------------------- | ---------------------------------------------------------------- | ------- | ------------------------ | | selector | Класс блока каталога | string | - | | params.storepart | Идентификатор раздела каталога в Тильде | string | - | | params.card | Класс карточки товара | string | '.product' | | params.title | Класс названия товара | string | '.product-title' | | params.descr | Класс короткого описания товара | string | '.product-descr' | | params.price | Класс цены | string | '.product-price' | | params.priceold | Класс старой цены | string | '.product-priceold' | | params.discount | Класс скидки | string | '.product-discount' | | params.quantity | Класс остатка на складе | string | '.product-quantity' | | params.image | Класс изображения товара | string | '.product-image' | | params.tag | Класс метки/тега товара | string | '.product-tag' | | params.option | Класс опций товара | string | '.product-option' | | params.like | Класс кнопки избранного | string | '.product-like' | | params.link | Ссылка для перехода в карточку товара | string | '#product' | | params.order | Ссылка кнопки «В корзину» | string | '#order' | | params.empty | Класс блока пустого состояния | string | selector + '-empty' | | params.productsperpage | Количество товаров на странице | number | 12 | | params.scrolltotop | Прокручивать страницу к началу при переключении разделов/страниц | boolean | true | | params.urlparams | Сохранять состояние разделов и поиска в URL | boolean | true | | params.currency.placeholder | Символ валюты | string | 'руб.' | | params.currency.separator | Разделитель между ценой и валютой | string | ' ' | | params.currency.side | Расположение валюты ('left' / 'right') | string | 'right' | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.pagination.selector | Класс блока пагинации | string | selector + '-pagination' | | params.pagination.page | Ссылка номеров страниц | string | '#page' | | params.pagination.prev | Ссылка кнопки «Назад» | string | '#prev' | | params.pagination.next | Ссылка кнопки «Вперёд» | string | '#next' | | params.pagination.separator | Класс разделителя страниц | string | '.page-separator' | | params.gallery | Поведение изображений в галереях при наведении | string | - | | params.tabs.selector | Класс блока разделов | string | selector + '-tabs' | | params.tabs.tab | Ссылка кнопок разделов | string | '#tab' | | params.tabs.all | Ссылка кнопки «Все» | string | '#tab-all' | | params.search.selector | Класс блока поиска | string | selector + '-search' | | params.search.input | Имя поля поиска | string | 'search' | | params.search.button | Ссылка кнопки поиска | string | '#search' | | params.search.reset | Ссылка кнопки сброса поиска | string | '#search-reset' | | params.style.skeleton.backgroundColor | Цвет скелетона при загрузке | string | '#F3F3F3' | | params.style.favorite.backgroundColor | Цвет фона кнопки избранного в активном состоянии | string | - | | params.style.favorite.borderColor | Цвет бордера кнопки избранного в активном состоянии | string | - | | params.style.favorite.backgroundImage | Иконка кнопки избранного в активном состоянии | string | - | | params.style.tabs.active.backgroundColor | Цвет фона активного раздела | string | - | | params.style.tabs.active.borderColor | Цвет бордера активного раздела | string | - | | params.style.tabs.active.color | Цвет текста активного раздела | string | - | | params.style.tabs.inactive.opacity | Непрозрачность неактивных разделов | number | - | | params.style.pagination.active.backgroundColor | Цвет фона активной страницы | string | - | | params.style.pagination.active.backgroundImage | Изображение активной страницы | string | - | | params.style.pagination.active.borderColor | Цвет бордера активной страницы | string | - | | params.style.pagination.active.opacity | Непрозрачность активной страницы | number | - | | params.style.pagination.inactive.opacity | Непрозрачность неактивных страниц | number | - | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | Для карточки товара (`product`) и хлебных крошек (`breadcrumbs`): | Параметр | Описание | Тип | Значение по-умолчанию | | ------------------------------------- | ---------------------------------------------------------------------- | ------- | --------------------- | | selector | Класс блока карточки товара | string | - | | params.storepart | Идентификатор раздела каталога в Тильде | string | - | | params.productuid | Идентификатор товара. Определяется автоматически из URL, если не задан | string | - | | params.title | Класс названия товара | string | '.product-title' | | params.descr | Класс короткого описания | string | '.product-descr' | | params.text | Класс полного описания | string | '.product-text' | | params.sku | Класс артикула | string | '.product-sku' | | params.price | Класс цены | string | '.product-price' | | params.priceold | Класс старой цены | string | '.product-priceold' | | params.discount | Класс скидки | string | '.product-discount' | | params.quantity | Класс остатка на складе | string | '.product-quantity' | | params.image | Класс изображения товара | string | '.product-image' | | params.tag | Класс метки/тега | string | '.product-tag' | | params.option | Класс опций товара | string | '.product-option' | | params.char | Класс названия характеристики | string | '.product-char' | | params.charvalue | Класс значения характеристики | string | '.product-char-value' | | params.like | Класс кнопки избранного | string | '.product-like' | | params.order | Ссылка для кнопки «В корзину» | string | '#order' | | params.autoheight | Подстраивать высоту блока под содержимое | boolean | true | | params.currency.placeholder | Символ валюты | string | 'руб.' | | params.currency.separator | Разделитель между ценой и валютой | string | ' ' | | params.currency.side | Расположение валюты ('left' / 'right') | string | 'right' | | params.breadcrumbs.breadcrumb | Ссылка для уровней хлебных крошек | string | '#breadcrumb' | | params.breadcrumbs.back | Ссылка для кнопки «Назад» | string | '#return' | | params.breadcrumbs.root | Название корневого раздела для хлебных крошек | string | 'Все категории' | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.style.skeleton.backgroundColor | Цвет скелетона при загрузке | string | '#F3F3F3' | | params.style.favorite.backgroundColor | Цвет фона кнопки избранного в активном состоянии | string | - | | params.style.favorite.borderColor | Цвет бордера кнопки избранного в активном состоянии | string | - | | params.style.favorite.backgroundImage | Иконка кнопки избранного в активном состоянии | string | - | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | Для похожих товаров (`relevants`): | Параметр | Описание | Тип | Значение по-умолчанию | | ------------------------------------- | ------------------------------------------------------------------------------- | ------ | --------------------- | | selector | Класс блока похожих товаров | string | - | | params.storepart | Идентификатор раздела каталога в Тильде | string | - | | params.productuid | Идентификатор текущего товара. Определяется автоматически из URL, если не задан | string | - | | params.card | Класс карточки товара | string | '.product' | | params.title | Класс названия товара | string | '.product-title' | | params.descr | Класс описания товара | string | '.product-descr' | | params.price | Класс цены | string | '.product-price' | | params.priceold | Класс старой цены | string | '.product-priceold' | | params.discount | Класс скидки | string | '.product-discount' | | params.quantity | Класс остатка на складе | string | '.product-quantity' | | params.image | Класс изображения товара | string | '.product-image' | | params.tag | Класс метки/тега товара | string | '.product-tag' | | params.like | Класс кнопки избранного | string | '.product-like' | | params.link | Ссылка для перехода в карточку товара | string | '#product' | | params.order | Ссылка кнопки «В корзину» | string | '#order' | | params.currency.placeholder | Символ валюты | string | 'руб.' | | params.currency.separator | Разделитель между ценой и валютой | string | ' ' | | params.currency.side | Расположение валюты ('left' / 'right') | string | 'right' | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.style.skeleton.backgroundColor | Цвет скелетона при загрузке | string | '#F3F3F3' | | params.style.favorite.backgroundColor | Цвет фона кнопки избранного в активном состоянии | string | - | | params.style.favorite.borderColor | Цвет бордера кнопки избранного в активном состоянии | string | - | | params.style.favorite.backgroundImage | Иконка кнопки избранного в активном состоянии | string | - | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | Для иконки корзины (`cart`): | Параметр | Описание | Тип | Значение по-умолчанию | | --------------------------- | ----------------------------------------------- | ------- | --------------------- | | selector | Ссылка для кнопки открытия корзины | string | - | | params.counter | Класс счётчика товаров | string | '.cart-counter' | | params.total | Класс элемента с суммой заказа | string | '.cart-total' | | params.hidecounter | Скрывать счётчик при нулевом значении | boolean | false | | params.hidetotal | Скрывать сумму при пустой корзине | boolean | true | | params.currency.placeholder | Символ валюты | string | 'руб.' | | params.currency.separator | Разделитель между суммой и валютой | string | ' ' | | params.currency.side | Расположение валюты ('left' / 'right') | string | 'right' | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | Для иконки избранного (`wishlist`): | Параметр | Описание | Тип | Значение по-умолчанию | | ----------------------------------- | ----------------------------------------------- | ------- | --------------------- | | selector | Ссылка для кнопки открытия избранного | string | - | | params.counter | Класс счётчика товаров | string | '.wishlist-counter' | | params.hidecounter | Скрывать счётчик при нулевом значении | boolean | false | | params.transition | Скорость переходов | number | 300 | | params.easing | Тип анимации переходов | string | 'ease-in-out' | | params.style.active.backgroundColor | Цвет фона в активном состоянии | string | - | | params.style.active.backgroundImage | Изображение в активном состоянии | string | - | | params.style.active.borderColor | Цвет бордера в активном состоянии | string | - | | params.event | Событие, после которого запускается модификация | string | - | | params.timeout | Задержка после срабатывания события | number | - | Для ограничения оплаты (`paysystem`): | Параметр | Описание | Тип | Значение по-умолчанию | | --------- | ------------------------------- | ------ | --------------------- | | paysystem | Идентификатор платёжной системы | string | - | ### События Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы: **Запустить функцию магазина по срабатыванию события** Отложить инициализацию любой функции можно с помощью параметров `event` и `timeout`. Например, запустить каталог через 100ms после срабатывания `customEvent` можно таким образом: ```js store.init(".uc-store", { storepart: "000000000000", event: "customEvent", timeout: 100 }) ``` Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: `event: "customEvent1, customEvent2, customEvent3"`. **Запустить сторонний код после отрисовки каталога** Если код нужно выполнить после того, как функция магазина полностью отработает, добавьте слушатель события её отрисовки. Имя события строится из названия функции и класса блока без префикса `uc` или `rec`: каталог — `storeinit-id`, карточка товара — `storeproduct-id`, хлебные крошки — `storebreadcrumbs-id`, похожие товары — `storerelevants-id`. Например, если у блока с каталогом класс `.uc-store`, то слушатель события добавляется следующим образом: ```js window.addEventListener("storeinit-store", function(){ ... }) ``` Функции корзины, избранного и оплаты отправляют события `storecart`, `storewishlist` и `storepaysystem` без идентификатора блока. **Запустить другую модификацию после отрисовки каталога** Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки каталога можно через событие `storeinit`: ```js tabs.init(".uc-store", { event: "storeinit-store" }) ``` ### Инициализация Код инициализации каждой страницы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить вручную. В исходном виде он выглядит так (на примере каталога): ```html <!--store.js Каталог товаров в Zero-блоке. https://postnikovmd.com/mods/store--> store.init(".uc-store", { storepart: "000000000000" }) ``` ## Примеры использования ### Каталог товаров с разделами, поиском и пагинацией В блоке `.uc-store` создаётся ряд карточек-шаблонов с классом `.product` и элементами `.product-*`; рядом — блоки `.uc-store-tabs` (разделы), `.uc-store-search` (поиск) и `.uc-store-pagination` (пагинация). В коде инициализации указывается класс блока и номер раздела каталога: ```html store.init(".uc-store", { storepart: "000000000000" }) ``` Пример: [Каталог товаров в Zero-блоке](https://postnikovmd.com/mods/store/example) ### Кастомная карточка товара В блоке `.uc-product` собираются элементы товара, опции `.product-option` с атрибутом `data-option`, характеристики и кнопка «В корзину» `#order`. Блок добавляется в подвал каталога, чтобы заменить стандартную страницу `/tproduct/`: ```html store.product(".uc-product") ``` Пример: [Карточка товара в Zero-блоке](https://postnikovmd.com/mods/store/product/example) ## Распространенные проблемы ### Если модификация не работает Добавьте параметр `?showerrors` в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой. --- # Что делать, если мод не работает В большинстве случаев причина — не баг, а неправильная установка. Проверьте проблему по шагам, прежде чем сообщать об ошибке. ## Алгоритм проверки 1. **Проверьте установку по инструкции.** Убедитесь, что все шаги инструкции выполнены корректно. Чаще всего ошибки возникают из-за опечаток в классах, пропущенных шагов или дублирующего кода в `` или блоке T123. 2. **Сверьтесь с видеоинструкцией.** Видео помогает увидеть порядок действий и нюансы, которые сложно передать текстом. 3. **Используйте режим отображения ошибок.** У модификаций есть встроенная диагностика. Добавьте параметр `?showerrors` к адресу страницы, чтобы увидеть все ошибки модов на странице и рекомендации по их исправлению. Параметр `?showparams` показывает текущие параметры модов. 4. **Проверьте консоль браузера.** Если ошибок в режиме `?showerrors` нет, посмотрите ошибки в консоли. Сообщения в ней часто указывают на место, где возникла проблема. 5. **Посмотрите документацию.** У модов есть подробные инструкции, описывающие принципы работы, варианты использования и решения распространённых ошибок. 6. **Скопируйте пример к себе.** Если предыдущие шаги не помогли, скопируйте шаблон примера к себе и разберите, как он устроен изнутри. ## Баг или нестандартная задача - **Похоже на баг** — проблема воспроизводится стабильно, структура страницы корректна, все шаги выполнены по инструкции. Оставьте заявку: https://postnikovmd.com/mods/report (бесплатно). - **Нестандартная задача** — сложная структура страницы, совмещение нескольких модов или логика, не предусмотренная по умолчанию. Доступна платная помощь с установкой: https://postnikovmd.com/mods/support/form