Тильда JS: порядок загрузки скриптов на странице

Тильда JS ведёт себя не так, как скрипт на обычном сайте с самописным движком: страница собирается из готовых блоков, часть библиотек подключается асинхронно, а свой код можно вставить в четырёх разных местах с разным временем срабатывания. На практике это выглядит так: скрипт спокойно отрабатывает, если вставить его вручную через консоль браузера, но молчит после публикации страницы. Причина почти всегда одна - код выполнился раньше, чем в DOM появился нужный элемент, либо раньше, чем подключилась библиотека, от которой он зависит.

Где на Тильде можно вставить JS-код

У Тильды четыре точки, куда добавляется свой код, и выполняются они в разное время.

• Настройки сайта - Ещё - Вставка кода. Поля “Код в head” и “Код перед /body” действуют на весь сайт, на всех страницах сразу.
• Настройки страницы - Ещё - код для этой страницы. Работает только на конкретной странице и добавляется вместе с общесайтовым кодом, а не вместо него.
• HTML-блок на самой странице (виджет “HTML-код” в редакторе T123). Такой скрипт выполняется прямо в потоке разметки, в момент, когда браузер дошёл до этого места страницы - часто это самая надёжная точка для кода, привязанного к конкретному блоку.
• Zero Block. В настройках взаимодействий можно повесить действие на клик или наведение без единой строчки кода, а для более сложной логики - вставить свой JS прямо в HTML-виджет зеро-блока.

По моей практике большинство проблем с тильда js возникает не из-за того, что код вставлен не в то поле, а из-за того, что автор не учёл момент, когда это поле реально выполняется браузером.

Порядок загрузки скриптов на странице Тильды

Браузер обрабатывает страницу Тильды примерно в такой последовательности.

1. Загружаются мета-теги, стили и статические файлы из head, включая ваш код из поля “Код в head” - он выполняется сразу, ещё до того, как отрисовано тело страницы.
2. Браузер парсит разметку body сверху вниз. Блоки уже присутствуют в HTML как готовая вёрстка, Тильда не дорисовывает их через JS с нуля, за исключением отдельных динамических виджетов.
3. Подключаются библиотеки: jQuery, файлы вида tilda-blocks‑х.х.min.js, слайдеры, лайтбоксы, скрипты платёжных виджетов вроде Т‑Кассы или Робокассы. Часть из них подключена с атрибутом async и может выполниться позже, чем строка кода, которая идёт после неё в разметке.
4. Выполняется код из поля “Код перед /body” - он идёт позже основной разметки, но не гарантирует, что асинхронные библиотеки уже отработали.
5. Часть контента появляется в DOM ещё позже: картинки с отложенной загрузкой, попап корзины, форма после успешной отправки, карточки каталога, если они подгружаются постранично. Такие элементы физически не существуют на странице в момент, когда сработал ваш обработчик готовности документа.

Из практики: клиент просил довесить проверку номера телефона к платёжной форме, завязанной на виджет Т‑Банка. Скрипт в head писал в консоль ошибку - кнопки оплаты ещё не было в DOM, потому что виджет вставляет её своим асинхронным JS уже после первичной отрисовки блока. Перенос кода в обработчик клика по родительскому контейнеру решил проблему за пять минут.

4 частые причины, почему тильда js не срабатывает

Если код не выполняется совсем или срабатывает через раз, обычно дело в одной из четырёх вещей.

1. Элемента ещё нет в DOM. querySelector возвращает null, а следующая строка кода падает с ошибкой “Cannot read properties of null”. Это самая частая причина на моей практике.
2. Библиотека подключилась позже вашего кода. Вызов вроде $(…).slick() падает с “is not a function”, потому что скрипт слайдера ещё не успел выполниться к этому моменту.
3. Конфликт имён между двумя скриптами. Если два фрагмента кода объявляют одну и ту же глобальную функцию или переменную, второй молча перезатирает первый - никакой ошибки в консоли не будет, просто одна из версий кода не сработает.
4. Код вставлен не туда. Скрипт добавлен в настройках одной страницы, хотя нужен на всех, или наоборот. Консоль в этом случае молчит, потому что кода там просто нет.

