URL скопирован в буфер обмена!
Как сделать динамический счетчик мест на вебинар в Zero Block на Tilda?
С помощью этой модификации можно добавить счетчик мест с обратным отсчетом на заданный интервал времени. Отлично подходит для повышения конверсии на сайтах марафонов, курсов и вебинаров. Модификация включает два режима старта и функцию реверса.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс элемента
Тип счетчика
Реверс
Зацикливание
Начальное значение
На сколько уменьшаем
Интервал
Приставка после числа
Дата старта
Время старта
Настройки старта
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD110--><script>
window.onload = function () {
const TCDstart = 'normal';
const TCDrl = false;
let TCDdatast;
if (TCDstart === 'normal') {
TCDdatast = new Date("2025-04-02T14:00:00");
} else if (TCDstart === 'cash') {
const SVtidate = localStorage.getItem('tcdlace');
if (SVtidate) {
TCDdatast = new Date(SVtidate);
} else {
TCDdatast = new Date();
localStorage.setItem('tcdlace', TCDdatast.toISOString());
}
}
const tiCodesNV = new Date();
const TCDintr = "00:01:00:00";
const [daysti, hoursti, minutesti, secondsti] = TCDintr.split(":").map(Number);
const TcINms = ((daysti * 24 * 60 * 60) + (hoursti * 60 * 60) + (minutesti * 60) + secondsti) * 1000;
const TCDmlscnd = TCDdatast - tiCodesNV;
setTimeout(TiCodeStarteCalc, Math.max(TCDmlscnd, 0));
function TiCodeStarteCalc() {
const InitTCD = 100;
const TCDdescTilda = 17;
const rcTC = false;
const elements = document.querySelectorAll(".ti-places .tn-atom");
function TiCodeuptime() {
const nowAfterStart = new Date();
const diffMillisecondsAfterStart = nowAfterStart - TCDdatast;
const intervalsPassed = Math.floor(diffMillisecondsAfterStart / TcINms);
let TiCodeSubtraction;
if (rcTC) {
const TotlTIC = Math.ceil(InitTCD / TCDdescTilda);
const RemTi = intervalsPassed % TotlTIC;
if (TCDrl) {
TiCodeSubtraction = RemTi * TCDdescTilda;
if (TiCodeSubtraction > InitTCD) {
TiCodeSubtraction = InitTCD;
}
} else {
TiCodeSubtraction = InitTCD - (RemTi * TCDdescTilda);
if (TiCodeSubtraction < 0) {
TiCodeSubtraction = 0;
}
}
} else {
if (TCDrl) {
TiCodeSubtraction = intervalsPassed * TCDdescTilda;
if (TiCodeSubtraction > InitTCD) {
TiCodeSubtraction = InitTCD;
}
} else {
TiCodeSubtraction = InitTCD - (intervalsPassed * TCDdescTilda);
if (TiCodeSubtraction < 0) {
TiCodeSubtraction = 0;
}
}
}
elements.forEach(element => {
element.textContent = TiCodeSubtraction + " / 100";
});
}
TiCodeuptime();
setInterval(TiCodeuptime, TcINms);
}
};
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем в зеро блоке элемент и присваиваем ему класс ti-places
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
В тексте указываем заглушку, например, "100 / 100", если требуется обратный отсчет, или "0 / 100", если активирован реверс. Эта заглушка поможет проще адаптировать контент (хотя можно обойтись и без нее).
2. Указываем основные настройки счетчика:
Тип старта:
Старт по дате - указываем дату и время когда нужно начать отсчет мест.
Старт с кешем - отсчет начнется сразу после захода пользователя на сайт. При повторном заходе через некоторое время, счетчик покажет уменьшенное количество мест, так как будет учитывать время, пока пользователь не был на сайте.
Важно! Если пользователь зайдет с другого браузера или очистит кеш, отсчет начнется заново.
Начальное значение (или максимальное значение если включили реверс) - указываем начальное количество мест или максимальное, если активирован реверс.
На сколько уменьшаем - указываем количество мест, на которое нужно уменьшать за указанный промежуток времени. Рекомендуется использовать числа типа 17, чтобы значения не выглядели слишком ровно. Например, если указать 10, а всего мест 100, то пользователи будут видеть 90, 80 и т. д.
Интервал - время, за которое происходит одно уменьшение. Если указано "00:01:00:00", то количество мест будет уменьшаться раз в час на 17.
Дополнительно можно настроить:
Реверс - если включен, счетчик будет увеличиваться от нуля до заданного числа;
Зацикливание - если включено, счетчик будет перезапускаться при достижении максимального или минимального значения;
Приставка после числа - указываем текст, который будет отображаться после значения счетчика. Не забываем поставить пробел, если необходимо разделить приставку от числа.
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком со счетчиком
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
В тексте указываем заглушку, например, "100 / 100", если требуется обратный отсчет, или "0 / 100", если активирован реверс. Эта заглушка поможет проще адаптировать контент (хотя можно обойтись и без нее).
2. Указываем основные настройки счетчика:
Тип старта:
Старт по дате - указываем дату и время когда нужно начать отсчет мест.
Старт с кешем - отсчет начнется сразу после захода пользователя на сайт. При повторном заходе через некоторое время, счетчик покажет уменьшенное количество мест, так как будет учитывать время, пока пользователь не был на сайте.
Важно! Если пользователь зайдет с другого браузера или очистит кеш, отсчет начнется заново.
Начальное значение (или максимальное значение если включили реверс) - указываем начальное количество мест или максимальное, если активирован реверс.
На сколько уменьшаем - указываем количество мест, на которое нужно уменьшать за указанный промежуток времени. Рекомендуется использовать числа типа 17, чтобы значения не выглядели слишком ровно. Например, если указать 10, а всего мест 100, то пользователи будут видеть 90, 80 и т. д.
Интервал - время, за которое происходит одно уменьшение. Если указано "00:01:00:00", то количество мест будет уменьшаться раз в час на 17.
Дополнительно можно настроить:
Реверс - если включен, счетчик будет увеличиваться от нуля до заданного числа;
Зацикливание - если включено, счетчик будет перезапускаться при достижении максимального или минимального значения;
Приставка после числа - указываем текст, который будет отображаться после значения счетчика. Не забываем поставить пробел, если необходимо разделить приставку от числа.
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком со счетчиком
Бонус при регистрации
PDF-книга «Как понять
что профессия тебе подходит?»
что профессия тебе подходит?»
Как быстро освоить стабильную профессию менеджер маркетплейс
Иду на 15:00 МСК
Иду на 19:00 МСК
ОСТАЛОСЬ МЕСТ
400 / 400
БЕСПЛАТНЫЙ ВЕБИНАР
