URL скопирован в буфер обмена!
Как сделать автоматические хлебные крошки на Tilda?
С помощью этой модификации можно настроить автоматическую генерацию хлебных крошек для карточек товара и потоков на Тильда с выводом в стандартный блок ME605. Для обычных страниц можно задать список, на основе которого будут формироваться хлебные крошки.
Модификация находится на бета тесте. Мы активно собираем обратную связь чтобы улучшить функционал скрипта и исправить возможные баги.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Название главной страницы
Тип разделителя
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><script>
document.addEventListener('DOMContentLoaded', function () {
const TiCodemap = JSON.parse(document.getElementById('ticode-mapsite').textContent || '{}');
const TCDpath = window.location.pathname;
let TCDitems = [];
const TCisProduct = TCDpath.includes('/tproduct');
const TCDisPost = TCDpath.includes('/tpost');
const TCDisSystemPage = p => /^\/page\d+\.html$/.test(p);
const TCDgetHistory = () => {
try {
return JSON.parse(localStorage.getItem('breadcrumbHistory')) || [];
} catch {
return [];
}
};
const TicodesetHistory = paths => {
const cleaned = paths.filter(p => typeof p === 'string' && !TCDisSystemPage(p) && p !== '/');
localStorage.setItem('breadcrumbHistory', JSON.stringify(cleaned));
};
Object.keys(TiCodemap).forEach(key => {
if (key !== "/" && (TCDpath === key || TCDpath.startsWith(key + '/'))) {
TCDitems.push({ url: key, name: TiCodemap[key] });
}
});
const titleSelector = TCisProduct ? '.js-store-prod-name' : (TCDisPost ? '.js-feed-post-title' : null);
if ((TCisProduct || TCDisPost) && titleSelector) {
const titleEl = document.querySelector(titleSelector);
if (titleEl) {
const title = titleEl.textContent.trim();
const history = TCDgetHistory().filter(p => TiCodemap[p] && !TCDitems.find(i => i.url === p));
history.forEach(p => {
TCDitems.push({ url: p, name: TiCodemap[p] });
});
TCDitems.push({ url: TCDpath, name: title });
const urlsToSave = TCDitems.emap(i => i.url).filter(u => u !== TCDpath && u !== "/");
TicodesetHistory(urlsToSave);
}
} else {
if (TiCodemap[TCDpath] && TCDpath !== "/") {
const history = TCDgetHistory().filter(p => p !== TCDpath && TiCodemap[p]);
history.push(TCDpath);
if (history.length > 5) history.shift();
TicodesetHistory(history);
}
}
if (!TCDitems.find(i => i.url === "/" && i.name === TiCodemap["/"])) {
TCDitems.unshift({ url: "/", name: TiCodemap["/"] || "Главная" });
}
const list = document.querySelector('.t758__list');
if (!list) return;
list.innerHTML = '';
TCDitems.forEach((item, index) => {
const li = document.createElement('li');
li.className = 't758__list_item';
const isLast = index === TCDitems.length - 1;
const wrap = `<div class="t758__link-item__wrapper">`;
li.innerHTML = isLast
? `${wrap}<span class="t-menu__link-item">${item.name}</span></div>`
: `${wrap}<a class="t-menu__link-item" href="${item.url}">${item.name}</a></div><span class="t758__breadcrumb-divider">/</span>`;
list.appendChild(li);
});
});
</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>
<!-- Указываем список страниц сайта -->
<div id="ticode-mapsite" style="display:none;">
{
"/catalog": "Каталог",
"/catalog/phone": "Телефоны",
"/contact": "Контакты",
}
</div>1. Добавляем блок ME605 на страницу. В его контенте оставляем только пункт «Главная» с ссылкой на главную страницу /
Если на сайте есть каталог товаров или ленты новостей:
2. В генераторе кода указываем название для главной страницы (его будет показывать в хлебных крошках) и тип разделителя:
3. Копируем готовый код и вставляем в HTML-блок T123. Блок с кодом размещаем под под блоком ME605.
4. Копируем второй код и вставляем его в блок Т123 с основным кодом. В этом коде указываем все внутренние страницы сайта и их названия в формате:
"/catalog": "Каталог",
"/catalog/phone": "Телефоны",
"/contact": "Контакты",
и т. д.
Как работает скрипт
Примечание: Если на некоторых страницах нельзя подключить хедер, но требуются хлебные крошки, то лучше продублировать блок и код, используя алиас-блоки T213. Это упростит дальнейшую работу с сайтом. В случае добавления новых страниц, можно будет добавить их в оригинальном блоке и все изменения подтянет в остальные блоки.
Если на сайте есть каталог товаров или ленты новостей:
- Переходим в настройки каталога или потоков и ставим галочку «Открывать отдельной страницей».
- Создаем пустую страницу, которая будет использоваться как хедер.
- Дублируем на эту страницу блок ME605, и назначаем её хедером для каталога и/или потока.
2. В генераторе кода указываем название для главной страницы (его будет показывать в хлебных крошках) и тип разделителя:
3. Копируем готовый код и вставляем в HTML-блок T123. Блок с кодом размещаем под под блоком ME605.
4. Копируем второй код и вставляем его в блок Т123 с основным кодом. В этом коде указываем все внутренние страницы сайта и их названия в формате:
"/catalog": "Каталог",
"/catalog/phone": "Телефоны",
"/contact": "Контакты",
и т. д.
Как работает скрипт
- Скрипт определяет текущий путь (URL) страницы.
- Сверяет его со списком страниц, указанным в карте сайта.
- Формирует корректную цепочку хлебных крошек.
- Если это карточка товара или новость, скрипт автоматически подставит заголовок карточки или поста в цепочку.
Примечание: Если на некоторых страницах нельзя подключить хедер, но требуются хлебные крошки, то лучше продублировать блок и код, используя алиас-блоки T213. Это упростит дальнейшую работу с сайтом. В случае добавления новых страниц, можно будет добавить их в оригинальном блоке и все изменения подтянет в остальные блоки.
