Тильда таймер обратного отсчёта, который переживает перезагрузку страницы

Тильда таймер обратного отсчёта регулярно путают с таймером, который сбрасывается при каждом обновлении страницы, хотя механика у них разная. Встроенный блок в редакторе Тильды считает разницу между текущим временем браузера и заданной датой, поэтому дата сама по себе никуда не пропадает при перезагрузке. Сбрасывается обычно другой сценарий - персональный отсчёт «у вас есть 15 минут», который стартует заново при каждом визите, если разработчик не подумал, где хранить момент старта. Разбираю оба случая и код, который решает второй.

Как встроенный таймер Тильды считает время до даты

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

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

Путаница между отсчётом до даты и личным таймером посетителя

Жалоба «таймер сбрасывается» почти всегда не про блок из редактора, а про кастомный сценарий: показать посетителю скидку, которая действует 10-15 минут именно для него, с момента, когда он открыл страницу. Такой отсчёт не может жить в стандартном блоке Тильды, потому что там нет понятия «момент визита конкретного человека» - есть только одна общая дата для всех.

Когда эту логику пишут на скорую руку, код обычно выглядит так: при загрузке страницы дедлайн вычисляется как «сейчас плюс 15 минут», без проверки, был ли этот посетитель на странице минуту назад. Каждое обновление страницы или переход между разделами сайта запускает отсчёт заново, и человек, который случайно нажал F5, получает бесконечные 15 минут. Проблема не в Тильде и не в JavaScript, а в том, что стартовую точку никуда не сохранили.

Настройка обратного отсчёта до фиксированной даты в редакторе

Порядок такой:

• Добавляю на страницу блок CR34 или CR35, в библиотеке они лежат в категории «Обложка».
• Во вкладке «Контент» блока указываю дату и время окончания отсчёта. Там же задаётся часовой пояс обнуления таймера, так что пояс не берётся из браузера посетителя, а выставляется в самом блоке.
• Настраиваю подписи и внешний вид: шрифт, цвет, что показывать после нуля - обычно скрываю блок целиком или меняю текст на «акция завершена».
• Публикую страницу и проверяю в режиме инкогнито: захожу на сайт, обновляю страницу через пару минут и смотрю, что цифры не откатились назад.

На этом шаге доработка не нужна вообще - это штатная настройка блока, которая закрывает большинство запросов вида «сделайте таймер до конца акции».

Персональный таймер на localStorage, который помнит первый визит

Если акция личная - «у вас есть 15 минут с момента открытия страницы» - без небольшого скрипта не обойтись, и это ровно тот случай, где кастомная доработка оправдана. Логика: при первом визите записываю момент дедлайна в localStorage браузера, при повторной загрузке сначала проверяю, есть ли уже сохранённое значение, и если есть - использую его вместо того, чтобы создавать новое.

Скрипт вставляю через настройки страницы: в панели Тильды это раздел с дополнительным кодом перед закрывающим тегом body, либо прямо в код блока Zero Block. Текстовому элементу, где должны появляться цифры, задаю ID в настройках блока - это обычное поле в панели редактора, доступное без выхода в код всей страницы.

document.addEventListener('DOMContentLoaded', function () {
  var DURATION = 15 * 60 * 1000;
  var STORAGE_KEY = 'tildaPersonalDeadline';
  var timerEl = document.getElementById('js-personal-timer');
  var deadline = Number(localStorage.getItem(STORAGE_KEY));

  if (!deadline || deadline < Date.now()) {
    deadline = Date.now() + DURATION;
    localStorage.setItem(STORAGE_KEY, String(deadline));
  }

  var interval = setInterval(function () {
    var diff = deadline - Date.now();
    if (diff <= 0) {
      clearInterval(interval);
      timerEl.textContent = '00:00';
      return;
    }
    var minutes = Math.floor(diff / 60000);
    var seconds = Math.floor((diff % 60000) / 1000);
    timerEl.textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
  }, 1000);
});

Проверка deadline < Date.now() в условии важна: без неё посетитель, который вернулся через неделю с давно истёкшим значением в localStorage, увидит ноль вместо нового отсчёта. С этой строкой скрипт понимает, что старый дедлайн прошёл, и выдаёт новые 15 минут.

Как отсчёт ведёт себя на разных страницах и доменах

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

Есть нюанс, из-за которого на тестировании теряют время: превью-домен Тильды и подключённый рабочий домен - это разные origin с точки зрения браузера, у каждого своё отдельное хранилище. Если проверяли скрипт на превью, а потом посмотрели на рабочем домене и увидели, что таймер «не запомнил» визит, дело не в баге скрипта, а в том, что localStorage не переносится между разными адресами.

Если распродажа ограничена не только временем, но и количеством использований скидки, эту часть механики отдельно закрывает готовый скрипт ограничение промокодов в Tilda - он считает лимит активаций кода независимо от того, что показывает таймер на экране.

Частые ошибки при настройке таймера обратного отсчёта

Собрал 4 типичные ошибки, с которыми сталкивался на практике при доработке таймеров на Тильде:

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

Когда хватает штатного блока, а когда нужна доработка

Штатного блока с датой достаточно для одной акции с одним дедлайном на всех - это настройка, а не разработка, и платить за неё программисту незачем.

Доработка оправдана, когда:

• таймер должен быть личным для каждого посетителя, с отсчётом от момента визита;
• несколько таймеров на сайте должны синхронно указывать на один и тот же дедлайн, связанный с данными из CRM или таблицы акций;
• по истечении времени должен не просто исчезнуть блок, а поменяться цена, скрыться кнопка или показаться другой оффер.

По деньгам: точечная правка вроде скрипта с localStorage из этой статьи - это кастомный скрипт для Tilda, от 3 000 ₽. Если таймер должен тянуть дедлайн из CRM или показывать разное время разным сегментам аудитории, это уже комплексная интеграция для Tilda (CRM, эквайринг, СДЭК) - от 40 000 ₽. Когда доработками закрывается весь сайт, а не один блок, считаю это частью услуги «сайт на Tilda» - от 30 000 ₽.

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

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

Можно ли поставить на сайт несколько таймеров с разными датами?

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

Почему таймер в Тильде показывает разное время на компьютере и телефоне?

Первым делом смотрю не на устройства, а во вкладку «Контент» блока: часовой пояс обнуления таймера задаётся именно там. Если на разных страницах стоят разные блоки или дату правили только в одном из них, отсчёт и будет расходиться.

Нужен ли отдельный сервер для персонального таймера на localStorage?

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

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

Первым делом проверяю, не осталась ли в настройках блока тестовая дата из прошлого - это самая частая причина. Дальше смотрю на часовой пояс и на то, не задваивается ли ID текстового элемента на странице.