Обсудить задачу

Маркетолог и менеджер проектов

Ярослав Ясинский

Выслушаю вас, вникну в задачу, проработаю концепцию продвижения и рассчитаю стоимость проекта

Обсудим проект?

Автоматические хлебные крошки для товаров на Тильде, а также для новостей или потоков

Подробный гайд о том, как сделать автоматические хлебные крошки для товаров на Тильде, а также для новостей и потоков

Код для каталога товаров на Тильде


<!-- Разработка кода https://yason.studio -->

<!-- Наследуем шрифт из Тильдовского стиля текста  -->
<div class="t-text">
    <div id="breadcrumbs"></div>
</div>

<style>
/* Основные стили для хлебных крошек */
#breadcrumbs {
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    line-height: 1.55; /* Межстрочное расстояние */
    box-sizing: border-box;
    max-width: 1200px;
    font-family: inherit; /* Наследование шрифта */
}

#breadcrumbs a, #breadcrumbs span {
    color: black;
    text-decoration: none;
}

#breadcrumbs span {
    color: grey;
}

/* Оопределение разделителя */
#breadcrumbs a:not(:last-child)::after {
    content: " » "; /* сюда вставляй любой свой символ для разделителя */
    font-weight: regular; /* толщина символа */
    color:#858585; /* цвет символа */
    margin: 0 5px;
}

/* Адаптация под мобильные устройства */
@media screen and (max-width: 1200px) {
    #breadcrumbs {
        max-width: 980px;
    }
}

@media screen and (max-width: 960px) {
    #breadcrumbs {
        max-width: 640px;
    }
}

@media screen and (max-width: 480px) {
    #breadcrumbs, #breadcrumbs a, #breadcrumbs span {
        font-size: 14px; /* размер шрифта в мобильной версии */
    }
}
</style>

<script>
  function generateBreadcrumbs() {
    var path = window.location.pathname.split('/').filter(function(e) { return e && e !== 'tproduct'; });
    var breadcrumbsContainer = document.getElementById('breadcrumbs');
    var breadcrumbs = '<a href="/">Главная</a>';

    for (var i = 0; i < path.length; i++) {
      var link = '/' + path.slice(0, i + 1).join('/');
      var name = i === path.length - 1 ? getProductName() : getCategoryName(link);

      if (i === path.length - 1) { 
        breadcrumbs += '<span>' + name + '</span>';
      } else {
        breadcrumbs += '<a href="' + link + '">' + name + '</a>';
      }
    }

    breadcrumbsContainer.innerHTML = breadcrumbs;
  }

  function getProductName() {
    var productNameElement = document.querySelector('[itemprop="name"]');
    return productNameElement ? productNameElement.textContent : 'Product';
  }

  function getCategoryName(link) {
    // Нормализация ссылки для сравнения
    var normalizedLink = normalizePath(link);
    // Поиск элемента по нормализованному пути
    var selector = `a[href$="${normalizedLink}"], a[href$="${normalizedLink}/"]`;
    var categoryLinkElement = document.querySelector(selector);
    return categoryLinkElement ? categoryLinkElement.textContent : link.split('/').pop().replace(/-/g, ' ').replace(/\?.*/, '');
  }

  // Функция для нормализации пути из URL
  function normalizePath(path) {
    return path.replace(/^(http(s)?:\/\/)?[^\/]+/, '').replace(/\/$/, '');
  }

  document.addEventListener('DOMContentLoaded', generateBreadcrumbs);
</script>

Частая ошибка. Если вы хотите, чтобы название КАТЕГОРИИ отображалось в ваших крошках, то наличие ссылки на категорию в навигации (будь то шапка или подвал продукта) — обязательно!!! В любом виде: бургер, выпадающий список, просто текст с ссылкой, как вам удобнее по дизайну.

Если у вас не будет ссылки на категорию в навигации (в шапке или в подвале продукта), то вместо названия категории в крошках вы получите просто ссылку на неё.

Код для потоков или новостей на Тильде


<!-- Разработка кода https://yason.studio -->

<!-- Наследуем шрифт из Тильдовского стиля текста  -->
<div class="t-text">
    <div id="breadcrumbs"></div>
</div>

<style>
/* Основные стили для хлебных крошек */
#breadcrumbs {
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    line-height: 1.55; /* Межстрочное расстояние */
    box-sizing: border-box;
    max-width: 1200px;
    font-family: inherit; /* Наследование шрифта */
}

#breadcrumbs a, #breadcrumbs span {
    color: black;
    text-decoration: none;
}

#breadcrumbs span {
    color: grey;
}

/* Оопределение разделителя */
#breadcrumbs a:not(:last-child)::after {
    content: " » "; /* сюда вставляй любой свой символ для разделителя */
    font-weight: regular; /* толщина символа */
    color:#858585; /* цвет символа */
    margin: 0 5px;
}

/* Адаптация под мобильные устройства */
@media screen and (max-width: 1200px) {
    #breadcrumbs {
        max-width: 980px;
    }
}

@media screen and (max-width: 960px) {
    #breadcrumbs {
        max-width: 640px;
    }
}

@media screen and (max-width: 480px) {
    #breadcrumbs, #breadcrumbs a, #breadcrumbs span {
        font-size: 14px; /* размер шрифта в мобильной версии */
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    createBreadcrumbs();

    function createBreadcrumbs() {
        const breadcrumbsContainer = document.getElementById('breadcrumbs');
        if (!breadcrumbsContainer) return;

        let breadcrumbsElements = ['<a href="/">Главная</a>']; // Начинаем с элемента "Главная"

        const categoryElement = document.querySelector('.t-feed__post-popup__tag');
        if (categoryElement) {
            const categoryName = categoryElement.textContent.trim();
            let categoryHref = categoryElement.getAttribute('href');

            // Декодируем URI
            categoryHref = decodeURIComponent(categoryHref);

            // Убираем домен из ссылки, если он присутствует
            categoryHref = categoryHref.replace(/^https?:\/\/[^\/]+/, '');

            // Убираем '#!' и все что после, если это есть в URL
            categoryHref = categoryHref.replace(/#!.*$/, '');

            // Получаем первый сегмент URL как категорию
            let pathSegments = categoryHref.split('/');
            if (pathSegments.length > 1 && pathSegments[1] !== '') {
                // Если первый сегмент существует и не пустой, используем его как ссылку на категорию
                categoryHref = `/${pathSegments[1]}`;
            } else {
                // Если после очистки URL остался только домен, используем ссылку на главную страницу
                categoryHref = '/';
            }

            // Если ссылка не ведет на главную страницу, формируем HTML для категории
            if (categoryHref !== '/') {
                breadcrumbsElements.push(`<a href="${categoryHref}">${categoryName}</a>`);
            }
        }

        const articleTitleElement = document.querySelector('.js-feed-post-title.t-feed__post-popup__title.t-title.t-title_xxs');
        if (articleTitleElement) {
            const articleTitle = articleTitleElement.textContent.trim();
            breadcrumbsElements.push(`<span>${articleTitle}</span>`); // Добавляем заголовок статьи
        }

        // Объединяем элементы без добавления разделителя
        breadcrumbsContainer.innerHTML = breadcrumbsElements.join('');
    }
});
</script>