Не надеюсь, что по такому заголовку кто-то эту статью найдет. Надеюсь она кому-то пригодится. Я большинство заметок пишу для себя с надеждой, что помогу хоть одному человеку.
Проблема
У меня на сайте Remake.space есть ~50 кейсов. Для каждого их них есть отдельная страница с подробным рассказом о проекте.
Я придумал в каждом из кейсов сделать блок, который предлагает лидам ознакомиться с новыми кейсами.
И далее раскопировал этот блок на все страницы кейсов. Это просто картинки с ссылками в zero-code Тильды.
Проблема в том, что это одни и те же 6 работ на всех кейсах. Если пользователь будет перемещаться только по кейсам из этого блока через 5 страниц он упрется в то, что новых работ тут не появляется.
Идея
Я хотел сделать так, чтобы у меня был список работ и чтобы код при загрузке страницы проставлял рандомные.
Так как в Тильде нет баз данных, приходится делать это через код. Я придумал, что у меня будет массив данных с ссылками на кейсы и картинку. Ведь это ему и придется заменять.
Попытка решить
Я дал класс блоку с проектами и попросил ChatGPT написать код, который бы реализовал мою идею.
И он конечно выдал результат. Но не понял что конкретно там в коде менять. Бывает.
Чтобы помочь ему, у картинок я нашел общие элементы. Это класс tn-elem.
Внутри лежит tn-atom где ссылка и tn-atom__img где изображение.
Вкинул уточнения, он выдал код и появилась первая проблема.
Проблема — меняются только 3 картинки
Проверяю, работает! Только наполовину. Понять ничего не могу, кидаю в ChatGPT новые запросы, что не работает, он ничего не может найти и продолжает отправлять код, который меняет только 3 картинки.
Потом до меня дошло, я решил сходить и посмотреть, а нет ли таких же блоков tn_elem. Оказывается класс не только у картинок, но и у других элементов.
Начал смотреть, чем отличаются картинки от других элементов tn-elem. Это атрибут data-elem-type="image". У других блоков он shape или text.
Проблема — менялись 5 из 6 картинок
Думаю «Да что не так-то! Все же правильно по коду настроил!». Опять достаю ChatGPT, он ничего внятного не дает. Пошел смотреть блок и нахожу такого шпиона. Поржал конечно)
То есть он в этой лишней картинке менял содержание, а в последней ДартиДи не менял, потому что я ему дал задачу менять только 6 картинок.
Проблема — блоки в отрыве друг от друга
После этого я решил пойти и поставить этот блок в 50 страниц кейсов. На 20 блоке я уже так заебался и понял, что если я что-то в нем изменю, мне снова их менять. Пошел делать alias блок.
Alias — это блок, который ссылкается на оригинал. То есть отображает тот блок, айдишник которого вы туда поставите.
Заходим в блок, копируем айдишник.
В новой странице создаем новый блок: другое → alias. Или в поиске «213»
Заходим в контент и ставим айдишник.
Важно! После этого ставим класс, как у нашего оригинального блока. Класс не подтягивается в alias блок.
После этого можно копировать получившийся блок на другие страницы.
Ещё не забудьте, если у вас этот блок лежит в шаблонной странице, при её копировании будет копироваться оригинальный блок.
Нюанс
Ещё не забыл попросить ChatGPT сделать так, что если текущая ссылка уже является кейсом, то этот кейс мы не показываем. Чтобы не было так, что вы смотрите Кейс Музторга, а внизу вам предлагают посмотреть кейс Музторга снова.
Решение
1. Ставим блоку с дополнительными проектами класс uc-other-projects.
2. Заходим в Footer и создаем блок с кодом. T123 в поиске.
<script>
document.addEventListener("DOMContentLoaded", function() {
// Массив объектов с ссылками на изображения и страницы
const projects = [
{
imgSrc: "https://static.tildacdn.com/tild6234-6135-4237-b436-306463353364/15.png",
pageLink: "/grandsecret"
},
{
imgSrc: "https://static.tildacdn.com/tild6235-3531-4632-a231-643561643761/image.png",
pageLink: "https://remake.space/diskill"
},
//
// Добавьте больше объектов по необходимости
];
// Получаем текущий URL страницы
const currentUrl = window.location.href;
// Фильтруем проекты, исключая текущий URL
const filteredProjects = projects.filter(project => !currentUrl.includes(project.pageLink));
// Функция для случайного выбора уникальных элементов
function getRandomElements(arr, count) {
const shuffled = arr.sort(() => 0.5 - Math.random());
return shuffled.slice(0, count);
}
// Получаем 6 случайных элементов или меньше, если их меньше 6
const selectedProjects = getRandomElements(filteredProjects, Math.min(6, filteredProjects.length));
// Проверяем количество выбранных проектов
console.log("Выбранные проекты:", selectedProjects.length);
// Заменяем элементы в блоке .uc-other-projects
const projectElements = document.querySelectorAll('.uc-other-projects .tn-elem[data-elem-type="image"]');
projectElements.forEach((element, index) => {
// Обрабатываем только первые 6 элементов
if (index < selectedProjects.length) {
const linkElement = element.querySelector('a.tn-atom');
const imgElement = element.querySelector('img.tn-atom__img');
if (linkElement && imgElement) {
console.log("Меняем проект", selectedProjects[index]);
// Обновляем href и src
linkElement.href = selectedProjects[index].pageLink;
imgElement.src = selectedProjects[index].imgSrc;
}
} else {
console.log("Пропускаем элемент", index);
}
});
});
</script>
3. Заполняем верхний блок кода. В imgSrc вставляем url картинки, в pageLink ссылку на страницу. Можете прям с этого же сайта копировать. Я с главной страницы все скопировал и вставил.