URL скопирован в буфер обмена!
Как сделать показ рандомного блока на Tilda
С помощью этой модификации можно сделать показ случайного блока из заданного списка. Блок может показываться как при обновлении страницы, так и при клике на кнопку. Дополнительно можно кешировать результат на заданный период времени.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Id блоков
Старт рандома
Кеширование результата
Настройки кнопки
Класс кнопки
Ссылка для кнопки (см. инструкцию)
Настройки кеширования
Название переменной
На сколько дней кешируем?
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD098--><script>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
const TCDLinkRND = '#cooldown';
const TCDcache = false;
const TCDexpirationDays = 1;
const TCDblockRND = '#rec846724021, #rec846724022'.split(', ');
function TiCodeGetRandomBlock(ids) {
const randomIndex = Math.floor(Math.random() * ids.length);
return ids[randomIndex];
}
function TiCodeAllBlocks() {
TCDblockRND.forEach(id => {
const blockrndm = document.querySelector(id);
if (blockrndm) {
blockrndm.style.position = 'absolute';
blockrndm.style.left = '-5000px';
}
});
}
function TiCodeshowBlocRND(blockId) {
TiCodeAllBlocks();
const blockTiToShow = document.querySelector(blockId);
if (blockTiToShow) {
blockTiToShow.style.position = 'static';
blockTiToShow.style.left = '0';
}
}
function TiCodeshowBlockRND() {
const TIsaveblock = TiCodeGetRandomBlock(TCDblockRND);
TiCodeshowBlocRND(TIsaveblock);
if (TCDcache) {
const TCDcurrentTime = new Date().getTime();
localStorage.setItem('TIsaveblock', TIsaveblock);
localStorage.setItem('Tisavetime', TCDcurrentTime);
TiCodeUpdateButtons(TIsaveblock);
}
}
function TiCodeshowCachedBlock(days) {
const TCDcachedBlockId = localStorage.getItem('TIsaveblock');
const Tisavetime = localStorage.getItem('Tisavetime');
if (TCDcachedBlockId && Tisavetime) {
const TCDcurrentTime = new Date().getTime();
const TCDelapsedTime = TCDcurrentTime - Tisavetime;
const TCDexpirationTime = days * 86400000;
if (TCDelapsedTime < TCDexpirationTime) {
TiCodeshowBlocRND(TCDcachedBlockId);
TiCodeUpdateButtons(TCDcachedBlockId);
return TCDcachedBlockId;
} else {
localStorage.removeItem('TIsaveblock');
localStorage.removeItem('Tisavetime');
}
}
return null;
}
function TiCodeUpdateButtons(cachedId) {
const buttons = document.querySelectorAll('.ti-randomblock');
buttons.forEach(button => {
const newButton = button.cloneNode(true);
button.replaceWith(newButton);
});
document.querySelectorAll('.ti-randomblock').forEach(button => {
const link = button.querySelector('a');
if (cachedId) {
link.setAttribute('href', TCDLinkRND);
button.setAttribute('href', TCDLinkRND);
button.onclick = null;
} else {
link.removeAttribute('href');
button.removeAttribute('href');
button.onclick = null;
button.addEventListener('click', (e) => {
e.preventDefault();
const blockId = TiCodeGetRandomBlock(TCDblockRND);
TiCodeshowBlock(blockId);
TiCodeSetCache(blockId);
TiCodeUpdateButtons(blockId);
});
}
});
}
function TiCodeSetCache(blockId) {
if (TCDcache) {
const TCDcurrentTime = new Date().getTime();
localStorage.setItem('TIsaveblock', blockId);
localStorage.setItem('Tisavetime', TCDcurrentTime);
}
}
function TiCodeButtonMode() {
TiCodeAllBlocks();
const TCDcachedBlockId = TCDcache ? TiCodeshowCachedBlock(TCDexpirationDays) : null;
if (TCDcachedBlockId) {
TiCodeUpdateButtons(TCDcachedBlockId);
}
const Tibuttons = document.querySelectorAll('.ti-randomblock');
if (Tibuttons.length > 0) {
Tibuttons.forEach(button => {
button.addEventListener('click', (event) => {
event.preventDefault();
if (TCDcache) {
const TCDcachedBlockId = TiCodeshowCachedBlock(TCDexpirationDays);
if (!TCDcachedBlockId) {
TiCodeshowBlockRND();
}
} else {
TiCodeshowBlockRND();
}
});
});
}
}
function TiCodeinitializetMode() {
const TCDcachedBlockId = TCDcache ? TiCodeshowCachedBlock(TCDexpirationDays) : null;
if (!TCDcachedBlockId) {
TiCodeshowBlockRND();
}
}
const TCDmode = 'default';
if (TCDmode === 'button') {
TiCodeButtonMode();
} else if (TCDmode === 'default') {
TiCodeinitializetMode();
}
}, 300);
});
</script>
<style>
.ti-randomblock {
cursor: pointer;
}
</style>
<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>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Добавляем на страницу зеро блоки(стандартные или Zero Block), копируем id блоков и вставляем в генератор в поле "ID блоков" через запятую в формате #rec846724021, #rec846724022 и т. д.
2. Выбираем тип старта рандома:
При обновлении страницы - каждый раз при обновлении страницы будет показан рандомный блок;
При клике на кнопку - каждый раз при клике на кнопку будет показан рандмоный блок;
Если выбрали этот режим, то создаем кнопку, присваиваем ей класс ti-randomblock и указываем ссылку #
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Настройка кеширования. Если включили кеширование, то возможны два сценария:
При включенном режиме "обновление страницы":
При первом заходе на страницу отображается случайный блок, который сохраняется в кеш. При повторном обновлении страницы будет показан тот же блок. Вы можете указать, на сколько дней кешировать результат. После истечения срока кеширования при обновлении страницы снова будет отображаться случайный блок, который запишется в кеш.
При включенном режиме "клик по кнопке":
При первом клике на кнопку отображается случайный блок, который сохраняется в кеш на указанный срок. При повторных кликах пользователь будет перенаправлен по ссылке которую в указали в поле "Ссылка для кнопки". Например, можно указать ссылку на попап с текстом:
"Вы уже сгенерировали блок. Повторно сгенерировать блок можно через 1 день."
После истечения времени кеширования, при клике на кнопку снова будет показан случайный блок.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже всех блок которые участвуют в рандоме.
2. Выбираем тип старта рандома:
При обновлении страницы - каждый раз при обновлении страницы будет показан рандомный блок;
При клике на кнопку - каждый раз при клике на кнопку будет показан рандмоный блок;
Если выбрали этот режим, то создаем кнопку, присваиваем ей класс ti-randomblock и указываем ссылку #
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Настройка кеширования. Если включили кеширование, то возможны два сценария:
При включенном режиме "обновление страницы":
При первом заходе на страницу отображается случайный блок, который сохраняется в кеш. При повторном обновлении страницы будет показан тот же блок. Вы можете указать, на сколько дней кешировать результат. После истечения срока кеширования при обновлении страницы снова будет отображаться случайный блок, который запишется в кеш.
При включенном режиме "клик по кнопке":
При первом клике на кнопку отображается случайный блок, который сохраняется в кеш на указанный срок. При повторных кликах пользователь будет перенаправлен по ссылке которую в указали в поле "Ссылка для кнопки". Например, можно указать ссылку на попап с текстом:
"Вы уже сгенерировали блок. Повторно сгенерировать блок можно через 1 день."
После истечения времени кеширования, при клике на кнопку снова будет показан случайный блок.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже всех блок которые участвуют в рандоме.
Выберите ТЗ от заказчика которое готовы реализовать
Хочу, чтобы сайт менял цвет в зависимости от времени суток и настроения пользователя.
Сделайте логотип вращающимся, но чтобы не раздражал.
На главной странице разместите информацию о компании. У нас там всего 10 страниц текста.
Хочу, чтобы шрифт был в стиле рукописного, но идеально ровный и читабельный.
Добавьте в подвал сайта ссылку на погоду в моём городе.
Мне нравится, как выглядит Google. Сделайте что-то подобное, только с анимацией на весь экран.
Сделайте кнопки максимально круглые, чтобы люди чувствовали их дружелюбность.
Сайт должен быть чёрно-белым, но с яркими красными элементами, которые кричат Купи!
Сделайте сайт вертикальным, чтобы он был похож на свиток.
На каждой странице должно быть видео, которое запускается автоматически, чтобы не было скучно.
Показать ТЗ
