Как создать хлебные крошки на странице товара каталога Tilda

Как создать хлебные крошки на странице товара каталога Tilda

1
Если переключаем блоки магазина через вкладки ME602, то задаём блоку ME602 класс uc-tab-block
2
Ставим код 1 в блок Т123 на страницу с товарной сеткой
3
Создаём продуктовый header и добавляем там блок для крошек ME605
и задаём ей класс uc-bread-crumbs
Заполняем блок, смотри рисунок ниже
4
Ставим код 2 в блок Т123 на страницу продуктового header
Библиотека для примера
Код 1 для товарной сетки

<!--Код для крошек в  товарную сетку -->
<script>
$(document).ready(function(){
//При нажатии на кнопку подробнее 
$(document).on('mousedown', 'a[href*="/tproduct/"]', function(){
    
    let tabTitle = '';
    let productLinkBack = '';
    
    //Получаем блок с табами
    let tab = $('.uc-tab-block');
    
    if(tab.length){
        //Получаем ID этого блока
        let id = tab.attr('id').replace(/[^0-9]/gi, '');
        //Получаем номер активного таба
        let tabNumber = tab.find('[class*="tab_active"]').attr("data-tab-number");
        //Получаем название раздела
        tabTitle = tab.find('[class*="tab_active"] .t-name').text();
        //Формируем ссылку
        productLinkBack = `${location.pathname}#!/tab/${id}-${tabNumber}`;
        
    }else{
        
        //Получаем название страницы
        tabTitle = document.title;
        productLinkBack = location.pathname;
        
    };
    
    //Сохраняем ссылку в хранилище
    localStorage.setItem('productLinkBack', productLinkBack);  
    //Сохраняем название раздела в хранилище
    localStorage.setItem('productPartName', tabTitle);  
     
});
    
});
</script>
Код 2 для крошек в product-header

<!--Код для крошек в product-header-->
<script>
$(document).ready(function(){
    
//Проверяем записи в хранилище
let productLinkBack = localStorage.getItem('productLinkBack'); //Ссылка
let productPartName = localStorage.getItem('productPartName'); //Название раздела

//Если данных о ссылке нет
if ( productLinkBack == null && productPartName == null ) {

    //Получаем преыдущую страницу в записи allrecords
    let recordsAlias = $('#allrecords').attr('data-tilda-page-alias');
    //Если записи нет
    if(recordsAlias==undefined){
        //Скрываем вторую крошку
        $('.uc-bread-crumbs li:eq(1)').hide();
    //Если запись присутствует    
    }else{
        //Записываем во вторую крошку название и ссылку
        $('.uc-bread-crumbs li:eq(1) .t-menu__link-item').attr('href',`/${recordsAlias}`).text(`Предыдущий раздел`);
    };

//Если данные о ссылке присутствуют
}else{
    //Записываем во вторую крошку название и ссылку
    $('.uc-bread-crumbs li:eq(1) .t-menu__link-item').attr('href', productLinkBack ).text(productPartName);
};


//Дожидаемся загрузки продукта
function prodComplete(){
//При загрузке товаров
let tistore = setInterval(function() {
    setTimeout(function(){
        if (  $('.t-store__prod-snippet__container').length>0   ){
            clearInterval(tistore) 
            setTimeout(function(){
                fillThirdBreadCrumbs();
           }, 200); 
        };
    }, 600);
    
}, 100);   
};

prodComplete();

//Формируем 3ю крошку
function fillThirdBreadCrumbs(){
    let productName = $('.t-store__product-snippet .t-store__prod-popup__name').text();
    //Записываем в третью крошку название продукта
    $('.uc-bread-crumbs li:eq(2) .t-menu__link-item').text(productName);
};


    
});
</script>
Made on
Tilda