Инструкция по настройке


Шаблон страницы
Как добавить шаблон

58641689

Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery

1. Задаем блоку класс uc-tistols-banner

Создаем Zero Block
1 шаг
Открываем редактор Zero Block

1. Добавляем шейп с обложкой баннера
2. Добавляем иконку с крестиком для закрытия баннера
3. Задаем иконке класс closepopup
4. Добавляем текстовые элементы в которых будут выводиться цифровые значения времени
5. Задаем им классы tday, thour, tmin, tsec
6. Добавляем текстовые элементы в которых будут надписи: дней/часов/минут/секунд
7. Задаем им классы tdayname, thourname, tminname, tsecname

2 шаг
Создаем блок T123 и копируем в него код
3 шаг
Скопировать код

<!-- BN01 - Модификация для Тильды. Фиксированный баннер с таймером https://mod.tistols.com/banner -->
<script>
// Установите конечную дату
const endDate = new Date("2025-01-30T00:00:00");

// Функция для получения склонений для дней, часов, минут и секунд
function getDeclension(number, wordForms) {
const lastDigit = number % 10;
const lastTwoDigits = number % 100;

if (lastTwoDigits > 10 && lastTwoDigits < 20) {
return wordForms[2]; // Для 11-19
} else if (lastDigit === 1) {
return wordForms[0]; // Для 1
} else if (lastDigit >= 2 && lastDigit <= 4) {
return wordForms[1]; // Для 2-4
} else {
return wordForms[2]; // Для остальных
}
}

function updateTimer() {
const now = new Date();
const remainingTime = endDate - now;

if (remainingTime <= 0) {
// Если время вышло, останавливаем таймер
clearInterval(timerInterval);
return;
}

const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

// Обновление элементов с цифрами (используем textContent, чтобы не изменять стили)
const dayElem = document.querySelector('.tday .tn-atom');
const hourElem = document.querySelector('.thour .tn-atom');
const minElem = document.querySelector('.tmin .tn-atom');
const secElem = document.querySelector('.tsec .tn-atom');

// Обновляем только текстовое содержимое
if (dayElem) dayElem.textContent = days;
if (hourElem) hourElem.textContent = hours;
if (minElem) minElem.textContent = minutes;
if (secElem) secElem.textContent = seconds;

// Обновление элементов с подписями (также только текст)
const dayNameElem = document.querySelector('.tdayname .tn-atom');
const hourNameElem = document.querySelector('.thourname .tn-atom');
const minNameElem = document.querySelector('.tminname .tn-atom');
const secNameElem = document.querySelector('.tsecname .tn-atom');

// Обновляем только текстовое содержимое для слов-подписей
if (dayNameElem) dayNameElem.textContent = getDeclension(days, ['день', 'дня', 'дней']);
if (hourNameElem) hourNameElem.textContent = getDeclension(hours, ['час', 'часа', 'часов']);
if (minNameElem) minNameElem.textContent = getDeclension(minutes, ['минута', 'минуты', 'минут']);
if (secNameElem) secNameElem.textContent = getDeclension(seconds, ['секунда', 'секунды', 'секунд']);
}

// Запускаем таймер каждую секунду
const timerInterval = setInterval(updateTimer, 1000);
</script>


<style>
/* Исходное состояние: блок скрыт */
.hidden {
opacity: 0;
pointer-events: none; /* Отключаем клики по невидимому блоку */
transition: opacity 1.5s ease; /* Плавная анимация изменения прозрачности */
}

/* Видимое состояние: блок показан */
.visible {
opacity: 1;
pointer-events: auto; /* Включаем клики по блоку */
transition: opacity 1.5s ease; /* Плавная анимация изменения прозрачности */
}



/* Стили для кнопки закрытия */
.closepopup {
cursor: pointer; /* Изменение курсора на "руку" */
transition: transform 0.2s ease, opacity 0.2s ease; /* Плавный эффект при наведении */
}

/* Эффект при наведении */
.closepopup:hover {
transform: scale(1.1); /* Увеличение кнопки при наведении */
opacity: 0.8; /* Легкое уменьшение прозрачности */
}


</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
function waitForZeroBlock() {
const zeroBlock = document.querySelector('.uc-tistols-banner');
const closeButton = document.querySelector('.closepopup');

if (zeroBlock && closeButton) {
// Показываем Zero Block с анимацией появления
zeroBlock.classList.remove('hidden');
zeroBlock.classList.add('visible');

// Добавляем обработчик на кнопку закрытия
closeButton.addEventListener('click', function () {
zeroBlock.classList.remove('visible');
zeroBlock.classList.add('hidden');
});
} else {
// Если элементы не найдены, повторяем проверку через 100ms
setTimeout(waitForZeroBlock, 100);
}
}

// Запуск проверки
waitForZeroBlock();
});
</script>

В коде заменяем финальную дату до которой будет производиться расчет на сайте