`. Но положение в HTML ещё не доказывает масштабирование. Решающий вопрос — получает ли запись попапа `t-record_scaled` после публикации и открытия. Этот класс может зависеть от настроек конкретной записи, момента инициализации и сценария чужой модификации. [MOD-181](/mods/mod-181) не пытается чинить этот неизвестный участок: он работает только с внутренним контейнером, который дизайнер отметил своим классом, и не меняет масштаб самой записи. ## Безопасная проверка на опубликованной странице Откройте попап, затем вставьте в консоль браузера: ```js const popup = document.querySelector('.t-popup_show, .t-popup'); const record = popup?.closest('[id^="rec"]'); console.log({ record: record?.id, scaled: record?.classList.contains('t-record_scaled'), zoom: record ? getComputedStyle(record).zoom : null, excluded: record?.getAttribute('data-scale-off'), }); ``` Проверка только читает страницу. Сделайте тот же замер для обычной записи, которая выглядит правильно. Получатся четыре полезных сценария: | Обычная запись | Попап | Что проверять дальше | | --- | --- | --- | | есть класс и zoom | нет класса | почему запись попапа не включена в Autoscale | | есть класс и zoom | класс есть, zoom другой | момент пересчёта и собственные отступы | | обе одинаковы | попап всё равно мелкий | внутренний контейнер или второй масштаб чужого мода | | класса нет нигде | страница кажется крупнее | это не родной Autoscale или замерен не тот блок | ## Почему второй масштаб — плохая заплатка `transform: scale()` может визуально увеличить прямоугольник, но не становится частью контракта Autoscale. У него своя точка трансформации, а размеры раскладки и видимый результат начинают расходиться. Особенно неприятны последствия внутри попапа: - крестик закрытия визуально и фактически оказывается в разных местах; - появляется лишняя прокрутка или обрезание; - фиксированная колонка перестаёт вести себя как фиксированная; - повторное открытие получает второй масштаб; - на другом брейкпоинте коэффициенты перемножаются. Слой попапа — отдельный вопрос. Если окно не мелкое, а находится под корзиной, это диагностируется через контексты наложения, а не через масштаб. Для него есть отдельный разбор [про попап и z-index](/articles/popap-pod-korzinoy-tilda-z-index). ## Что передать разработчику Снимите четыре значения при открытом окне: id записи, наличие `t-record_scaled`, вычисленный `zoom` и `data-scale-off`. Добавьте ширину окна и уточните, работает ли тот же попап без стороннего Autoscale. Этого достаточно, чтобы отличить недостающий класс от двойного масштаба и ошибки внутренней обёртки. Обещать готовое решение до такого замера нельзя: сохранённая страница доказала устройство DOM, но не доказала состояние класса у конкретного живого проекта. Частые вопросы по теме: - В: Почему нельзя просто поставить попапу transform scale? О: Вы получите второй независимый масштаб с другой точкой отсчёта. Он может изменить положение окна, область клика, прокрутку и работу фиксированных элементов, не устранив причину. - В: Попап Тильды всегда находится вне масштабируемого блока? О: Нет. На сохранённой странице магазина t-popup расположен внутри записи. Вопрос в другом: получает ли именно эта запись класс t-record_scaled на опубликованной странице. - В: Что означает data-scale-off? О: Это штатный отказ от масштабирования для отдельного элемента. Его учитывает рантайм Autoscale и может ставить сама Тильда, поэтому удалять атрибут глобальным скриптом нельзя. - В: MOD-181 уже готов к установке? О: Да, для явно размеченного внутреннего контейнера попапа. Он измеряет его содержимое и уменьшает только когда оно не помещается в окно. Причину несогласованности родного t-record_scaled всё равно нужно диагностировать отдельно. ### Функция формы работала, пока на странице не появился другой блок URL: https://modkod.ru/articles/argument-kolbeka-formy-tilda Рубрика: Не работает | Целевой запрос: «колбэк формы тильда не работает» | Опубликовано: 12 августа 2026 Верификация: именованный обработчик вызывается с jQuery(form) при наличии jQuery и с form без него, а исключение выводится в console.error (ветка eval пользовательского callback в tilda-forms-1.0.min.js) Суть и прямой ответ: Один и тот же именованный колбэк формы Тильда вызывает по-разному: если на странице доступен jQuery, аргумент оборачивается в jQuery; если библиотеки нет, передаётся обычный DOM-элемент формы. Поэтому код способен сломаться после добавления совершенно другого блока, который принёс или убрал jQuery. Безопасный обработчик сначала нормализует аргумент, а затем работает с одной формой. Содержание разбора: ## Короткий ответ Приведите аргумент к DOM-форме в первой строке и проверяйте результат. Не пишите весь обработчик под `$form.find(...)`, если не управляете загрузкой jQuery. ```js function afterLead(arg) { const form = arg instanceof HTMLFormElement ? arg : arg && arg[0]; if (!form) { console.error('afterLead: форма не найдена'); return; } const email = form.querySelector('[name="Email"]'); // Дальше работаем только с DOM API. } ``` ## Почему поломка кажется случайной Вы не меняли форму. Вы добавили слайдер, магазин или старый блок — и на странице изменился набор библиотек. В одной сборке глобальный `jQuery` есть, в другой нет. Тильда выбирает аргумент в момент вызова, поэтому старый обработчик внезапно получает другой тип. ## Как диагностировать Откройте опубликованную страницу, инструменты разработчика и вкладку Console. Запустите реальную тестовую отправку. Если своя часть не сработала, но родное сообщение об успехе появилось, ищите ошибку с именем вашей функции. Не проверяйте только так: ```js console.log(arg); ``` В консоли jQuery-объект и элемент могут выглядеть похоже. Печатайте явные признаки: ```js console.log({ isForm: arg instanceof HTMLFormElement, first: arg && arg[0], jquery: Boolean(window.jQuery), }); ``` ## Правило для передачи проекта У пользовательской функции должен быть описан вход: что она принимает, когда запускается и где пишет ошибку. Тогда добавление нового блока не превращается в археологию по чужому коду. Частые вопросы по теме: - В: Как понять, что пришло в функцию? О: Проверьте argument instanceof HTMLFormElement. Если нет, у jQuery-объекта первый элемент обычно лежит в argument[0]. - В: Почему пользователь не видит ошибку функции? О: Тильда перехватывает исключение пользовательского колбэка и пишет его в console.error. Поэтому форма внешне может продолжить работу, а своя логика молча не выполнится. ### Тильда глазами дизайнера, который сдаёт сайт клиенту URL: https://modkod.ru/articles/chto-takoe-tilda Рубрика: Пределы Тильды | Целевой запрос: «что такое тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Тильда — платформа, где дизайнер собирает и публикует сайт из готовых блоков и свободных композиций Zero Block, не разворачивая собственный сервер. Она хорошо подходит для лендингов, корпоративных страниц, портфолио, контентных проектов и магазинов с понятным процессом. Чем больше в задаче персональных данных, ролей и обмена между системами, тем меньше это «просто сайт» и тем важнее техническая оценка. Содержание разбора: ## Короткий ответ Тильда сокращает путь от макета до опубликованного сайта. Она не отменяет структуру, контент, тестирование и передачу проекта владельцу. ## Два способа собирать страницу Стандартные блоки дают готовую адаптивность и поведение: меню, формы, каталог, галерея. Zero Block даёт свободную композицию. Сильный проект сочетает их: не рисует заново корзину ради скругления и не ломает идею стандартной сеткой там, где важен арт-дирекшен. ## Где платформа особенно удобна - быстрые лендинги и тесты предложений; - сайты услуг и портфолио; - редакционные страницы; - события и небольшие каталоги; - проекты, которые клиент будет менять сам. Последний пункт часто важнее эффектов. Если владелец может заменить текст, фотографию и цену без дизайнера, сайт дешевле поддерживать. ## Где нужна техническая оценка Личный кабинет со своими ролями, защищённые расчёты, сложная синхронизация склада, нестандартная доставка и бизнес-правила корзины затрагивают сервер и данные. Их нельзя безопасно решить только тем, что посетитель скачивает в браузер. ## Как выбирать модификации Сначала проверьте стандартный блок и настройки. Затем сформулируйте один пробел: «нужно изменить вот это, а всё остальное оставить Тильде». Хорошая модификация добавляет небольшое поведение, имеет запасной сценарий и не мешает клиенту редактировать контент. Так Тильда остаётся конструктором, а не превращается в случайный набор скриптов. Частые вопросы по теме: - В: Нужно ли знать код, чтобы работать в Тильде? О: Для большинства страниц нет. Код нужен для доказанно отсутствующего поведения, а не для каждой нестандартной композиции. - В: Можно сделать интернет-магазин? О: Да, у Тильды есть каталог, корзина, доставка и оплаты. Сложный складской или ролевой процесс может потребовать внешних систем. ### Когда дизайнеру нужен Zero Block, а когда лучше готовый блок URL: https://modkod.ru/articles/chto-takoe-zero-block-tilda Рубрика: Пределы Тильды | Целевой запрос: «что такое zero block в тильде» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Zero Block — свободный артборд Тильды: дизайнер размещает текст, изображения, фигуры и кнопки с точными координатами и настраивает их для разных ширин. Это инструмент композиции, а не отдельная платформа внутри платформы. Он не превращает группу элементов в корзину, меню, поиск или доступный попап автоматически. Для поведения сначала ищите готовый блок, а Zero Block используйте там, где важен собственный визуальный ритм. Содержание разбора: ## Короткий ответ Zero Block выбирают ради свободы расположения. Готовый блок — ради уже решённого поведения. В одном сайте нормально использовать оба. ## Что даёт артборд Вы можете расположить элементы, настроить размеры и координаты на нескольких ширинах, собрать группы, добавить пошаговую анимацию и автолэйаут. Это похоже на графический редактор, но результат живёт в браузере: текст должен оставаться текстом, кнопка — кнопкой, а композиция — выдерживать промежуточные ширины. ## Чего он не даёт сам Группа карточек не становится слайдером, две стороны — flip-карточкой, а список ссылок — доступным меню. Визуальное сходство не создаёт логику. Именно для таких узких пробелов существует каталог модификаций. ## Когда брать стандартный блок Если задача — форма, каталог, корзина, аккордеон, поиск или многоуровневое меню, сначала изучите готовые варианты. Их код уже знает состояния, мобильные сценарии и интеграции. Перерисовать оболочку обычно дешевле, чем повторить механику. ## Когда Zero Block оправдан - первый экран с собственным арт-дирекшеном; - портфолио и кейс; - нестандартная типографика; - композиция, где отношения элементов важнее готовой сетки; - прототип уникального интерактива с понятным запасным сценарием. ## Проверка дизайнера Не ограничивайтесь пятью рамками редактора. Потяните окно между ними, увеличьте текст браузером, загрузите длинный заголовок и откройте настоящий телефон. Сайт клиента будет жить на сотнях ширин, а не в пяти скриншотах. Частые вопросы по теме: - В: Нужно ли делать весь сайт в Zero Block? О: Нет. Меню, формы, каталог и другие готовые механики обычно надёжнее оставить стандартными, а Zero Block использовать для уникальных экранов. - В: Zero Block адаптивный? О: Да, но дизайнер сам отвечает за композицию на рабочих ширинах. Скрытие элемента в адаптиве не всегда означает, что его можно бездумно удалить из структуры. ### Как задать разную стоимость доставки по городу URL: https://modkod.ru/articles/dostavka-po-rayonam-v-tilde Рубрика: Как сделать | Целевой запрос: «стоимость доставки по районам тильда» | Опубликовано: 12 августа 2026 Верификация: родной radio доставки передаёт название и data-delivery-price в window.tcart.delivery, после чего корзина добавляет цену к итогу; сервисы могут перерисовать обёртку, а формы фильтруют пользовательские поля tildadelivery-* (tcart__processDelivery и tcart__updateDelivery в tilda-cart-1.1.min.js; TILDA-DELIVERY-REFERENCE.md и TILDA-FORMS-REFERENCE.md) Суть и прямой ответ: Задача «центр — 300 рублей, окраина — 600, за город не доставляем» не обязана начинаться с карты. Для небольшого проекта надёжнее дать покупателю явный список районов, показать цену и передать её родному механизму доставки корзины. Карта нужна, когда зону определяют по координатам введённого адреса; это уже внешний геокодер, ключ API, ошибки адресов и серверная интеграция, а не короткий T123. Содержание разбора: ## Короткий ответ Для нескольких понятных районов сделайте список выбора и заранее покажите цену. После выбора стоимость должна записаться в родную доставку Тильды. Если зона определяется по реальному адресу на карте, нужен внешний геокодер и отдельная интеграция. ## Выберите один из трёх уровней ### 1. Фиксированная доставка для всего города Это обычный способ доставки в настройках корзины. Модификация не нужна. ### 2. Таблица районов Подходит для правил вида: | Зона | Цена | Бесплатно от | | --- | ---: | ---: | | Центр | 300 ₽ | 3 000 ₽ | | Север | 500 ₽ | 5 000 ₽ | | За городом | нет доставки | — | Покупатель сам выбирает понятное название. Менеджер сверяет адрес после заявки. ### 3. Зоны на карте Система получает адрес, геокодирует его, проверяет координату внутри полигона и возвращает тариф. Нужны внешний API, ключ, обработка неточного адреса и запасной сценарий. Обещать это одной таблицей в T123 нельзя. ## Почему нельзя править итоговую сумму напрямую Корзина меняет итог после количества, промокода, динамической скидки и доставки. Если скрипт один раз прибавит 500 рублей к тексту на экране, следующий пересчёт сотрёт изменение. Даже если цифра останется видимой, в заявку может уйти другая. Родной путь устроен иначе. Выбранный radio доставки хранит название и `data-delivery-price`. `tcart__processDelivery` переносит их в `window.tcart.delivery`, а функции корзины добавляют цену и перерисовывают итог. Хорошая модификация присоединяется к этому контракту и не создаёт собственную «финальную сумму» рядом. ## Что должно попасть в заказ Недостаточно изменить одну строку «Доставка: 500 ₽». Клиенту нужны: - выбранное название зоны; - стоимость доставки; - введённый адрес; - признак бесплатного порога; - понятное сообщение, если зона недоступна. Собственные скрытые поля не следует называть с префиксом `tildadelivery-`: сериализатор форм Тильды фильтрует такие имена. Этот префикс принадлежит родным служебным полям, а не пользовательским данным для webhook. ## Почему перерисовка важна Службы доставки могут заново собрать свою обёртку после открытия корзины, изменения товара или ответа API. Если пользовательский radio был добавлен один раз при загрузке страницы, он исчезнет. При этом нельзя бесконечно вызывать `tcart__rerenderDeliveryServices`: получится цикл «перерисовали → добавили → снова перерисовали». Мод должен наблюдать родную перерисовку и восстанавливать только свой вариант без дублей. [MOD-176](/mods/mod-176) собран для узкого сценария с явным списком районов. Он делегирует события общей обёртке, поэтому переживает замену полей корзиной, но не обещает определить район по произвольному почтовому адресу. ## Проверка перед сдачей Пройдите все изменения, которые могут пересчитать заказ: 1. Выберите каждую зону. 2. Перейдите через порог бесплатной доставки в обе стороны. 3. Измените количество товара. 4. Примените и удалите промокод. 5. Переключитесь на штатный самовывоз или службу доставки. 6. Закройте и заново откройте корзину. 7. Отправьте тест и сравните экран, CRM и письмо. Клиенту передайте таблицу зон отдельным документом: кто меняет цены, кто проверяет адрес и что делать с заказом вне списка. Тогда доставка остаётся правилом бизнеса, а не спрятанным числом в коде. Частые вопросы по теме: - В: Можно определить район автоматически по адресу? О: Только через геокодер или службу доставки, которая превращает адрес в координаты и проверяет их по зоне. Сравнение текста адреса ненадёжно. - В: Можно просто прибавить цену к итоговой сумме скриптом? О: Нет. Итог пересчитывается после промокода, количества и выбора способа доставки. Цена должна попасть в штатный объект доставки корзины. - В: Когда достаточно обычного списка? О: Когда зон немного, покупатель знает свой район, а менеджер всё равно проверяет адрес перед отправкой. Это проще и прозрачнее карты. - В: Что именно закрывает MOD-176? О: Прозрачный список «название зоны → цена»: мод записывает выбранную цену в отправляемое поле и повторно находит его после перерисовки корзины. Карту и геокодирование адреса он не подменяет. ### Что корзина считает сама и когда нужна интеграция доставки URL: https://modkod.ru/articles/dostavka-sdek-tilda Рубрика: Пределы Тильды | Целевой запрос: «интеграция сдэк тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Простую доставку — фиксированную цену, бесплатность от суммы или выбор из готовых вариантов — начинайте с настроек корзины Тильды. Если цена зависит от полного адреса, тарифа по договору, веса и пункта выдачи СДЭК, браузерного сниппета недостаточно: нужен защищённый запрос к сервису и понятный сценарий ошибки. Не храните ключ перевозчика в T123. Содержание разбора: ## Короткий ответ Сначала определите источник цены. Таблица зон может жить в модификации. Живой тариф перевозчика и карта пунктов выдачи — интеграционная задача. ## Что можно настроить без разработки Для нескольких понятных вариантов укажите цену и условия в корзине: самовывоз, курьер по городу, бесплатная доставка от суммы. Проверьте актуальные возможности в настройках проекта — список служб и тарифов меняется. Не добавляйте отдельную красивую карточку доставки рядом с родным списком, если оформление заказа её не знает. Посетитель выберет одно, а в заявку уедет другое. ## Таблица районов MOD-176 предназначен для ограниченного набора зон, который владелец поддерживает вручную. Он находит выбранный город или район, записывает цену в поле заказа и просит родную корзину пересчитать итог. Карты, геокодера и внешнего API там нет; готовый мод решает только прозрачную таблицу зон и не называется интеграцией СДЭК. ## Полная интеграция Для СДЭК или другой службы обычно нужны адрес, вес, габариты, тариф, пункты выдачи и серверный ключ. Добавьте сценарии: сервис не ответил, адрес не найден, тариф изменился после выбора, точка закрыта. Цена на платёжной странице должна совпасть с корзиной. ## Что спросить у клиента - есть ли договор и тестовый доступ; - откуда берутся вес и габариты; - курьер, пункт выдачи или оба; - кто оплачивает ошибку тарифа; - куда попадает выбранная точка; - что показывать при недоступности API. После ответа задача оценивается как интеграция, а не как оформление виджета. Частые вопросы по теме: - В: Можно рассчитать СДЭК только JavaScript-кодом на странице? О: Секретный ключ нельзя безопасно хранить в браузере. Для тарифа по договору нужен сервер или готовая интеграция, которая хранит ключ на своей стороне. - В: Чем MOD-176 отличается от интеграции СДЭК? О: MOD-176 выбирает цену по заранее заданной таблице районов или городов. Он не запрашивает тариф перевозчика и не показывает пункты выдачи на карте. ### Как переключать фото товара при выборе цвета или комплектации URL: https://modkod.ru/articles/foto-varianta-tovara-v-tilde Рубрика: Как сделать | Целевой запрос: «фото варианта товара тильда» | Опубликовано: 12 августа 2026 Верификация: выбранная торговая вариация передаёт каталогу своё поле изображения; рантайм ищет совпадающий слайд, меняет позицию галереи и сохраняет картинку в данных выбранного товара (`t_store_product_updateEdition`, `t_store_product_updateEdition_moveSlider` и `t_store_product_getEditionOptionsArr_getImgValues` в `tilda-catalog-1.1.min.js`) Суть и прямой ответ: Для одной главной фотографии на каждый цвет отдельный код не нужен: торговая вариация товара уже хранит своё изображение, а каталог Тильды переводит галерею к нему после выбора. Модификация начинается позже — когда для синего товара нужна целая синяя галерея, для красного красная, и фотографии других вариантов вообще не должны оставаться в листании. Содержание разбора: В магазине слова «опция», «цвет» и «вариант» звучат одинаково, но для карточки товара это разные уровни. Простая опция может добавить подпись или цену. Торговая вариация описывает конкретную комбинацию — например, «синий, размер M» — со своей ценой, артикулом, остатком и фотографией. Именно торговая вариация нужна, если картинка должна меняться вместе с выбором. ## Короткий ответ Создайте торговые вариации товара, назначьте каждой свою фотографию и оставьте эти фотографии в галерее карточки. После выбора Тильда сама найдёт нужный слайд и переведёт галерею к нему. Код нужен только тогда, когда надо не перейти к одному фото, а полностью заменить набор слайдов. ## Что Тильда делает сама Внутри каталога выбранная вариация хранит поле изображения. Когда посетитель меняет цвет или комплектацию, Тильда: 1. определяет подходящую комбинацию опций; 2. обновляет цену, артикул и остаток; 3. берёт фотографию этой вариации; 4. ищет её среди слайдов карточки; 5. переводит галерею к найденному слайду. Это не предположение по интерфейсу. Такая последовательность видна в функциях каталога: одна обновляет вариацию, другая отдельно двигает слайдер к её изображению. ## Как настроить без кода Названия кнопок в редакторе могут меняться, но порядок действий остаётся таким: 1. Откройте товар в каталоге Тильды. 2. Создайте варианты по признаку, который выбирает покупатель: цвет, размер, материал или комплектация. 3. Проверьте именно торговые вариации — комбинации с отдельным остатком и артикулом, а не только текстовую опцию. 4. Назначьте главную фотографию каждой вариации. 5. Убедитесь, что эти же изображения входят в галерею товара. 6. Сохраните товар, обновите блок каталога и опубликуйте страницу. Последний шаг важен: опубликованный каталог и карточка в редакторе — не один и тот же режим. Проверяйте результат там, где товар увидит покупатель. ## Почему картинка не переключается Если цвет выбран, а фото осталось прежним, пройдите причины по порядку. **Фото назначено товару целиком.** Тогда оно остаётся общим для всех вариантов. Нужна фотография внутри конкретной торговой вариации. **Назначенной картинки нет в галерее.** Штатный код не создаёт новый слайд на лету: он ищет совпадение среди уже существующих. Если его нет, позиция галереи не меняется. **Не собрана нужная комбинация.** Для товара «цвет + размер» отдельной вариацией является сочетание двух значений. Проверьте не только «синий», но и «синий + M», «синий + L» и остальные продаваемые комбинации. **Страница не обновлена после правки каталога.** Сохранение товара и публикация страницы — два разных действия. После изменения вариантов обновите блок и проверьте опубликованный адрес в новом окне. ## Когда штатной фотографии мало Представим товар с тремя цветами и пятнадцатью фотографиями: по пять на каждый цвет. Тильда умеет перевести галерею к главной фотографии выбранного цвета, но остальные слайды никуда не исчезают. Покупатель листает дальше и снова видит чужой цвет. Вот это уже задача MOD-167: не одна фотография вариации, а отдельная группа слайдов для каждого варианта. Мод должен оставить родной слайдер, свайп, зум, цену и корзину, меняя только доступную группу изображений. Пока мод находится в исследовании. Главный открытый вопрос — как владелец без кода надёжно обозначит группы фотографий. Привязка к номеру слайда слишком хрупкая: переставили одну картинку, и все номера съехали. Сначала нужен способ, который переживёт обычное редактирование товара. ## Что подготовить для галерей по вариантам Удобнее всего составить маленькую таблицу до настройки: | Вариант | Главная фотография | Остальные фотографии | | ------- | ---------------------- | ------------------------------ | | Синий | синяя модель спереди | сбоку, сзади, деталь, упаковка | | Красный | красная модель спереди | сбоку, сзади, деталь, упаковка | Если у двух вариантов должна быть одна общая фотография — например, упаковка — отметьте это отдельно. Такая мелочь определяет, будет ли общий слайд виден в обеих группах или случайно пропадёт. ## Что проверить покупателем Пройдите товар так, будто видите его впервые: - выберите каждый вариант по очереди; - проверьте главную картинку, цену, артикул и остаток; - добавьте вариант в корзину и сравните его название и фото; - закройте и снова откройте попап товара; - повторите выбор на телефоне свайпом; - вернитесь к первому варианту и убедитесь, что галерея восстановилась. Если нужна только одна главная фотография, на этом задача закрыта средствами Тильды. Не добавляйте модификацию ради функции, которая уже работает сама. Частые вопросы по теме: - В: Нужен ли код, чтобы фото менялось при выборе цвета? О: Нет, если каждому цвету достаточно одной главной фотографии. Используйте торговые вариации и назначьте изображение каждой вариации: Тильда умеет сама перевести галерею к выбранной картинке. - В: Почему выбрал цвет, а галерея осталась на первом фото? О: Частая причина — изображение назначено всему товару, а не конкретной вариации, либо назначенная картинка отсутствует среди слайдов галереи. Штатный код ищет совпадающий слайд; если искать нечего, перейти ему некуда. - В: Можно показать несколько фотографий для каждого цвета? О: Штатная механика выбирает одну картинку вариации и переводит галерею к ней, но не убирает остальные слайды. Для отдельных групп из нескольких фото нужна дополнительная логика — это граница MOD-167. - В: MOD-167 уже можно вставить на сайт? О: Да, если дизайнер явно пометил переключатели и изображения одинаковыми текстовыми ключами. Мод фильтрует только размеченные фотографии; торговые варианты, цену, остаток и добавление в корзину оставляет Тильде. ### Как сделать горизонтальную ленту карточек без сложной анимации URL: https://modkod.ru/articles/gorizontalnye-kartochki-v-zero-block-tilda Рубрика: Как сделать | Целевой запрос: «как сделать горизонтальный скролл карточек на тильде» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Если карточки нужно листать пальцем или колёсиком по горизонтали, начните с обычного прокручиваемого контейнера и scroll-snap. Он легче, доступнее и устойчивее привязанной к скроллу анимации. Липкая секция, где вертикальный путь двигает длинную ленту, — уже другой сценарий и отдельная модификация. Не смешивайте их: визуально похожи, но ломаются по-разному. Содержание разбора: ## Короткий ответ Для карусели на телефоне используйте нативный горизонтальный скролл. Для презентационной сцены с закреплённым экраном — MOD-178 и отдельная проверка sticky. ## Простая лента Обёртка должна ограничивать ширину, а внутренняя дорожка — держать карточки в строку. Базовая идея выглядит так: ```css .cards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; } .card { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; } ``` В Zero Block такой контейнер лучше собирать как одну размеченную группу. Не назначайте `overflow: hidden` всем родителям подряд: он может обрезать тени и отменить поведение липкого потомка. ## Стрелки Стрелка должна прокручивать на ширину фактической карточки с промежутком, а не на фиксированные 300 пикселей из макета. После смены ширины измерение меняется. Кнопки скрывают или блокируют на начале и конце, но свайп оставляют. ## Когда нужен sticky Если левая часть остаётся на месте, а правая лента проходит длинный путь при вертикальном скролле, это не карусель. Секция должна получить дополнительную высоту, закрепиться и переводить вертикальный прогресс в `translateX`. MOD-178 описывает эту механику и её ограничения. ## Приёмка на клиентском сайте Проверьте настоящим пальцем, трекпадом, Shift+колесо и клавиатурой. Карточка не должна застревать между позициями, а вертикальная страница — случайно уезжать вбок. После проверки удалите системную полосу прокрутки только если остаётся другая заметная подсказка. Частые вопросы по теме: - В: Нужен ли JavaScript для горизонтальной ленты? О: Для обычного свободного листания часто нет — достаточно overflow-x и scroll-snap. Код нужен для стрелок, сложной синхронизации или sticky-сценария. - В: Почему пользователь не замечает, что карточки листаются? О: Если первая карточка занимает всю ширину и нет стрелки или подсказки, продолжение не видно. Оставьте край следующей карточки либо добавьте понятное управление. ### Как сделать своё избранное в Zero Block URL: https://modkod.ru/articles/izbrannoe-v-zero-block-tilda Рубрика: Как сделать | Целевой запрос: «избранное в zero block тильда» | Опубликовано: 12 августа 2026 Верификация: родное избранное хранит объект twishlist в localStorage, принимает товар через twishlist__addProduct, обновляет счётчик и удаляет старые данные по data-maxstoredays; инициализация требует .t1002 блока ST110 (tilda-wishlist-1.0.min.js и техническая граница M20 в plans/how-mods-work.md) Суть и прямой ответ: Дизайнер может нарисовать карточку и кнопку-сердце в Zero Block, но одного переключения цвета недостаточно: выбор должен сохраниться после перезагрузки, а одинаковые карточки — показывать одно состояние. MOD-179 решает именно эту локальную задачу без ST110. Он не подменяет родное избранное магазина и не обещает экран списка, счётчик или перенос между устройствами. Содержание разбора: ## Короткий ответ Сначала выберите один из двух сценариев. Если клиенту нужен родной экран избранного Тильды, используйте ST110. Если достаточно сердечек на собственных карточках и локальной памяти браузера, пометьте кнопки `data-mk-wishlist` и установите MOD-179. Смешивать эти два списка без отдельной интеграции нельзя. ## Что должно произойти после клика Локальное избранное — это не один класс `active`. После нажатия: 1. Товар добавляется или удаляется из сохранённого списка. 2. Все кнопки этого товара меняют состояние. 3. Кнопки получают корректное `aria-pressed`. 4. После перезагрузки выбор восстанавливается. Если скрипт делает только первый визуальный пункт, посетитель получает декорацию, а не функцию. ## Два разных механизма Родное избранное Тильды хранит `window.twishlist`, использует ST110 и умеет показывать штатный экран и счётчик. Это подходящий выбор для каталога, когда нужна именно магазинная функция. MOD-179 хранит массив id в отдельном ключе `mk-wishlist`. Он не вызывает `twishlist__addProduct` и не притворяется родным избранным. Благодаря этому мод не зависит от внутреннего рантайма ST110, но у него нет штатного экрана списка. Оба механизма можно связать отдельным проектным кодом, но готовая версия MOD-179 этого не обещает. Иначе дизайнер увидит активное сердце, а родной список — нет. ## Как разметить кнопки Каждая кнопка получает один и тот же id в `data-mk-wishlist`, если показывает один и тот же товар: ```html ``` Выбранной кнопке мод добавит класс `is-favorite`. В Zero Block остаётся настроить два внешних вида: обычный и выбранный. Если карточка повторяется в слайдере или на другой части страницы, используйте тот же id — состояние синхронизируется. ## Какие данные нужны карточке MOD-179 хранит id, а не карточку товара целиком. Минимум — устойчивый уникальный идентификатор без пробелов. Не берите его из текста заголовка: клиент переименует товар, и старая запись перестанет совпадать. Если карточка связана с каталогом, удобно использовать uid. Для самостоятельной витрины заведите короткий внутренний код вроде `chair-01` и не меняйте его при редизайне. ## Где хранится выбор `localStorage` относится к одному домену и браузеру. Избранное не переносится: - между телефоном и компьютером; - из обычного окна в приватное; - после очистки данных сайта; - между разными доменами проекта. Если клиенту нужен список внутри личного кабинета, это уже серверная функция с авторизацией, а не модификация кнопки. [MOD-179](/mods/mod-179) готов: он синхронизирует одинаковые кнопки на странице, сохраняет id и сообщает об изменении событием `mk:wishlist-change`. ST110, экран избранного, аккаунт и перенос между устройствами в его контракт не входят. ## Проверка перед сдачей - На странице несколько карточек, и каждая меняется независимо. - Один товар показан дважды — обе кнопки синхронны. - У каждой кнопки есть понятная подпись и `aria-pressed`. - После перезагрузки выбор восстановился. - После очистки данных сайта выбор пропал ожидаемо. - На другой странице того же домена с тем же модом состояние совпадает. - Если на проекте есть ST110, клиент понимает, что это отдельный список. Клиенту запишите ограничение одного браузера. Тогда очистка localStorage не будет выглядеть как исчезновение заказов или данных аккаунта. Частые вопросы по теме: - В: Можно сделать избранное совсем без стандартного блока? О: Да, если нужен локальный список для собственных карточек. MOD-179 работает без ST110. Если нужен родной экран избранного Тильды, используйте ST110 и отдельно проверяйте интеграцию с его внутренними функциями. - В: Избранное переносится на другой телефон? О: Нет. Оно хранится в localStorage конкретного браузера. Для синхронизации между устройствами нужен аккаунт и серверное хранилище. - В: Достаточно менять цвет сердечка? О: Нет. Цвет — только отображение. Нужны устойчивый id товара, сохранение в localStorage и синхронизация всех кнопок с таким id. Это делает MOD-179. - В: Почему выбор может пропасть через время? О: localStorage очищается вместе с данными сайта и недоступен в другом браузере или на другом домене. У MOD-179 нет автоматического срока хранения. ### Что синхронизирует МойСклад и почему это не модификация страницы URL: https://modkod.ru/articles/integraciya-tilda-moysklad Рубрика: Пределы Тильды | Целевой запрос: «интеграция тильда и мой склад» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Интеграция с МоимСкладом относится к каталогу и серверному обмену: браузер посетителя не должен хранить ключи или решать, какой остаток верный. В Тильде есть штатное подключение учётной системы, поэтому задача дизайнера — подготовить каталог, сопоставить данные вместе с владельцем и проверить полный цикл товара и заказа. Пользовательский код в T123 здесь не заменяет настройку интеграции. Содержание разбора: ## Короткий ответ Настраивайте обмен в административной части и проверяйте цикл данными. Не ищите фронтенд-мод для задачи, которая должна выполняться без посетителя. ## Разделите роли Дизайнер отвечает за структуру каталога, вид карточек и пользовательский путь. Владелец магазина — за справочник товаров, склады, правила остатков и учёт. Технический специалист — за сопоставление и разбор ошибок обмена, если штатной настройки недостаточно. Без этого разделения дизайнер становится случайным администратором учётной системы после сдачи. ## Подготовка каталога До подключения выберите устойчивый артикул, единицы измерения, варианты и источник главной цены. У одинаковых товаров не должно быть разных артикулов «для сайта» и «для склада» без таблицы соответствия. Не добавляйте декоративные пробелы и пояснения в поля, по которым идёт обмен. Красивое отображение собирается на витрине, исходные данные остаются чистыми. ## Тестовый маршрут 1. Создайте один тестовый товар в системе-источнике. 2. Дождитесь его появления в каталоге. 3. Измените цену и остаток. 4. Оформите заказ на сайте. 5. Проверьте состав, вариант и контакт покупателя в учёте. 6. Отмените тест и убедитесь, что команда понимает дальнейший процесс. Текущую доступность интеграции и условия тарифа проверяйте в официальной справке перед оценкой: они могут меняться. Архитектурная граница не меняется — секреты и синхронизация не живут в коде страницы. Частые вопросы по теме: - В: Можно подключить МойСклад скриптом на странице? О: Нет безопасного варианта: ключи нельзя отдавать в браузер, а синхронизация должна работать и без открытой страницы. Используйте штатное или серверное подключение. - В: Что тестировать после подключения? О: Создание и обновление товара, цену, вариант, остаток, заказ, отмену и повторную синхронизацию после ошибки. ### Что проверить перед передачей сайта на Тильде клиенту URL: https://modkod.ru/articles/kak-sdat-sayt-na-tilde-klientu Рубрика: Как сделать | Целевой запрос: «как сдать сайт на тильде клиенту» | Опубликовано: 12 августа 2026 Верификация: технические пункты чек-листа сверены с тремя разобранными механизмами Тильды: загрузкой видео Zero Block, языком проекта и очередью плавающих виджетов; проверки модов и ссылок повторяют критерии страниц каталога (`tilda-zero-video-1.0.min.js`, `tilda-scripts-3.0.min.js`, `tilda-widget-positions-1.0.min.js` и спецификации MOD-169–171) Суть и прямой ответ: Сдача сайта — это не ссылка со словами «всё готово». Клиент должен получить работающие формы, понятные доступы, список внешних сервисов и возможность заменить текст или фотографию, не сломав страницу. Этот чек-лист рассчитан на дизайнера, который собирает сайты на Тильде и не хочет превращаться в программиста: проверки идут глазами посетителя и владельца проекта. Содержание разбора: Дизайнер обычно видит проект дольше клиента и уже не замечает знакомые мелочи: кнопка ведёт на тестовый адрес, форма отправляет в личную почту, а видео хранится на временном диске. Поэтому сдачу полезно проводить не по памяти, а одинаковым маршрутом для каждого проекта. ## Короткий ответ Проверьте опубликованный сайт как посетитель, затем как владелец. Передайте доступы без общих паролей, список страниц, домен, формы, аналитику, внешние сервисы и все модификации. В конце дайте клиенту самому заменить один текст и одну фотографию под вашим наблюдением. ## 1. Состав сайта Сначала зафиксируйте, что именно сдаётся: - список опубликованных страниц; - страницы благодарности и 404; - попапы; - формы и получатели заявок; - языковые версии; - каталог и корзина; - внешние сервисы; - модификации и блоки T123. Этот список защищает обе стороны. Клиент видит комплект, а дизайнер не пытается через месяц вспомнить, входил ли второй язык в исходную задачу. ## 2. Пройдите сайт посетителем Откройте опубликованный адрес в приватном окне, где вы не авторизованы в Тильде. Пройдите главный сценарий от первого экрана до результата: 1. Понять предложение без устного объяснения дизайнера. 2. Открыть меню и нужный раздел. 3. Нажать основную кнопку. 4. Заполнить форму или положить товар в корзину. 5. Получить понятное подтверждение. 6. Вернуться назад и продолжить пользоваться сайтом. Проверьте все ссылки телефона, почты, мессенджеров и социальных сетей. Временные заглушки `#`, тестовые домены и личные контакты дизайнера должны исчезнуть до показа. ## 3. Мобильная версия В редакторе пройдите каждый используемый брейкпоинт, а затем откройте сайт на настоящем телефоне. Смотрите не только на красоту: - текст не обрезан и не выходит за экран; - кнопки удобно нажимать пальцем; - меню можно закрыть; - форма не прячется за клавиатурой; - горизонтальный скролл не появляется случайно; - видео не уходит в неожиданный полный экран; - плавающие кнопки не перекрывают корзину и основное действие. На длинной странице прокрутите до конца. Ошибка часто появляется не на первом экране, а после блока, который стал выше на мобильной ширине. ## 4. Формы и заявки Отправьте настоящую тестовую заявку из каждой уникальной формы. Проверить только сообщение «Спасибо» недостаточно — заявка должна дойти до получателя. Зафиксируйте: - куда приходит письмо; - какая CRM или таблица подключена; - кто владелец интеграции; - что видит посетитель после успеха; - что происходит при ошибке; - какие согласия и ссылки на документы стоят рядом. После проверки удалите тестовые заявки или подпишите их так, чтобы клиент не принял тест за нового покупателя. ## 5. Домен, аналитика и внешние сервисы Составьте таблицу владельцев: | Что | Аккаунт владельца | Кто оплачивает | Когда продлевать | | --- | --- | --- | --- | | Домен | клиент | клиент | дата | | Тильда | клиент | клиент | дата | | Почта | клиент | клиент | дата | | Видеохостинг | клиент или дизайнер | согласовать | дата | | Виджет/CRM | клиент | клиент | дата | Если сервис оформлен на дизайнера, это должно быть осознанным договором, а не случайностью. Иначе сайт перестанет работать вместе с вашим тарифом. В аналитике проверьте не только наличие счётчика, но и доступ клиента к нему. Данные в чужом аккаунте нельзя считать переданными. ## 6. Сделайте ведомость модификаций Для каждого пользовательского кода запишите: - название и номер мода; - на какой странице он стоит; - к какому блоку относится; - что можно менять без кода; - где лежит исходный файл; - дата последней проверки; - известные ограничения. Не называйте штатную настройку установленной модификацией. В текущем каталоге ModKod рабочий файл помечен «Готов», а отменённый лишний код — «Есть в Тильде». В ведомость проекта попадает только то, что действительно вставлено на сайт. Особенно отметьте три дизайнерские зоны риска: - у видео — где лежат MP4 и постер; - у языков — таблица пар страниц; - у плавающих кнопок — какие штатные виджеты могут появиться рядом. ## 7. Передайте доступы безопасно Не отправляйте все логины и пароли одним сообщением. По возможности: - передайте проект в аккаунт клиента; - пригласите его отдельным пользователем там, где сервис это поддерживает; - смените временные пароли после передачи; - включите двухфакторную защиту; - передайте резервные коды владельцу проекта; - удалите доступы, которые больше не нужны подрядчику. В блоках T123 и видимом коде страницы не должно быть секретных API-ключей. Всё, что вставлено в страницу, посетитель может прочитать. ## 8. Проведите короткое обучение Лучший тест передачи — не демонстрация экрана дизайнером, а действие клиента. Попросите его самостоятельно: 1. заменить одно предложение; 2. заменить фотографию; 3. опубликовать страницу; 4. найти заявку; 5. открыть таблицу модификаций. Запишите короткое видео только по тем операциям, которые действительно нужны этому проекту. Часовой обзор всей Тильды клиент почти наверняка не пересмотрит. ## Финальный список перед сообщением «готово» - Все страницы опубликованы на настоящем домене. - Главное действие проходит от начала до результата. - Каждая форма отправлена и заявка получена. - Телефон и мобильные брейкпоинты проверены. - Доступ клиента к Тильде, домену и аналитике работает. - Внешние сервисы имеют понятного владельца и дату оплаты. - Пользовательский код перечислен и не содержит секретов. - Клиент умеет внести простую правку и опубликовать её. - Договорённость о поддержке после сдачи записана отдельно. После такого прохода сайт перестаёт быть файлом дизайнера и становится рабочим инструментом клиента — именно это и означает нормальная сдача. Частые вопросы по теме: - В: Нужно ли передавать клиенту свой аккаунт Тильды? О: Нет. Проект передают в аккаунт клиента или дают согласованный доступ, сохраняя личные проекты, платежи и данные дизайнера отдельно. Способ зависит от договорённости, но общий пароль от личного аккаунта — плохая передача. - В: Что написать про установленные модификации? О: Название, страницу, блок, назначение, место настройки и ссылку на источник. Отдельно отметьте внешние файлы и сервисы, которые оплачивает дизайнер или клиент. - В: Достаточно проверить сайт в предпросмотре? О: Нет. Формы, пользовательский код, домен, аналитика и часть медиа ведут себя на опубликованной странице иначе. Финальная проверка проходит по настоящему адресу. - В: Сколько устройств нужно проверить? О: Минимум компьютер и настоящий телефон. В редакторе дополнительно пройдите все рабочие брейкпоинты, но мобильная рамка браузера не заменяет реальное касание, клавиатуру и поведение видео. ### Что действительно тормозит Zero Block и что проверять первым URL: https://modkod.ru/articles/kak-uskorit-zero-block-tilda Рубрика: Не работает | Целевой запрос: «как ускорить сайт на тильде» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Zero Block сам по себе не делает страницу медленной: скорость зависит от ресурсов и работы, которую вы положили внутрь. Чаще всего виноваты полноразмерные изображения, видео на первом экране, несколько начертаний шрифта, сторонние виджеты и модификации, которые пересчитывают геометрию при каждом скролле. Сначала измерьте опубликованную страницу без кеша, затем убирайте по одному крупному источнику. Содержание разбора: ## Короткий ответ Оптимизируйте по убыванию цены: видео, изображения, шрифты, сторонние сервисы, пользовательский код. Не удаляйте элементы вслепую. ## 1. Видео первого экрана Автозапуск большого MP4 конкурирует с изображением, шрифтом и скриптами. Дайте постер, короткий ролик и мобильную альтернативу. Если видео не влияет на первое действие, загружайте его после клика или ниже первого экрана. ## 2. Изображения Не загружайте фотографию шириной 5000 пикселей в карточку 600 пикселей. Экспортируйте реальный размер с разумным запасом, используйте современные форматы и проверяйте, что мобильная версия не получает тяжёлый фон только потому, что он скрыт CSS. ## 3. Шрифты Три семейства по девять весов — не признак системы. Оставьте только используемые начертания и убедитесь, что в них есть кириллица. Поздний шрифт меняет ширину текста и заставляет браузер пересчитывать композицию. ## 4. Виджеты и модификации Чат, аналитика, карта, CRM и каждый T123 добавляют работу. Временно отключайте по одному и повторяйте измерение. Особое внимание к обработчикам `scroll` и `resize`: чтение геометрии после записи стилей создаёт лишние раскладки. ## 5. Проверяйте опубликованную страницу Редактор не равен сайту клиента. Сделайте замер в приватном окне с ограничением сети, пройдите мобильный сценарий и смотрите не только момент появления первого текста, но и время до работающей кнопки. После каждой правки записывайте результат. Иначе десять мелких оптимизаций легко сделать страницу сложнее и не получить заметного ускорения. Частые вопросы по теме: - В: Сколько элементов можно ставить в Zero Block? О: Универсального безопасного числа нет. Десять тяжёлых видео хуже сотни простых текстов. Оценивайте вес ресурсов и время работы браузера. - В: Поможет ли прелоадер? О: Он скроет процесс, но не ускорит его. Иногда прелоадер даже добавляет задержку, потому что ждёт лишние ресурсы. ### Как нарисовать карточку в Zero Block и связать с каталогом URL: https://modkod.ru/articles/kartochka-kataloga-v-zero-block-tilda Рубрика: Как сделать | Целевой запрос: «карточка каталога в zero block тильда» | Опубликовано: 12 августа 2026 Верификация: рантайм каталога различает опубликованные и редакторские адреса данных, получает товар по uid и собирает совместимый объект товара для корзины (t_store_loadProducts, t_store__collectProductDataByElement и endpoint getproduct в tilda-catalog-1.1.min.js) Суть и прямой ответ: Кастомная карточка нужна, когда дизайн нельзя собрать настройками стандартного блока: своя композиция, типографика и несколько независимых карточек на одной странице. Рисовать её можно в Zero Block, но название, цену, фото и наличие нельзя надёжно копировать из соседней готовой карточки. Устойчивое решение связывает каждый шаблон с uid товара, получает данные каталога и оставляет корзину родному механизму Тильды. Содержание разбора: ## Сначала проверьте стандартные блоки Своя карточка оправдана не потому, что Zero Block «профессиональнее». Штатный каталог уже умеет загружать товары, варианты, остатки, скидки, попап и корзину. Каждая заменённая часть становится вашей ответственностью при сдаче сайта. Оставайтесь на стандартной карточке, если задачу решают её сетка, отступы, CSS и настройки состава. Переходите к шаблону в Zero Block, когда клиент утвердил композицию, которую нельзя получить настройками, и эта разница действительно важна для проекта. ## Как устроена безопасная связка У каждой карточки есть два слоя: 1. Шаблон — элементы Zero Block, которыми управляет дизайнер. 2. Данные — один объект товара в явном JSON-списке. В шаблоне заранее отмечают роли: название, цена, старая цена, изображение, наличие и кнопка. После загрузки страницы модификация проходит по всем контейнерам, берёт соответствующий объект из JSON и заполняет только внутренние роли этого экземпляра. Так данные не зашиваются в визуальные элементы и тот же шаблон можно дублировать. Но JSON остаётся отдельным источником: автоматическая синхронизация с каталогом по uid в готовый MOD-180 не входит. ## Почему нельзя парсить соседнюю карточку Популярная заплатка — поставить стандартную карточку, скрыть её и скопировать из неё цену и картинку. У такого решения четыре слабых места: - данные могут появиться позже вашего скрипта; - класс внутреннего элемента меняется вместе с шаблоном Тильды; - фильтр или пагинация перерисовывает карточку; - при нескольких товарах легко скопировать данные первого во все шаблоны. Рантайм каталога уже обращается к данным через `getproductslist`, `getproduct` и `getproductsbyuid`, различая опубликованную страницу и edit/preview. Но это не публичный контракт MOD-180: готовая версия принимает явный JSON рядом с шаблоном. Если нужен единый каталог по uid, интеграцию проверяют отдельно на опубликованной странице и не копируют экранный текст готового блока. ## Несколько карточек на странице Фраза «работает только один раз» почти всегда указывает на глобальный id, `document.querySelector()` или одно общее состояние. В рабочей схеме каждый контейнер обрабатывается отдельно: ```js document.querySelectorAll('[data-mk-product-card]').forEach((card, index) => { const product = products[index]; const title = card.querySelector('[data-mk-role="title"]'); const price = card.querySelector('[data-mk-role="price"]'); // Данные из JSON записываются только в эту card. }); ``` Это не готовая интеграция — в примере намеренно нет выдуманного адреса API и своей корзины. Он показывает архитектуру: список экземпляров, локальный поиск внутри карточки и отдельные структурированные данные для каждого шаблона. ## Что оставить Тильде Кастомный внешний вид не требует заменять магазин. Родному рантайму лучше оставить: - выбранные варианты товара; - проверку остатка; - добавление совместимого объекта в корзину; - товарный попап, если он участвует в сценарии; - скидки, доставку и оформление заказа. Если мод рисует цену самостоятельно, но добавляет в корзину другой объект, посетитель увидит одно число в карточке и другое при оформлении. Поэтому [MOD-180](/mods/mod-180) ограничивает задачу шаблоном, явными данными и передачей покупки в родную корзину, а не создаёт параллельный магазин. ## Состояния, которые надо нарисовать заранее Дизайнеру нужны не только идеальные данные из макета. Подготовьте: - длинное название в две-три строки; - товар без изображения; - обычную и старую цену; - нулевой остаток; - ошибку загрузки; - состояние до появления данных; - активную и недоступную кнопку. Если Zero Block работает в `hug`, после подстановки длинного названия и картинки нужен пересчёт высоты. Иначе карточка наполнится правильно, но следующий блок наедет на неё. ## Проверка перед сдачей Поставьте на одну страницу минимум три разных товара и один товар дважды. Затем проверьте публикацию и preview, изменение цены в каталоге, отсутствие фото, нулевой остаток, повторную инициализацию и добавление в родную корзину. Клиенту оставьте простую инструкцию: где взять uid, куда вставить его в шаблон и какие элементы нельзя переименовывать. Карточка должна обновляться редактором каталога без участия разработчика — иначе дизайнерская свобода превратится в постоянную ручную поддержку. Частые вопросы по теме: - В: Можно взять данные из скрытого стандартного блока? О: Технически текст можно скопировать из DOM, но структура и момент отрисовки меняются. Для небольшого набора надёжнее передать структурированный JSON и явно заполнить роли шаблона; получение товара по uid требует отдельной интеграции с каталогом. - В: Нужно писать свою корзину для кастомной карточки? О: Нет. Дизайн карточки может быть своим, а добавление товара, варианты, остатки и оформление заказа должны оставаться совместимыми с родной корзиной. - В: Почему мод работает только у первой карточки? О: Обычно код использует один id или querySelector и останавливается на первом совпадении. Экземпляры нужно находить списком и хранить состояние отдельно. - В: MOD-180 уже готов к установке? О: Да, для карточек из явного JSON-списка и передачи покупки в родную корзину. Он не обещает автоматически читать каталог по uid, синхронизировать варианты или заменять штатную проверку остатков. ### Что можно изменить в корзине Тильды, не переписывая магазин URL: https://modkod.ru/articles/kastomnaya-korzina-tilda Рубрика: Пределы Тильды | Целевой запрос: «кастомная корзина тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Кастомная корзина не должна быть второй корзиной. Безопасная доработка читает штатный состав заказа, добавляет понятное правило или внешний слой оформления и отдаёт управление обратно Тильде. Если код сам хранит товары, считает окончательную сумму или отправляет платёж, он начинает дублировать каталог, скидки, доставку и интеграции — и ломается на первом новом варианте товара. Содержание разбора: ## Короткий ответ Кастомизируйте оболочку и недостающие правила. Не создавайте параллельное хранилище товаров и не отправляйте заказ в обход штатного оформления. ## Что можно менять - внешний вид выбранных элементов; - дополнительные пояснения; - минимальную сумму и кратность; - условия промокода до штатной серверной проверки; - свой расчёт параметров перед добавлением позиции; - отправку копии оформленного заказа во внешнюю систему. Каждая доработка должна знать момент пересчёта. Цена меняется после количества, варианта, скидки и доставки — проверка только при открытии быстро устареет. ## Что нельзя считать мелкой правкой Полностью своя корзина должна повторить структуру позиции, варианты, остатки, валюту, скидки, доставку, налоги, восстановление и платёжный переход. Это уже магазинное приложение, а не сниппет для дизайнера. ## Калькулятор как хороший пример MOD-185 считает параметры, но добавляет результат через `tcart__addProduct` как обычную позицию. В заявке остаются название, цена и опции, а дальнейшую сумму ведёт Тильда. Именно так модификация расширяет систему, не подменяя её. ## Приёмка Проверьте товар с вариантами, изменение количества, удаление, промокод, доставку, закрытие и повторное открытие корзины, ошибку оплаты. Итоговая сумма на кнопке, в заявке и на платёжной странице должна совпадать. Для клиента отдельно запишите, что находится в настройках Тильды, а что — в пользовательском коде. Иначе следующий дизайнер будет чинить родную корзину, не зная, что поверх неё работает правило. Частые вопросы по теме: - В: Можно полностью нарисовать корзину в Zero Block? О: Нарисовать интерфейс можно, но данные и оформление должны оставаться родными. Иначе придётся самостоятельно повторить опции, остатки, промокоды, доставку и оплату. - В: Можно изменить минимальную сумму и оптовые правила? О: Да, как отдельную доработку поверх штатного состава. Правило должно пересчитываться после количества, удаления, опций и промокода. ### Как сделать свой дизайн каталога и сохранить родную торговлю URL: https://modkod.ru/articles/kastomnyy-katalog-tilda Рубрика: Пределы Тильды | Целевой запрос: «кастомный каталог тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: У кастомного каталога есть два уровня. Безопасный — изменить композицию карточек, оставив родные данные, товарный попап, остатки и корзину. Дорогой — написать новую выдачу, фильтры и синхронизацию, где придётся повторить большую часть магазина. Для клиентского сайта начинайте с одной карточки Zero Block, связанной с устойчивым uid товара, и проверяйте весь путь до заказа. Содержание разбора: ## Короткий ответ Кастомизируйте представление, не создавая второй источник товарных данных. ## Три уровня задачи ### Настроить родной блок Сначала пройдите все варианты карточек, колонок, изображения и действия по клику. Часто необычный макет получается без кода, если не требовать пиксельного повтора концепта. ### Своя карточка, родные данные MOD-180 наполняет шаблон Zero Block из явного JSON-списка: название, цена, фотография и ссылка отделены от разметки, а кнопка использует родную корзину. Это разумная граница для небольшого набора карточек. Автоматическая загрузка из каталога по uid остаётся отдельной доработкой. ### Полностью своя выдача Фильтры, сортировка, пагинация, варианты, остатки, избранное, SEO и ошибки загрузки становятся вашей ответственностью. Такую работу нельзя продавать как «вставим скрипт за вечер». ## Несколько карточек на странице Каждый экземпляр должен иметь собственный uid и состояние. Глобальный id или переменная «текущий товар» приводит к классической ошибке: все шаблоны показывают последний загруженный товар. ## Приёмка Проверьте товар без изображения, длинное название, варианты, нулевой остаток, preview и опубликованную страницу. Добавьте три разных товара подряд и убедитесь, что в корзине сохранились правильные цена и опции. MOD-180 готов в ограниченном формате с явным JSON-источником. Если клиент должен менять товары только в каталоге Тильды, закладывайте отдельную синхронизацию и живой тест магазина, а не выдавайте локальный список за единый источник данных. Частые вопросы по теме: - В: Можно ли вывести данные товара в Zero Block? О: Да. Готовый MOD-180 наполняет размеченный шаблон из явного JSON-списка и передаёт покупку родной корзине. Автоматическая синхронизация по uid, варианты и остатки — отдельная интеграционная задача. - В: Стоит ли копировать название и цену из готовой карточки DOM-кодом? О: Нет. Разметка блока может измениться, а несколько карточек начнут путаться. Надёжнее получать структурированные данные каталога. ### Как добавить свой курсор и не испортить ссылки и кнопки URL: https://modkod.ru/articles/kastomnyy-kursor-tilda Рубрика: Как сделать | Целевой запрос: «кастомный курсор тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Кастомный курсор уместен как небольшой фирменный акцент на портфолио, но не должен заменять смысл интерфейса. Готовый MOD-012 рисует отдельное кольцо поверх системного указателя, реагирует на ссылки и кнопки и не запускается на устройствах без настоящего hover. Если движение в системе уменьшено, эффект тоже отключается — сайт остаётся полностью рабочим. Содержание разбора: ## Короткий ответ Используйте курсор как украшение, а не навигацию. Все кнопки и ссылки обязаны оставаться понятными, если мод не загрузился. ## Когда эффект работает Лучшие места — студийное портфолио, промостраница события, галерея или один экспериментальный экран. В магазине, длинной форме и личном кабинете движение быстро становится помехой. MOD-012 уже собран и проверен. Он работает на всей странице, поэтому CSS-класс секции не нужен. Второй похожий пункт, MOD-153, добавляет подпись у указателя и пока остаётся планом. ## Что не делать - не ставить важную подсказку только рядом с курсором; - не увеличивать задержку настолько, чтобы кольцо отставало от клика; - не включать постоянное движение при `prefers-reduced-motion`; - не считать телефон «неподдерживаемым» — там просто остаётся обычный интерфейс; - не подключать два курсора одновременно. ## Проверка Пройдите все ссылки мышью и клавиатурой. Убедитесь, что кольцо не перехватывает клики (`pointer-events: none`), не закрывает поля формы и исчезает при уходе мыши из окна. Затем полностью удалите код: страница должна выглядеть законченной и без него. Это лучший критерий декоративной модификации: она усиливает дизайн, но не держит его смысл в заложниках. Частые вопросы по теме: - В: Будет ли кастомный курсор работать на телефоне? О: Нет, и это правильно: у сенсорного экрана нет постоянной точки наведения. Интерфейс должен работать без эффекта. - В: Можно полностью скрыть системный курсор? О: Технически можно, но это ухудшает предсказуемость и доступность. Безопаснее оставить системный указатель или скрывать его только при доказанно исправном эффекте. ### Как сделать хлебные крошки для страниц и товаров URL: https://modkod.ru/articles/khlebnye-kroshki-v-tilda Рубрика: Как сделать | Целевой запрос: «хлебные крошки тильда» | Опубликовано: 12 августа 2026 Верификация: каталог открывает товар через getproduct, меняет историю страницы и сообщает о смене карточки событиями catalog:popupShowed и catalog:popupClosed; устойчивый источник категории для всех типов товарных страниц текущим снимком не доказан (t_store_openProductPopup, t_store_history_pushState и /api/getproduct/ в tilda-catalog-1.1.min.js; открытый вопрос M18 в plans/how-mods-work.md) Суть и прямой ответ: Хлебные крошки — это не декоративная строка «Главная / Услуги / Страница». Каждый промежуточный пункт должен вести на реальную страницу, а структурированные данные BreadcrumbList — повторять тот же путь. На обычном сайте дизайнер может собрать крошки блоком и ссылками без кода. В каталоге задача сложнее: текущий товар и его категория приходят из данных магазина, и ненадёжный скрипт легко оставляет название предыдущей карточки. Содержание разбора: ## Короткий ответ Для обычного сайта соберите крошки вручную: реальные ссылки на главную и раздел, текущая страница — текстом. Для каталога не копируйте один блок на все товары с заменой заголовка скриптом, пока не найден надёжный источник категории. Видимая цепочка и `BreadcrumbList` должны собираться из одних данных. ## Когда крошки действительно помогают Они полезны на проектах, где есть иерархия: - главная → услуги → отдельная услуга; - главная → блог → статья; - главная → каталог → категория → товар; - главная → объекты → конкретный объект. На лендинге из одной страницы крошки не нужны. Якорное меню лучше объясняет путь по секциям и не притворяется структурой страниц. ## Вариант без кода для обычного сайта Соберите строку в стандартном блоке или Zero Block: ```text Главная → Услуги → Дизайн сайта ``` Первые два пункта — настоящие ссылки. Последний — текущая страница, его не надо заставлять перезагружать самого себя. Для доступности используйте понятную подпись навигации и отметьте текущий пункт `aria-current="page"`, если инструмент позволяет задать атрибут. Не делайте всю цепочку одной текстовой ссылкой. На телефоне посетителю важно вернуться именно в раздел, а не только на главную. ## Сначала нарисуйте карту страниц До оформления составьте таблицу: | Страница | Родитель | Адрес родителя | | --- | --- | --- | | Дизайн сайта | Услуги | `/services` | | Интернет-магазин | Услуги | `/services` | | Статья о формах | Блог | `/articles` | Если для промежуточного уровня нет страницы, не включайте его только ради красивой глубины. Пункт «Направления» без адреса не помогает посетителю и не должен неожиданно появляться в микроразметке. ## Что такое BreadcrumbList Это структурированные данные, которые описывают последовательность пунктов и их позиции. Они не заменяют видимые крошки. Поисковик получает дополнительное описание того же маршрута, который человек видит на странице. Правило простое: - одинаковый порядок; - одинаковые названия; - одинаковые рабочие адреса; - позиции начинаются с единицы и не повторяются. Общий разбор JSON-LD и того, что Тильда генерирует сама, есть в статье [о микроразметке](/articles/mikrorazmetka-schema-org-tilda). ## Почему товары сложнее обычных страниц Каталог Тильды может открыть товар в попапе, изменить адрес через history API и загрузить данные отдельным запросом `getproduct`. При переходе между карточками часть разметки перерисовывается. Из этого следуют три требования к автоматическим крошкам: 1. Понимать, какой товар открыт **сейчас**, а не был открыт первым. 2. Получать его категорию из данных каталога, а не угадывать по заголовку. 3. Обновлять и видимую строку, и JSON-LD после `catalog:popupShowed`. В текущем снимке рантайма найден uid товара и путь загрузки, но не доказан единый источник категории для всех видов товарных страниц. Поэтому готовый [MOD-174](/mods/mod-174) принимает явную цепочку названий и адресов, а не притворяется универсальным автоматическим определителем категории. ## Почему нельзя брать категорию из URL Адрес может быть изменён вручную, товар может открываться в попапе, а языковая версия — иметь другой путь. Название категории из хлебных крошек тогда не совпадёт с данными магазина. Парсинг видимого заголовка тоже хрупок: дизайнер переименует класс, добавит перенос строки или поменяет шаблон карточки, и скрипт перестанет понимать текст. Надёжная модификация должна сначала доказать источник данных на живом магазине. ## Проверка перед сдачей Для ручных и автоматических крошек пройдите один маршрут: - прямой вход по адресу страницы или товара; - переход из категории; - открытие следующего товара без перезагрузки; - кнопки браузера «Назад» и «Вперёд»; - мобильная ширина и длинное название; - проверка каждой промежуточной ссылки; - совпадение видимого пути и JSON-LD. Клиенту передайте карту «страница → родитель». Тогда при создании нового раздела он понимает, какой блок копировать и какие два места обновлять, пока автоматический мод для каталога не прошёл живую проверку. Частые вопросы по теме: - В: Нужен ли код для крошек на обычных страницах? О: Нет. Соберите один блок со ссылками и адаптируйте его для нужных страниц. Код нужен для автоматической подстановки и структурированных данных. - В: Можно скрыть крошки и оставить только JSON-LD? О: Не стоит. Разметка должна описывать путь, который существует для посетителя. Скрытая выдуманная иерархия не помогает навигации и создаёт расхождение. - В: Откуда MOD-174 берёт категорию? О: Из явной настройки дизайнера «Название|адрес». Мод намеренно не угадывает категорию по URL или тексту карточки: такого устойчивого источника для всех вариантов каталога не доказано. - В: Крошки должны показывать текущую страницу ссылкой? О: Обычно текущий пункт оставляют текстом с aria-current, а ссылками делают предыдущие уровни. В BreadcrumbList адрес текущего пункта при этом допустим. ### Что умеет кабинет Тильды и когда нужен внешний сервис URL: https://modkod.ru/articles/lichnyy-kabinet-dlya-klientov-tilda Рубрика: Пределы Тильды | Целевой запрос: «как сделать личный кабинет на тильде» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Для курса, закрытых материалов и простого доступа по группам используйте кабинет участников Тильды. Для магазина есть кабинет покупателя с заказами и данными клиента. Но роли вроде «заказчик — исполнитель», переписка, статусы проекта, файлы и сложные права доступа требуют внешнего сервиса или отдельной разработки. Это не та задача, которую безопасно решить скриптом в T123. Содержание разбора: ## Короткий ответ Сначала назовите, что именно должен делать человек после входа. «Видеть уроки» — родной кабинет. «Управлять совместным проектом» — уже отдельная система. ## Два похожих кабинета Кабинет участников закрывает страницы для групп, даёт регистрацию и вход. [Официальная инструкция Тильды](https://help-ru.tilda.cc/membership) описывает группы доступа и платную регистрацию. Это хороший фундамент для курса, документов партнёров или закрытого клуба. Кабинет покупателя связан с магазином: заказы, адреса и покупки. Не обещайте клиенту функции одного кабинета, показав экран другого. ## Когда родного достаточно - один человек относится к одной или нескольким группам; - группа открывает набор страниц; - контент публикует администратор; - нет секретных данных, вычисляемых в браузере; - оплата только выдаёт доступ. ## Когда нужна отдельная разработка Если пользователь создаёт сущности, меняет статус работы, переписывается, загружает документы для другого пользователя или видит персональные расчёты, нужна серверная модель данных. Скрипт страницы можно изменить в инструментах разработчика, поэтому он не является проверкой прав. ## Как оценить задачу дизайнеру Нарисуйте три экрана: вход, пустой кабинет и кабинет с данными. Под каждым действием напишите, где хранятся данные и кто имеет право их менять. Если ответ «в localStorage» или «в скрытом блоке», это прототип, не клиентский кабинет. Перед продажей сверяйте текущие возможности и тарифы с официальной справкой: они меняются, а архитектурная граница остаётся — доступ проверяется не внешним видом страницы. Частые вопросы по теме: - В: Можно ли сделать закрытый курс на Тильде? О: Да. Кабинет участников поддерживает регистрацию и группы доступа к выбранным страницам, в том числе платный доступ. - В: Можно добавить свои роли в кабинет кодом? О: Интерфейс страницы можно дополнить, но права доступа должны проверяться на сервере. Роль, записанная только в браузере, не защищает данные. ### Сколько товаров выдерживает каталог и что проверить заранее URL: https://modkod.ru/articles/limity-kataloga-tilda Рубрика: Пределы Тильды | Целевой запрос: «сколько товаров можно загрузить в тильду» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: По текущей официальной справке каталог Тильды хранит до 5 000 товаров на Personal и до 50 000 на Business, а число разделов ограничено 1 000. Но формальный предел не отвечает на вопрос о скорости и удобстве управления. Перед стартом считайте варианты, частоту обновления остатков, объём импорта и число карточек, которые реально выводятся на одной странице. Содержание разбора: ## Короткий ответ Проверяйте не одно число товаров, а четыре масштаба: товары, варианты, разделы и обновления. Затем проектируйте выдачу отдельно от хранения. ## Текущие числа В [официальной инструкции каталога](https://help-ru.tilda.cc/online-store/catalog) на дату этой статьи указаны 5 000 товаров для Personal, 50 000 для Business и до 1 000 разделов. Тарифы и лимиты могут измениться — не переносите эти цифры в коммерческое предложение без повторной сверки. ## Что раздувает проект быстрее товаров Один товар может иметь десятки вариантов, несколько фотографий, характеристики, остатки и отдельные цены. Если остатки обновляются каждый час из учётной системы, задача сложнее каталога, который редактор меняет раз в месяц. Спросите клиента: - сколько товаров сейчас и через год; - сколько вариантов у среднего товара; - откуда приезжают цены и остатки; - кто исправляет ошибки импорта; - нужна ли история заказов вне Тильды; - сколько языков и валют. ## Хранение не равно отображению Не выводите тысячи карточек в одну страницу. Разбейте каталог на разделы, настройте поиск и фильтры, оставьте разумную порцию до подгрузки. Блок должен быстро дать человеку выбор, а не доказать, что база всё хранит. ## Когда Тильда перестаёт быть удобной Если бизнес требует сложных ролей, нескольких складов, индивидуальных цен, частых массовых обновлений и нетерпимого к задержкам учёта, оценивать нужно не дизайн карточки, а весь обмен данными. Возможно, Тильда останется витриной, а источником правды станет внешняя система. Частые вопросы по теме: - В: Какой лимит товаров в каталоге Тильды? О: На дату публикации официальная справка указывает до 5 000 товаров на Personal и до 50 000 на Business. Перед оценкой проекта проверьте актуальную страницу справки. - В: Значит 5 000 товаров можно вывести одним блоком? О: Нет. Ёмкость каталога и размер одной выдачи — разные вещи. На странице нужны фильтры, пагинация или ограниченный набор карточек. ### Модификация отвалилась в автолэйауте: что проверить дизайнеру URL: https://modkod.ru/articles/modifikatsiya-ne-rabotaet-v-avtoleyoute-tilda Рубрика: Не работает | Целевой запрос: «модификация не работает в автолейауте тильда» | Опубликовано: 12 августа 2026 Верификация: инлайновые координаты внутри автолэйаута не сдвинули элемент, атрибуты координат расходились с фактом, а hug-артборд вырос только после t396__updateAutoHeight; 18 проверок завершились без ошибок (modkit/tools/check-autolayout.mjs на снимке tilda.education с 21 flex-артбордом) Суть и прямой ответ: Если модификация работала в обычном Zero Block и перестала после перевода элементов в автолэйаут, проблема чаще всего не в порядке блоков с кодом. Автолэйаут меняет устройство макета: элементы становятся частью flex-потока, старые координаты перестают описывать их реальное место, а раскрывшийся контент не всегда увеличивает секцию без отдельного пересчёта. Это можно проверить на опубликованной странице до переписывания дизайна. Содержание разбора: ## Короткий ответ В автолэйауте не пытайтесь лечить мод случайными `top`, `left` и дополнительным `transform`. Сначала выясните, на чём он построен. Если код ищет содержимое элемента, он может пережить flex. Если читает координаты из редактора или ждёт, что секция сама подрастёт, его надо адаптировать. Для дизайнера это важная граница: внешний вид в редакторе может быть тем же, а способ, которым браузер раскладывает элементы, уже другой. ## Что меняет автолэйаут Обычный элемент Zero Block привязан к артборду координатами. У него есть верхняя и левая позиция, и многие старые скрипты используют эти числа как карту секции. Во flex-режиме место задают порядок элементов, направление, промежутки и размеры контейнера. Координата из редактора остаётся в данных проекта, но перестаёт быть надёжным ответом на вопрос «где элемент сейчас». На проверочном стенде инлайновые координаты `400px` дали фактический сдвиг `0.0 × 0.0 px`. Это не ошибка CSS: flex-правила Тильды намеренно сильнее старой абсолютной раскладки. Ещё нагляднее данные редактора расходятся с браузером. Из 110 сравнений `data-field-top-value` не совпал с реальным положением 82 раза; худшая пара — `324` в атрибуте и `34` пикселя по факту. Поэтому расчёт «возьмём сохранённый top и подвинем всё, что ниже» в автолэйауте нельзя считать безопасным. ## Листья и группы — не одно и то же После публикации Тильда создаёт два близких типа узлов: - конечные элементы с содержимым — текст, кнопка, картинка и их `.tn-atom`; - flex-группы, которые организуют раскладку других элементов. На стенде было 162 узла с признаком flex: 106 конечных элементов и 56 групп. Скрипт, который хватается за каждый `.t396__elem-flex` как за кнопку или карточку, неизбежно зацепит контейнеры. Надёжнее назначать собственный CSS-класс именно тем элементам, с которыми должен работать мод. Проверять структуру надо в консоли опубликованной страницы, потому что классы расставляет рантайм Тильды: ```js const flexNodes = [...document.querySelectorAll('.t396__elem-flex')]; const leaves = flexNodes.filter((node) => node.classList.contains('t396__elem')); console.log({ all: flexNodes.length, leaves: leaves.length }); ``` Этот код ничего не меняет. Он только показывает, сколько на странице flex-узлов и сколько среди них конечных элементов. ## Почему аккордеон раскрывается, но секция не растёт Раскрытие панели и высота Zero Block — две отдельные задачи. Можно успешно показать скрытый текст, но оставить артборду прежнее число пикселей. Тогда контент обрежется или наедет на следующий блок. На стенде высота hug-артборда прошла три состояния: 1. До изменения — 353 пикселя. 2. После добавления 300 пикселей контента — всё ещё 353. 3. После `t396__updateAutoHeight` — 647 пикселей. Разница показывает правильную ответственность мода. Он должен не угадывать новую высоту и не писать её руками, а после раскрытия попросить Тильду пересчитать текущий hug-артборд. Затем рантайм сам обновит атрибуты, перерисует секцию и отправит событие `zero:height-changed`. Именно на этой границе построен [MOD-184](/mods/mod-184): независимые группы аккордеона живут во flex-потоке, а секция пересчитывается штатным способом. ## Проверка чужой модификации без переписывания кода Откройте опубликованную страницу и пройдите короткий список: 1. У проблемного элемента есть ваш служебный класс, указанный в инструкции? 2. Этот класс стоит на конечном элементе, а не на общей flex-группе? 3. Мод действительно запустился, или в консоли есть первая ошибка раньше него? 4. После раскрытия изменилась высота содержимого? 5. У артборда включён `hug`, и изменилось ли его значение высоты? 6. Поломка повторяется после загрузки шрифтов и картинок, а не только в первый кадр? Если элемент открывается, но следующий блок наезжает, искать ошибку в клике уже не нужно — сломан пересчёт высоты. Если не открывается только один экземпляр, проверьте группы и повторяющиеся идентификаторы. Если все экземпляры получают одинаковое состояние, код, скорее всего, не различает независимые группы. ## Как ставить задачу разработчику Вместо «мод не работает в автолэйауте» передайте четыре факта: - адрес опубликованной страницы; - номер записи Zero Block; - класс элемента из инструкции; - что именно не произошло: клик, раскрытие, независимая группа или рост секции. Так разработчик увидит не скриншот результата, а точку отказа. И отдельно зафиксируйте требование: мод не должен возвращать элементы к абсолютным координатам — иначе он исправит аккордеон ценой разрушенного автолэйаута. Частые вопросы по теме: - В: Почему перестановка блока T123 не чинит мод в автолэйауте? О: Если код уже запустился, его место на странице не вернёт старую геометрию. Автолэйаут раскладывает элементы через flex, поэтому чтение и запись top или left остаются неверным способом управления положением. - В: Как понять, что элемент действительно находится в автолэйауте? О: Проверять надо опубликованную страницу: после запуска Тильды узлы получают класс t396__elem-flex. В сохранённом HTML или редакторе итоговых классов может ещё не быть. - В: Почему раскрытый текст обрезается снизу? О: Содержимое выросло, а числовая высота артборда осталась прежней. В режиме hug после изменения нужно вызвать штатный t396__updateAutoHeight для текущего артборда. - В: Любая модификация несовместима с автолэйаутом? О: Нет. Моды, которые работают с содержимым конечных элементов и не строят логику на top, left и старой высоте секции, могут работать нормально. ### Как найти место, где потерялась заявка с сайта URL: https://modkod.ru/articles/ne-prihodyat-zayavki-s-formy-tilda Рубрика: Не работает | Целевой запрос: «не приходят заявки с формы тильда на почту» | Опубликовано: 12 августа 2026 Верификация: форма сообщает отдельные события до отправки, после подтверждённого успеха и после ошибки; заявка, уже видимая в CRM Тильды, доказывает прохождение формы и серверного приёма, поэтому дальнейший обрыв ищется в конкретном приёмщике (tildaform:beforesend, tildaform:aftersuccess и tildaform:aftererror в tilda-forms-1.0.min.js; порядок диагностики A9 в plans/articles.md) Суть и прямой ответ: Фраза «заявки не приходят» скрывает несколько разных поломок. Форма может не отправляться вообще, заявка может попасть в CRM Тильды и не дойти до почты или пройти в почту, но потеряться в таблице. Диагностика начинается с одной уникальной тестовой заявки и проверки каждого звена по порядку. Если пересобирать все интеграции сразу, место обрыва исчезнет вместе с доказательствами. Содержание разбора: ## Короткий ответ Отправьте одну заявку с уникальной меткой, запишите точное время и проверьте её в таком порядке: сообщение на сайте → CRM Тильды → конкретный приёмщик → конечный сервис. Остановитесь на первом месте, где заявки нет. Именно там находится обрыв. ## Подготовьте тест, который нельзя спутать с клиентом Используйте понятную метку, например: ```text TEST-1208-1915 — форма «Консультация», страница /services ``` Добавьте её в имя или комментарий, если поле позволяет. Запишите: - опубликованный адрес страницы; - название или id блока с формой; - время отправки с часовым поясом; - какой приёмщик должен получить заявку; - что показал сайт после кнопки. Не отправляйте пять одинаковых «Тест» подряд. В почте и CRM они выглядят как дубли, а время не помогает отличить одну попытку от другой. ## Цепочка из четырёх звеньев | Где проверяем | Что означает результат | | --- | --- | | Форма на странице | поля прошли локальную проверку и началась отправка | | Сообщение об успехе | сервер подтвердил приём формы | | CRM Тильды | заявка сохранена у платформы | | Почта, Telegram, таблица, webhook | конкретная интеграция доставила данные дальше | Если заявка есть в CRM, но отсутствует на почте, повторная верстка формы не нужна. Проблема уже после формы: адрес, подтверждение подключения, фильтр почты, доступ таблицы или ответ webhook. Если заявки нет даже в CRM, идите назад: опубликована ли последняя версия страницы, подключён ли приёмщик именно к этой форме, проходит ли валидация и не показывает ли браузер ошибку сети. ## Сценарий 1: кнопка ничего не делает Проверьте обязательные поля и сообщения под ними. На телефоне ошибка может оказаться выше видимой области, особенно внутри длинного попапа. Затем откройте опубликованную страницу в приватном окне. Редактор и предпросмотр не заменяют боевой адрес: в них другие режимные ветки, а подключённые сервисы могут вести себя иначе. Если на странице стоит пользовательский код, временно не удаляйте его целиком. Зафиксируйте копию и отключайте по одному блоку T123, иначе невозможно понять, какой из них перехватывает кнопку. ## Сценарий 2: успех есть, в CRM пусто Убедитесь, что смотрите нужный проект и нужный период. Затем проверьте, не является ли показанное «Спасибо» отдельной анимацией по клику. Настоящий успех должен следовать за ответом формы, а не за нажатием кнопки. Тильда даёт три разных события: - `tildaform:beforesend` — процесс начался; - `tildaform:aftersuccess` — сервер подтвердил заявку; - `tildaform:aftererror` — отправка завершилась ошибкой. Если дизайнерская плашка открывается на click, она может показывать успех даже после `aftererror`. Подробно состояния разобраны в материале [про результат формы](/articles/chto-pokazat-posle-otpravki-formy-tilda). ## Сценарий 3: в CRM есть, на почте нет Это уже не поломка полей. Проверьте: 1. Точный адрес получателя без пробелов и старого домена. 2. Подтверждено ли подключение приёмщика в проекте. 3. Папки «Спам», «Рассылки» и правила сортировки. 4. Не блокирует ли корпоративный домен письма отправителя. 5. Есть ли у клиента доступ к тому почтовому ящику, который указан в настройках. Не просите клиента «проверить почту» без метки и времени. Передайте ему строку `TEST-1208-1915` — тогда поиск даёт однозначный ответ. ## Сценарий 4: один сервис получает, другой нет Если письмо пришло, а строка в таблице не появилась, форма и сервер работают. Проверяйте авторизацию таблицы, выбранный лист, владельца подключения и ошибку конкретного приёмщика. То же правило работает для Telegram и webhook. Не отключайте рабочую почту ради ремонта таблицы: она остаётся контрольным каналом и доказывает, что новые тесты действительно доходят. ## Что передать клиенту Для каждой уникальной формы запишите: - страницу и назначение формы; - список подключённых получателей; - владельца каждого аккаунта; - где искать резервную копию заявки; - дату последнего успешного теста; - текст, который видит посетитель при успехе и ошибке. После передачи отправьте тест уже вместе с клиентом. Он должен сам найти заявку в своём сервисе. Зелёная надпись на экране дизайнера не является приёмкой формы. Частые вопросы по теме: - В: Если заявка есть в CRM Тильды, форма работает? О: Основной путь формы и приём на стороне Тильды уже пройдены. Если письма или строки в таблице нет, проверяйте именно соответствующий приёмщик и его доступ. - В: Почему на экране есть «Спасибо», а письма нет? О: Сообщение подтверждает ответ формы, но не доставку письма сторонним сервисом. Сначала найдите заявку в CRM, затем проверьте журнал и настройки почты. - В: Нужно отправлять тест из каждой формы? О: Да, если формы отличаются блоком, страницей или подключёнными приёмщиками. Одна работающая форма в подвале не доказывает работу формы в попапе. - В: Поможет ли ещё один скрипт отправки? О: Обычно нет. Он создаст второй канал, дубли и новые секреты на странице, но не объяснит, почему перестал работать уже подключённый приёмщик. ### Как правильно показать товар без остатка в каталоге Тильды URL: https://modkod.ru/articles/net-v-nalichii-v-tilde Рубрика: Как сделать | Целевой запрос: «нет в наличии тильда» | Опубликовано: 12 августа 2026 Верификация: при нулевом количестве каталог удаляет прежнее сообщение, печатает словарь «Нет в наличии», отключает кнопки заказа и отправляет отдельное событие; при доступном варианте возвращает кнопку и её исходную подпись (`t_store_product_triggerSoldOutMsg` и события `tStoreSoldOut`, `tStoreAvailable` в `tilda-catalog-1.1.min.js`) Суть и прямой ответ: Для обычного «Нет в наличии» отдельная модификация не нужна. Каталог Тильды уже умеет увидеть нулевой остаток, заменить подпись кнопки и запретить заказ. Код имеет смысл только для следующего шага: предложить похожий товар, открыть попап или собрать заявку «Сообщите, когда появится», не притворяясь при этом, что товара снова можно купить. Содержание разбора: «Товар закончился» — не декоративная плашка. Правильное состояние должно решить две задачи одновременно: объяснить посетителю, почему покупка недоступна, и не позволить добавить отсутствующий товар в корзину. Если сделать только красивый ярлык, вторая задача останется открытой. ## Короткий ответ Поставьте нулевой остаток у товара или конкретной торговой вариации, обновите каталог и опубликуйте страницу. Тильда сама заменит подпись на «Нет в наличии» и отключит кнопку заказа. Для своего действия — лист ожидания, попап или похожий товар — нужна отдельная надстройка, которая не вмешивается в остаток. ## Что уже делает каталог Тильды Штатный код не просто меняет текст. При недоступном варианте он: 1. убирает прежнее сообщение о наличии; 2. добавляет «Нет в наличии» рядом с ценой или на кнопку; 3. отключает ссылки заказа; 4. сообщает странице событием, что товар недоступен. Когда посетитель выбирает доступный вариант, каталог выполняет обратный путь: снимает блокировку, возвращает обычную подпись кнопки и сообщает, что товар снова доступен. Поэтому базовый сценарий уже целостный. Делать второй ярлык поверх него не только лишнее — две надписи могут разойтись после смены цвета или размера. ## Как настроить без кода Для товара без вариантов путь короткий: 1. Откройте товар в каталоге. 2. Найдите учёт количества или остатка. 3. Поставьте ноль для недоступного товара. 4. Сохраните товар, обновите блок каталога и опубликуйте страницу. Для товара с цветами, размерами или комплектациями проверяйте каждую торговую вариацию. Остаток относится не к слову «синий» вообще, а к продаваемой комбинации — например, «синий + размер M». Удобно выписать варианты перед заполнением: | Вариант | Остаток | Что увидит покупатель | | ---------- | ------: | ------------------------------- | | Синий, M | 0 | «Нет в наличии», заказ отключён | | Синий, L | 3 | Обычная кнопка покупки | | Красный, M | 1 | Обычная кнопка покупки | Так легче заметить пропущенную комбинацию, чем перебирать выпадающие списки на глаз. ## Если сообщение появилось ошибочно Ложное «Нет в наличии» — повод найти причину, а не поставить поверх свою плашку. Проверьте по очереди: **Остаток конкретной вариации.** У товара в целом количество может быть, а у выбранного цвета и размера — ноль. **Полноту комбинаций.** Если часть сочетаний не создана, каталог не обязан считать их доступными. **Сохранение товара и публикацию страницы.** Изменение в каталоге не всегда уже видно на опубликованной странице. Обновите блок и откройте адрес заново. **Кнопку заказа.** Штатная механика ищет обычное действие заказа. Если карточка пересобрана своей кнопкой и нестандартной ссылкой, её поведение нужно проверять отдельно: внешний вид ещё не доказывает, что товар нельзя заказать. **Внешний учёт остатков.** Если данные приходят из складской системы, источник истины находится не в дизайне страницы. Синхронизацию нельзя починить новым ярлыком на карточке. ## Когда действительно нужна модификация Штатный сценарий заканчивается словами «Нет в наличии». Для магазина это часто тупик: человек хотел товар, но ему не предложили следующего действия. MOD-168 собран для трёх понятных вариантов: - открыть форму «Сообщить о поступлении»; - показать попап с заменой или другим размером; - перевести к подборке похожих товаров. Мод не должен сам решать, есть товар или нет. Он получает уже готовый штатный сигнал Тильды: недоступно — добавляет альтернативное действие; доступно — убирает его и возвращает обычную кнопку. Это важная граница. Остаток принадлежит каталогу или складской системе. Код на странице может только правильно отреагировать, но не имеет права объявлять товар доступным. ## Как выбрать действие без лишней сложности **Лист ожидания** подходит редким поступлениям и товарам с повторным спросом. В форме достаточно контакта и названия варианта; обещать дату, которой нет, не нужно. **Похожий товар** лучше для постоянного ассортимента, где у позиции есть замена. Ссылка должна вести сразу к подходящей подборке, а не на главную каталога. **Попап** уместен, если выбор нужно объяснить: другой размер, предзаказ, изготовление под заказ. В нём одно главное действие лучше трёх конкурирующих кнопок. ## Проверка после публикации Проверьте не одну карточку, а переходы между состояниями: - недоступный товар показывает одно понятное сообщение; - кнопка покупки действительно не добавляет его в корзину; - доступный вариант того же товара покупается как обычно; - возврат к недоступному варианту снова выключает заказ; - закрытие и повторное открытие попапа не создаёт вторую кнопку; - на телефоне сообщение не перекрывает цену и выбор варианта; - форма ожидания получает название товара и выбранный вариант. Если нужен только честный запрет покупки, остановитесь на штатной функции. Если нужно полезное продолжение после запрета — тогда появляется задача для MOD-168. Частые вопросы по теме: - В: Нужен ли код для надписи «Нет в наличии»? О: Нет. При корректно заданном нулевом остатке каталог Тильды сам показывает сообщение и отключает заказ. Сначала настройте остатки и проверьте опубликованную карточку. - В: Почему один цвет продаётся, а другой показывает «Нет в наличии»? О: У торговых вариаций остатки отдельные. Для комбинации «синий, M» может стоять ноль, а для «синий, L» — положительное число. Это нормальное поведение, если количества заполнены именно так. - В: Можно заменить сообщение кнопкой «Сообщить о поступлении»? О: Да, но это уже дополнительный сценарий. Он должен реагировать на штатный признак отсутствия, не менять остаток и не включать покупку. Для этого запланирован MOD-168. - В: Что делать, если «Нет в наличии» появилось ошибочно? О: Не закрывать проблему ярлыком или новым кодом. Проверьте остаток каждой торговой вариации, выбранную комбинацию опций, сохранение товара и публикацию страницы. Модификация поверх неверных данных только спрячет причину. ### Как ограничить промокод по сумме и товарам URL: https://modkod.ru/articles/ogranicheniya-promokoda-v-tilde Рубрика: Пределы Тильды | Целевой запрос: «как ограничить промокод в тильде» | Опубликовано: 12 августа 2026 Верификация: кнопка родного поля вызывает t_input_promocode__applyPromoCode, код проверяется POST-запросом к payment/promocode, один активный объект хранится в window.tcart.promocode, а итог считает tcart__calcPromocode (tilda-promocode-1.0.min.js, tilda-cart-1.1.min.js и разбор M1 в plans/how-mods-work.md) Суть и прямой ответ: Промокод в Тильде уже проходит серверную проверку и пересчитывает корзину, поэтому писать второй механизм скидки не нужно. Пользовательский код полезен только до активации: проверить минимальную сумму, наличие нужного товара или срок кампании и объяснить отказ рядом с полем. Правило «один раз на человека» браузер доказать не может — другой браузер, инкогнито и очистка данных делают посетителя новым. Содержание разбора: ## Короткий ответ Оставьте проверку кода и расчёт скидки Тильде. Модификация может добавить условия по текущей корзине: минимальную сумму, обязательный или запрещённый товар, период кампании. Неподделываемое «один раз на покупателя» требует сервера. ## Разделите три разных ограничения | Задача | Где решается | | --- | --- | | Код существует и ещё действителен | сервер промокодов Тильды | | В корзине нужная сумма или товар | браузер до активации | | Этот человек уже использовал код | сервер с историей покупателя | Если смешать их в одном скрипте, он начнёт сам считать скидку и спорить с корзиной. После изменения количества, динамической скидки или доставки цифры разойдутся. ## Что Тильда уже делает Родное поле содержит `.t-inputpromocode` и кнопку `.t-inputpromocode__btn`. Нажатие запускает `t_input_promocode__applyPromoCode`, а проверка уходит на серверный адрес `payment/promocode/` вместе с id проекта. Успешный ответ попадает в `window.tcart.promocode`. Затем `tcart__calcPromocode` пересчитывает итог с учётом обычной и динамической скидки. Второй активный объект код не записывает — рантайм сообщает, что промокод уже был активирован. Отсюда правило для дизайнерского решения: не подменять эти шаги. Проверить своё условие, показать понятное объяснение и при успехе пропустить родную активацию. ## Почему проверка в preview вводит в заблуждение В режиме редактора и предварительного просмотра серверная функция выходит раньше запроса. В словаре рантайма даже есть отдельное сообщение: функциональность активации надо проверять после публикации. Для теста создайте: 1. отдельный промокод с небольшим лимитом; 2. товар или набор товаров для тестовой корзины; 3. опубликованную скрытую страницу; 4. таблицу ожидаемых результатов. Не проверяйте боевой код клиента десятком случайных заказов — вы потратите его общий лимит и смешаете тесты с реальными продажами. ## Условия, которые можно проверить в браузере ### Минимальная сумма Перед активацией сравнить актуальную сумму товаров с порогом. Надо заранее решить, учитывается ли доставка и уже применённая динамическая скидка. Фраза «от 5000 ₽» без этого правила двусмысленна. ### Наличие конкретного товара Проверять uid или sku в `window.tcart.products`, а не видимый заголовок карточки. Название клиент может изменить, идентификатор остаётся частью данных корзины. ### Запрещённые сочетания Например, код не действует одновременно с подарочным сертификатом. Отказ должен называть конкретную причину и способ продолжить: убрать позицию или оформить без промокода. ### Период кампании Дата в браузере подходит как дружелюбная предварительная проверка, но не как защита: часы пользователя можно изменить. Окончательный срок должен контролировать сервер, который выдаёт промокод. ## Почему localStorage — не «один раз на человека» Хранилище узнаёт браузер, а не человека. Ограничение исчезнет, если посетитель: - откроет другой браузер или устройство; - включит приватный режим; - очистит данные сайта; - оформит заказ от другого домена. Такой флаг полезен против случайного повторного нажатия, но его нельзя продавать как защиту бюджета скидок. Для строгого правила нужна история заказов на сервере. [MOD-175](/mods/mod-175) поэтому обещает только проверяемую часть: условия по корзине перед штатной серверной активацией. Расчёт скидки и идентификация покупателя в мод не входят. ## Чек-лист сдачи акции клиенту - Точный список разрешённых товаров зафиксирован по uid или sku. - Указано, какая сумма сравнивается с порогом. - Ошибка объясняет, что покупателю сделать дальше. - Тест проведён на опубликованной странице. - Клиент знает общий лимит и срок промокода. - Правило «один раз» не заявлено без серверной проверки. Так дизайнер сдаёт не поле с загадочным кодом, а воспроизводимый сценарий акции. Частые вопросы по теме: - В: Можно сделать промокод одноразовым для каждого человека? О: Надёжно — только на сервере, где есть аккаунт, заказ или другой устойчивый идентификатор. localStorage защищает лишь от случайного повторения в одном браузере. - В: Почему промокод не проверяется в редакторе? О: Серверная активация отключена в edit и preview. Проверять нужно на опубликованной странице тестовым кодом и тестовой корзиной. - В: Нужно ли скрипту самому считать скидку? О: Нет. После локальной проверки условий код надо передать штатной активации, чтобы сумму, динамические скидки и итог продолжала считать Тильда. - В: Можно ограничить код конкретными товарами? О: Можно проверить состав текущей корзины до активации. Но окончательная валидность самого промокода и размер скидки всё равно остаются серверу Тильды. ### Что умеет версия для слабовидящих и чего она не исправит URL: https://modkod.ru/articles/panel-dostupnosti-v-tilde Рубрика: Пределы Тильды | Целевой запрос: «версия для слабовидящих на тильде» | Опубликовано: 12 августа 2026 Верификация: в исследованном рантайме отдельный skip-link и ловушка фокуса попапа есть, но в файлах каталога, корзины и избранного не найдено ни одного aria-атрибута; визуальная панель не может восстановить семантику этих компонентов (tilda-skiplink-1.0.min.js, tilda-popup-1.0.min.js и подсчёт M24 в plans/how-mods-work.md) Суть и прямой ответ: Кнопка «Версия для слабовидящих» может дать посетителю крупнее текст, контрастную тему, увеличенные интервалы и режим без изображений. Но она не превращает недоступный сайт в доступный: у формы всё ещё нужны подписи, у картинок — осмысленные alt, у меню — клавиатурный маршрут, а у контента — правильные заголовки. Панель полезна как дополнительный инструмент, а не как формальная галочка или замена проверки проекта. Содержание разбора: ## Короткий ответ Панель полезна для персональных визуальных настроек, но не является доказательством доступности сайта. Сначала исправьте контент, клавиатуру и формы. Затем добавляйте крупный текст, контраст, интервалы и отключение изображений как дополнительный режим. ## Два разных слоя работы ### Слой 1: сайт должен работать сам - Заголовки идут в понятном порядке. - Ссылки и кнопки имеют осмысленные названия. - Формы связаны с подписями и ошибками. - Содержательные изображения имеют alt. - Весь сценарий доступен клавиатурой. - Фокус виден, а попап не оставляет его за собой. Эти вещи нельзя добавить глобальным фильтром или размером шрифта. ### Слой 2: посетитель настраивает представление - увеличивает текст ступенями; - включает светлую или тёмную контрастную тему; - увеличивает межбуквенный и межстрочный интервалы; - скрывает декоративные изображения; - сбрасывает все изменения. Именно второй слой относится к панели. ## Что Тильда уже делает частично В снятом рантайме есть отдельный skip-link для перехода к содержимому и функция `t_popup__trapFocus`, которая удерживает фокус в родном попапе. Это полезные кирпичи, но они не охватывают весь проект. Проверка файлов каталога, корзины и избранного дала ноль `aria-*` атрибутов. Это не означает, что каждый их элемент недоступен, но означает важную границу: панель контраста не добавит отсутствующие связи и роли. Компоненты надо проверять по реальному поведению. ## Как должна работать аккуратная панель Одна кнопка открывает одну панель. Настройки меняют классы или CSS-переменные на `html`, а не переписывают inline-стиль каждого блока. Тогда режим можно полностью сбросить и он меньше спорит с адаптивами Тильды. Выбор сохраняется между страницами в `localStorage`. Вместе с данными нужна версия схемы: если через год названия режимов изменятся, старое значение можно безопасно сбросить, а не получить смешанную тему. Панель должна появляться в DOM один раз, независимо от количества T123. Кнопка и элементы управления получают видимый фокус и понятные названия. Закрытие возвращает фокус к кнопке. ## Почему «увеличить всё» не работает Увеличение `font-size` только на `body` не гарантирует результат. Часть размеров в Zero Block задана отдельно, кнопки могут иметь фиксированную высоту, а текст — обрезку. При максимальном режиме надо проверять реальную страницу: - не исчезла ли подпись кнопки; - не перекрыл ли текст соседний элемент; - можно ли прокрутить попап до конца; - не появился ли горизонтальный скролл; - осталась ли форма отправляемой. Сжимать увеличенный текст обратно ради исходного макета нельзя. Если контейнер не вмещает его, исправляется контейнер. ## Режим без изображений Не удаляйте изображения из DOM. Достаточно визуально скрыть декоративные и сохранить возможность вернуть их сбросом. Содержательное изображение может нести информацию, поэтому рядом должен существовать эквивалентный текст — панель его не придумает. Фоновые картинки особенно опасны: у них нет `alt` по определению. Если без фона пропадает смысл первого экрана, проблема находится в исходном дизайне. ## Чего нельзя обещать клиенту Не называйте установку панели аудитом, сертификатом или автоматическим соответствием какому-либо стандарту. Требования зависят от проекта и контекста, а проверяется весь пользовательский путь. [MOD-177](/mods/mod-177) поэтому называется «Панель визуальной доступности». В его границу входят настройки представления и их сохранение. Исправление контента, семантики и юридическая оценка туда не входят. ## Проверка перед передачей 1. Пройдите всю страницу клавишей Tab. 2. Проверьте системный zoom 200% без панели. 3. Включите максимальный текст и интервалы. 4. Откройте меню, форму, попап, каталог и корзину. 5. Проверьте светлую и тёмную контрастные темы. 6. Отключите изображения и убедитесь, что смысл сохранился. 7. Перейдите на другую страницу и выполните полный сброс. В отчёте клиенту разделяйте найденные дефекты сайта и возможности панели. Это сохраняет честный объём работы и не превращает одну кнопку в обещание за весь проект. Частые вопросы по теме: - В: Панель делает сайт полностью доступным? О: Нет. Она меняет визуальное представление, но не исправляет структуру заголовков, подписи полей, alt, порядок фокуса и работу клавиатурой. - В: Можно обещать соответствие стандарту после установки? О: Нет. Соответствие определяется всем сайтом и способом проверки, а не наличием одной кнопки. Для такого заявления нужен отдельный аудит. - В: Нужно ли отключать системный zoom браузера? О: Нет. Посетитель должен сохранить возможность масштабировать страницу своим браузером. Панель добавляет варианты, а не отбирает системные. - В: Что проверить первым делом без модификации? О: Пройти сайт клавишей Tab, увеличить масштаб до 200%, проверить подписи форм, alt содержательных картинок и видимость фокуса. ### Как связать языковые версии сайта и не отправлять всех на главную URL: https://modkod.ru/articles/pereklyuchatel-yazyka-v-tilde Рубрика: Как сделать | Целевой запрос: «переключатель языка тильда» | Опубликовано: 12 августа 2026 Верификация: язык проекта хранится в data-tilda-project-lang и читается рантаймом для системных словарей; это значение не создаёт пары страниц, hreflang и отдельную навигацию между версиями (`window.browserLang`, `window.tStoreBrowserLang` в `tilda-scripts-3.0.min.js` и `tilda-catalog-1.1.min.js`, исследование A17 в `plans/articles.md`) Суть и прямой ответ: Переключатель языка — не две буквы в углу, а карта соответствий между страницами. Если посетитель читает услугу на русском, кнопка EN должна открыть ту же услугу на английском, а не главную. Дизайнеру не нужно писать роутер: сначала собираются пары страниц и обычные ссылки, затем небольшой мод может синхронизировать язык документа, текущий пункт и сохранённый выбор. Содержание разбора: Мультиязычный сайт часто начинают с шапки: рисуют RU / EN, копируют страницу и только потом решают, куда ведут две ссылки. Для лендинга из одной страницы это ещё можно исправить вручную. На сайте услуг из двадцати страниц такая схема быстро превращается в список случайных переходов. ## Короткий ответ Сначала создайте отдельные страницы каждого языка и таблицу их соответствий. Сделайте переключатель обычными ссылками, которые работают без JavaScript. После этого модификация может подсветить текущий язык, поставить `lang` и помнить выбор. Она не переводит контент и не заменяет SEO-настройку языковых версий. ## Начните не с кнопки, а с карты страниц Для небольшого сайта достаточно простой таблицы: | Русская версия | Английская версия | | --- | --- | | `/` | `/en/` | | `/services/` | `/en/services/` | | `/contacts/` | `/en/contacts/` | | `/portfolio/project-a/` | `/en/portfolio/project-a/` | Эта таблица отвечает на главный вопрос переключателя: куда вести с текущей страницы. Если пары нет, решение тоже нужно записать — скрыть язык, оставить текущую страницу или вести на языковую главную. Не оставляйте выбор на усмотрение кода. Скрипт не знает, является ли `/portfolio/coffee-shop/` парой для `/en/cases/cafe/`, если вы не сказали ему об этом явно. ## Что можно сделать без кода Для сайта из нескольких страниц соберите переключатель в меню или Zero Block и назначьте каждой кнопке обычный адрес пары. У ссылки должен быть настоящий `href`, а не только действие по клику. Преимущества простого варианта: - работает, даже если JavaScript не загрузился; - адрес видно и можно проверить в редакторе; - клиент может заменить ссылку самостоятельно; - браузерная кнопка «Назад» ведёт себя ожидаемо. Если страниц немного, это уже готовое решение. Модификация не обязательна. ## Что означает язык проекта Тильда хранит язык проекта в атрибуте `data-tilda-project-lang`. Её скрипты читают это значение для части системных словарей — например, подписей магазина. Но одна настройка проекта не создаёт структуру мультиязычного сайта. Она не решает автоматически: - какая русская страница соответствует английской; - куда вести из портфолио или статьи; - какие адреса указать в `hreflang`; - какую страницу 404 показывать для языка; - как перевести свои тексты, формы и сообщения. Отдельно проверяйте корзину, поиск и поля адреса: часть подсказок может зависеть от внешнего сервиса или браузера, а не только от языка видимого контента. ## Где нужен MOD-170 Для большого клиентского сайта поддерживать десятки ссылок вручную неудобно. MOD-170 задуман как один слой над уже готовой структурой: - берёт явную карту пар страниц; - оставляет посетителя в том же разделе; - ставит языку документа правильный `lang`; - подсвечивает текущий пункт RU или EN; - помнит сделанный выбор там, где пара существует. Мод не подменяет тексты через JavaScript. Такой «перевод» плохо редактируется, не виден клиенту как отдельная страница и создаёт проблемы с поиском. MOD-170 уже собран: языковые ссылки размечаются `data-mk-lang`, остаются обычными ссылками без JavaScript, а мод добавляет `lang`, активное состояние и память выбора посетителя. ## Что проверить до показа клиенту Пройдите сайт не по меню, а переключателем: 1. Главная RU → главная EN → назад. 2. Услуга RU → та же услуга EN. 3. Страница портфолио → её смысловая пара. 4. Прямая ссылка на английскую страницу в новом окне. 5. Страница, у которой пары пока нет. 6. Форма, корзина и сообщение после отправки на обоих языках. Особенно полезен четвёртый пункт. Сайт должен понимать английский адрес не только после того, как посетитель сначала побывал на русской версии. ## Что передать клиенту Вместе с сайтом отдайте таблицу пар и короткое правило добавления новой страницы: 1. Создать обе языковые версии. 2. Перевести заголовок, описание, форму и системные сообщения. 3. Добавить пару в карту переключателя. 4. Проверить ссылки в обе стороны. 5. Настроить SEO-метаданные для обеих страниц. Тогда клиент сможет расширять сайт, не вспоминая, где спрятан случайный скрипт. Частые вопросы по теме: - В: Можно сделать весь сайт на двух языках одним скриптом? О: Нет. Скрипт может переключить заранее созданные версии и поставить язык документу, но сами переводы, адреса страниц, меню, формы и SEO-метаданные должны существовать отдельно. - В: Кнопка EN должна вести на английскую главную? О: Только если у текущей страницы нет английской пары и это решение принято заранее. Обычно правильнее связать услугу с той же услугой, статью с той же статьёй и контактную страницу с контактной. - В: Что такое lang и зачем он дизайнеру? О: Это язык содержимого документа. Он помогает браузеру, скринридеру и части системных функций правильно читать текст. Видимые буквы RU/EN сами его не меняют. - В: MOD-170 решит дубли страниц в поиске? О: Нет. Для поиска нужны отдельные адреса, корректные канонические ссылки и hreflang. MOD-170 отвечает только за переход между подготовленными парами, lang и сохранённый выбор. ### Как сделать flip-карточку, которая работает не только по hover URL: https://modkod.ru/articles/perevorachivayuschiesya-kartochki-tilda Рубрика: Как сделать | Целевой запрос: «как сделать переворачивающиеся карточки в тильде» | Опубликовано: 12 августа 2026 Верификация: в 53 JS-файлах и наборе CSS снятого рантайма отсутствуют rotateY, rotateX и готовая flip-механика (modkit/stand/vendor/js и vendor/css, полный поиск 29.07.2026) Суть и прямой ответ: Переворот карточки требует своего кода: в исследованном рантайме Тильды нет готовой механики rotateY для пары сторон. Но главный риск не в CSS, а в управлении. Hover работает только с мышью, поэтому на телефоне и с клавиатуры нужна настоящая кнопка. Скрытая сторона должна исчезать из Tab-порядка, а при уменьшении движения эффект заменяется простой сменой содержимого. Содержание разбора: ## Короткий ответ Соберите лицевую и обратную группы, объедините их одной обёрткой и управляйте состоянием кнопкой. Hover оставьте дополнительным способом. ## Подготовка в Zero Block Обе стороны должны иметь одинаковую внешнюю площадь. Внутри можно менять композицию, но важный текст не помещайте только на оборот без явной подсказки «Показать подробнее». Каждой карточке нужен собственный экземпляр состояния. Повторяющиеся глобальные id приводят к тому, что клик по третьей переворачивает первую. ## 3D-слой Перспектива задаётся внешней обёртке, вращается внутренний контейнер, а стороны получают `backface-visibility`. Не назначайте transform элементу, на котором уже работает пошаговая анимация Zero Block: два эффекта будут переписывать одно свойство. ## Доступность Кнопка хранит `aria-expanded` или другое понятное состояние. Когда оборот скрыт, его ссылки исключаются из Tab-порядка. После переключения фокус остаётся на кнопке или осознанно переходит в новое содержимое. При `prefers-reduced-motion` не вращайте плоскость в 3D — переключайте стороны мгновенно. Смысл остаётся, декоративное движение исчезает. ## Статус MOD-190 Спецификация добавлена в каталог, но сниппет ещё не прошёл Safari, touch, клавиатуру и экранный диктор. Для клиента закладывайте реализацию и тестирование, а не называйте карточку готовой. Частые вопросы по теме: - В: Можно сделать карточку только на hover? О: Для декоративного эффекта можно, но обратная сторона будет недоступна на телефоне и клавиатуре. Добавьте явную кнопку переключения. - В: Переворот и аккордеон — одно и то же? О: Нет. Flip заменяет сторону в той же площади, аккордеон раскрывает контент и меняет высоту секции. Для них нужны разные проверки. ### Почему Яндекс.Браузер показывает свою плашку над видео URL: https://modkod.ru/articles/plashka-yandeks-brauzera-nad-video-tilda Рубрика: Не работает | Целевой запрос: «плашка яндекс браузера над видео тильда» | Опубликовано: 12 августа 2026 Верификация: проверено на актуальном рантайме Tilda Publishing. Суть и прямой ответ: Если над видео в Тильде появилась фирменная кнопка или плашка Яндекс.Браузера, ищите причину не в слоях Zero Block. Браузер распознаёт настоящий видеоплеер и рисует собственный интерфейс поверх страницы; обычный z-index сайта не всегда может его перекрыть. Сначала проверьте источник, постер и элементы управления, а затем решите, действительно ли ролику нужен встроенный плеер. Содержание разбора: ## Короткий ответ Плашка принадлежит браузеру. CSS страницы управляет слоями страницы, но не обязан управлять интерфейсом, который браузер добавил поверх распознанного видео. ## Как убедиться, что это не блок Тильды Откройте тот же опубликованный адрес в другом браузере. Если элемент исчез, а в редакторе и структуре Zero Block его нет, это почти наверняка браузерная функция. Дополнительно откройте страницу в приватном режиме: расширение браузера тоже может добавлять свой интерфейс. Не тратьте первый час на `z-index: 999999`. Большое число не переносит слой в другую систему отрисовки. ## Три безопасных варианта ### Оставить как есть Если плашка не перекрывает важную кнопку и появляется только у части аудитории, лучшее решение может быть именно таким. Клиент получает работающий ролик без хрупкого обхода. ### Показать постер, а видео открыть по клику Это хороший вариант для первого экрана. До клика пользователь видит обычное изображение, а тяжёлый плеер не участвует в загрузке. Постер должен честно выглядеть как видео: кнопка запуска, длительность или подпись. ### Использовать свой MP4-элемент Он даёт больше контроля над постером, `controls` и `playsinline`, но приносит ответственность за вес файла, форматы и мобильное воспроизведение. Это не универсальное лекарство: браузер всё равно распознаёт `