Проверяю все четыре пункта по порядку, когда клиент присылает “скрипт не работает” без деталей - обычно ответ находится за пять-десять минут в DevTools.

Как дождаться нужного элемента или библиотеки

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

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.querySelector('.your-button-class');
  if (btn) {
    btn.addEventListener('click', function () {
      console.log('клик обработан');
    });
  }
});

Если элемент появляется позже (попап, карточка после подгрузки, кнопка от стороннего виджета), DOMContentLoaded не поможет - нужно дождаться конкретного элемента через опрос DOM.

function waitFor(selector, callback) {
  var interval = setInterval(function () {
    var el = document.querySelector(selector);
    if (el) {
      clearInterval(interval);
      callback(el);
    }
  }, 200);
}

waitFor('.your-element-class', function (el) {
  el.addEventListener('click', function () {
    console.log('элемент найден и обработан');
  });
});

Вместо setInterval можно взять MutationObserver, он реагирует на появление элемента сразу, без опроса каждые 200 миллисекунд, но для разовых скриптов на Тильде разница обычно не критична.

Как проверить, что скрипт вообще загрузился

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

• Открываю просмотр кода страницы (Ctrl+U) и ищу свой фрагмент в head или перед /body - если его там нет, дело не в JS, а в том, что настройки не сохранились или применились не на той странице.
• Ставлю console.log с уникальной меткой в самую первую строку скрипта - если метка не появилась в консоли, до логики дело не дошло, скрипт не подключился или упал ещё до нашего кода.
• Смотрю вкладку Console на ошибки, которые появились раньше моего скрипта - необработанное исключение в одном теге script не останавливает выполнение других тегов на странице, но может остановить остальной код внутри того же тега.
• Проверяю через жёсткое обновление (Ctrl+F5) или режим инкогнито - после публикации статические файлы Тильды раздаются через CDN и несколько минут могут отдавать старую версию из кэша браузера.

Когда штатных настроек кода недостаточно

Часть задач закрывается вставкой кода в перечисленные выше поля за десять-пятнадцать минут. Но встречаются случаи, где дело не в месте вставки, а в объёме логики.

Например, у Тильды есть встроенное ограничение количества использований промокода в настройках корзины, его достаточно, если нужно просто закрыть промокод после определённого числа применений. Но если требуется более тонкая логика, скажем лимит на одного покупателя или привязка к сумме заказа, это уже отдельная разработка. А если промокод нужно запретить для отдельных категорий, например для распродажи, в библиотеке есть готовый скрипт ограничения промокода по категориям.

Похожая история с доставкой: у Тильды есть встроенный калькулятор СДЭК по зонам, но если условия завязаны на вес, регион и способ оплаты одновременно, проще написать отдельную логику под конкретный магазин, чем подгонять её через параметры конструктора.

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

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Куда лучше вставлять JS-код на Тильде, в head или перед /body?

Если скрипту не нужен доступ к элементам страницы сразу при запуске, ставлю в head, он выполнится раньше и не задержит рендер критичных блоков. Если код обращается к конкретным элементам разметки, надёжнее поле перед /body или обёртка в DOMContentLoaded, потому что к этому моменту нужный HTML уже присутствует на странице.

Почему код работает при вставке через консоль, но не работает после публикации?

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

Можно ли использовать jQuery в своём коде на Тильде?

Да, Тильда сама подключает jQuery для работы блоков, и обращаться к нему через $ или jQuery можно, если код выполняется после того, как эта библиотека подключилась. Если код в head выполняется раньше её загрузки, обращение к $ упадёт с ошибкой - в этом случае оборачиваю вызов в проверку typeof jQuery !== ‘undefined’ или переношу код ниже.

Как понять, что ошибка именно в порядке загрузки, а не в самом коде?

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