URL скопирован в буфер обмена!
Как сделать показ рандомного блока на Tilda
С помощью этой модификации можно сделать показ случайного блока из заданного списка. Блок может показываться как при обновлении страницы, так и при клике на кнопку. Дополнительно можно кешировать результат на заданный период времени.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Id блоков
Старт рандома
Кеширование результата
Настройки кнопки
Класс кнопки
Ссылка для кнопки
Настройки кеширования
Название переменной
На сколько дней кешируем?
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD092--><script>
document.addEventListener("DOMContentLoaded", () => {
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);
TiCodeupdateButtonLink(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);
TiCodeupdateButtonLink(TCDcachedBlockId);
return TCDcachedBlockId;
} else {
localStorage.removeItem('TIsaveblock');
localStorage.removeItem('Tisavetime');
}
}
return null;
}
function TiCodeupdateButtonLink(TCDcachedBlockId) {
const Tibuttons = document.querySelectorAll('.ti-randomblock');
Tibuttons.forEach(button => {
if (TCDcachedBlockId) {
button.setAttribute('href', TCDLinkRND);
button.onclick = (event) => {
event.preventDefault();
window.location.href = TCDLinkRND;
};
} else {
button.removeAttribute('href');
button.onclick = (event) => {
event.preventDefault();
TiCodeshowBlockRND();
};
}
});
}
function TiCodeButtonMode() {
TiCodeAllBlocks();
const TCDcachedBlockId = TCDcache ? TiCodeshowCachedBlock(TCDexpirationDays) : null;
if (TCDcachedBlockId) {
TiCodeupdateButtonLink(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();
}
});
});
} else {
}
}
function TiCodeinitializetMode() {
const TCDcachedBlockId = TCDcache ? TiCodeshowCachedBlock(TCDexpirationDays) : null;
if (!TCDcachedBlockId) {
TiCodeshowBlockRND();
}
}
const TCDmode = 'default';
if (TCDmode === 'button') {
TiCodeButtonMode();
} else if (TCDmode === 'default') {
TiCodeinitializetMode();
}
});
</script>
<style>
.ti-randomblock {
cursor: pointer;
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Добавляем на страницу зеро блоки(стандартные или Zero Block), копируем id блоков и вставляем в генератор в поле "ID блоков" через запятую в формате #rec846724021, #rec846724022 и т. д.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Выбираем тип старта рандома:
При обновлении страницы - каждый раз при обновлении страницы будет показан рандомный блок;
При клике на кнопку - каждый раз при клике на кнопку будет показан рандмоный блок;
Если выбрали этот режим, то создаем кнопку и присваиваем ей класс ti-randomblock
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Ссылку для кнопки указываем только при включенном режиме кеширования (см. ниже). Если кеширование отключено, можно указать любую ссылку или оставить поле пустым.
3. Настройка кеширования. Если включили кеширование, то возможны два сценария:
При включенном режиме "обновление страницы":
При первом заходе на страницу отображается случайный блок, который сохраняется в кеш. При повторном обновлении страницы будет показан тот же блок. Вы можете указать, на сколько дней кешировать результат. После истечения срока кеширования при обновлении страницы снова будет отображаться случайный блок, который запишется в кеш.
При включенном режиме "клик по кнопке":
При первом клике на кнопку отображается случайный блок, который сохраняется в кеш на указанный срок. При повторных кликах пользователь будет перенаправлен по заданной ссылке. Например, можно указать ссылку на попап с текстом:
"Вы уже сгенерировали блок. Повторно сгенерировать блок можно через 1 день."
После истечения времени кеширования при клике на кнопку снова будет показан случайный блок.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже всех блок которые участвуют в рандоме.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Выбираем тип старта рандома:
При обновлении страницы - каждый раз при обновлении страницы будет показан рандомный блок;
При клике на кнопку - каждый раз при клике на кнопку будет показан рандмоный блок;
Если выбрали этот режим, то создаем кнопку и присваиваем ей класс ti-randomblock
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Ссылку для кнопки указываем только при включенном режиме кеширования (см. ниже). Если кеширование отключено, можно указать любую ссылку или оставить поле пустым.
3. Настройка кеширования. Если включили кеширование, то возможны два сценария:
При включенном режиме "обновление страницы":
При первом заходе на страницу отображается случайный блок, который сохраняется в кеш. При повторном обновлении страницы будет показан тот же блок. Вы можете указать, на сколько дней кешировать результат. После истечения срока кеширования при обновлении страницы снова будет отображаться случайный блок, который запишется в кеш.
При включенном режиме "клик по кнопке":
При первом клике на кнопку отображается случайный блок, который сохраняется в кеш на указанный срок. При повторных кликах пользователь будет перенаправлен по заданной ссылке. Например, можно указать ссылку на попап с текстом:
"Вы уже сгенерировали блок. Повторно сгенерировать блок можно через 1 день."
После истечения времени кеширования при клике на кнопку снова будет показан случайный блок.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже всех блок которые участвуют в рандоме.
Выбери ТЗ от заказчика которое будешь делать
Хочу, чтобы сайт менял цвет в зависимости от времени суток и настроения пользователя.
Сделайте логотип вращающимся, но чтобы не раздражал.
На главной странице разместите информацию о компании. У нас там всего 10 страниц текста.
Хочу, чтобы шрифт был в стиле рукописного, но идеально ровный и читабельный.
Добавьте в подвал сайта ссылку на погоду в моём городе.
Мне нравится, как выглядит Google. Сделайте что-то подобное, только с анимацией на весь экран.
Сделайте кнопки максимально круглые, чтобы люди чувствовали их дружелюбность.
Сайт должен быть чёрно-белым, но с яркими красными элементами, которые кричат Купи!
Сделайте сайт вертикальным, чтобы он был похож на свиток.
На каждой странице должно быть видео, которое запускается автоматически, чтобы не было скучно.
Показать ТЗ
