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 на страницу. В его контенте оставляем только пункт «Главная» с ссылкой на главную страницу /

Если на сайте есть каталог товаров или ленты новостей:
  • Переходим в настройки каталога или потоков и ставим галочку «Открывать отдельной страницей».
  • Создаем пустую страницу, которая будет использоваться как хедер.
  • Дублируем на эту страницу блок ME605, и назначаем её хедером для каталога и/или потока.

2. В генераторе кода указываем название для главной страницы (его будет показывать в хлебных крошках) и тип разделителя:

3. Копируем готовый код и вставляем в HTML-блок T123. Блок с кодом размещаем под под блоком ME605.

4. Копируем второй код и вставляем его в блок Т123 с основным кодом. В этом коде указываем все внутренние страницы сайта и их названия в формате:
"/catalog": "Каталог",
"/catalog/phone": "Телефоны",
"/contact": "Контакты",
и т. д.

Как работает скрипт
  • Скрипт определяет текущий путь (URL) страницы.
  • Сверяет его со списком страниц, указанным в карте сайта.
  • Формирует корректную цепочку хлебных крошек.
  • Если это карточка товара или новость, скрипт автоматически подставит заголовок карточки или поста в цепочку.

Примечание: Если на некоторых страницах нельзя подключить хедер, но требуются хлебные крошки, то лучше продублировать блок и код, используя алиас-блоки T213. Это упростит дальнейшую работу с сайтом. В случае добавления новых страниц, можно будет добавить их в оригинальном блоке и все изменения подтянет в остальные блоки.
Made on
Tilda