Made on
Tilda
<script>
document.addEventListener("DOMContentLoaded", function(){
//Список вложенных разделов
let subsectionObj = {
"АЛКОГОЛЬНАЯ ПРОДУКЦИЯ": [
"Водка",
"Коньяк",
"Пиво",
"Сухое и полусухое вино",
"Сладкое и полусладкое вино",
"Игристое вино",
"Ликер, бальзам",
],
"МОРЕПРОДУКТЫ": [
"Сельдь и соленая рыба",
"Копченая рыба",
"Икра",
"Сушеная рыба",
"Консервированная рыба",
],
"КОНФЕТЫ": [
"Мармелад",
"Карамель",
"Шоколадные конфеты",
"Русский шоколад",
"Конфеты в коробках",
],
"МОЛОЧНЫЕ ПРОДУКТЫ": [
"Сгущенное молоко, карамель",
"Мороженое",
"Кисломолочные продукты",
"Творожные сырки",
"Сыр, сливочное масло",
],
"ЗАМОРОЖЕННЫЕ ПРОДУКТЫ": [
"Русские блины",
"Пельмени, вареники",
"Русские пироги и выпечка",
"Фрукты и ягоды",
],
"МАРИНОВАННЫЕ ОВОЩИ": [
"Лечо, салаты",
"Грибы",
],
"ВЫПЕЧКА": [
"Торты",
"Домашняя выпечка",
"Имбирный пряник",
"Сушки",
"Сухарики",
"Печенье, вафли",
"Хлеб",
],
"СЛАДОСТИ": [
"Халва",
"Джем, мед, повидло",
"Лукум",
"Зефир / пастила",
"Зерновые батончики",
],
"ЧАЙ И КОФЕ": [
"Горячий шоколад",
"Чай",
"Кофе",
],
"БЕЗАЛКОГОЛЬНЫЕ НАПИТКИ": [
"Лимонад",
"Русский квас",
"Соки, морс, кисель",
"Минеральная вода",
],
"ЗАКУСКИ (СЕМЕЧКИ/ОРЕШКИ/СНЭКИ)": [
"Закуски, орехи",
"Семечки",
],
};
//Удаляем сылки в меню
$('.t978__menu a').removeAttr('href');
//При клике в меню
$(document).on('click', '.t978__menu a', function(){
if( !$(this).hasClass('t978__menu-link_hook') ){
let elem = $(this);
let linkText = elem.text().toLowerCase();
if(linkText=='все товары') linkText='все';
$('.js-store-parts-switcher').each(function(){
let part = $(this);
let partText = part.text().toLowerCase();
if(partText==linkText){
part.click();
let subsection = part.closest('.subsection');
subsection.addClass('show-subsection');
subsection.prev('.main-chapter').addClass('open-chapter');
$('.t978__tooltip-menu').hide();
};
});
};
});
//При клике на крошку с подразделом
$(document).on('click', '.sub-crumb', function(){
let elem = $(this).find('a');
let linkText = elem.text().toLowerCase();
if(linkText=='все товары') linkText='все';
$('.js-store-parts-switcher').each(function(){
let part = $(this);
let partText = part.text().toLowerCase();
if(partText==linkText){
part.click();
let subsection = part.closest('.subsection');
subsection.addClass('show-subsection');
subsection.prev('.main-chapter').addClass('open-chapter');
};
});
});
//При клике по разделам
$(document).on('click', '.js-store-parts-switcher', function(){
setTimeout(function(){
let active = $('.js-store-parts-switcher.t-active');
if(active.length){
let partText = active.text().toLowerCase();
$('.t978__menu a').removeClass('t-active');
let mainText = -1;
$('.t758__link-item__wrapper a').removeClass('t758__link-item_active');
let arrow = `<span class="t758__breadcrumb-divider">→</span>`;
$('.t758__list li:eq(1) span').remove();
$('.t758__list .dop-crumb').remove();
//Если он содержит подраздел
if( active.hasClass('sub-chapter') ){
let subsection = active.closest('.subsection');
mainText = subsection.prev('.main-chapter').text().toLowerCase();
partText = partText.substr(0,1).toUpperCase()+partText.substr(1);
mainText = mainText.substr(0,1).toUpperCase()+mainText.substr(1);
let crumb1 = `<li class="t758__list_item dop-crumb sub-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item">${mainText}</a>
</div>
<span class="t758__breadcrumb-divider">→</span>
</li>`;
let crumb2 = `<li class="t758__list_item dop-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item t758__link-item_active">${partText}</a>
</div>
</li>`;
$('.t758__list li:eq(1)').append(arrow);
$('.t758__list').append(crumb1);
$('.t758__list').append(crumb2);
//Если не содержит подраздел
}else{
partText = partText.substr(0,1).toUpperCase()+partText.substr(1);
let crumb = `<li class="t758__list_item dop-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item t758__link-item_active">${partText}</a>
</div>
</li>`;
$('.t758__list li:eq(1)').append(arrow);
$('.t758__list').append(crumb);
};
$('.t978__menu a').each(function(){
let elem = $(this);
let linkText = elem.text().toLowerCase();
linkText = linkText.substr(0,1).toUpperCase()+linkText.substr(1);
if(partText==linkText || mainText==linkText ){
elem.addClass('t-active');
};
});
};
}, 600);
});
let shopComplete = true;
function prodComplete(){
//При загрузке товаров
let tistore = setInterval(function() {
setTimeout(function(){
//Если блоки магазина есть на странице
if ( document.querySelector('.js-store-grid-cont div') != null || document.querySelector('.t-store__prod-snippet__container') != null ){
clearInterval(tistore)
if(shopComplete){
shopComplete = false;
//Запускаем нашу основную функцию
setTimeout(function(){ makeSubsection(); }, 200);
};
};
}, 600);
}, 100);
};
prodComplete();
//Фунцция формирования разделов
function makeSubsection(){
//определяем основные разделы
Object.entries(subsectionObj).forEach((entry) => {
const [key, value] = entry;// раздел --- подраздел
//Ищем основные разделы
document.querySelectorAll('.js-store-parts-switcher').forEach(function(node) {
let caption = node.innerText; //получаем название раздела
if(key==caption) { // если нашли совпадение
node.classList.add('main-chapter');//задаём класс основному разделу
//Создаём контейнер для подразделов
const div = document.createElement('div');
div.className = 'subsection';
node.after(div);//Помещаем подраздела за основным разделом
//Ищем подразделы в этот разделе
for(var i = 0; i < value.length; i++) {
document.querySelectorAll('.js-store-parts-switcher').forEach(function(elem) {
let tName = elem.innerText;
if(value[i]==tName) {//Если нашли нужный подраздел
elem.classList.add('sub-chapter');//задаём класс подразделу
div.appendChild(elem);//перемещаем подраздел в нужный раздел
};
});
};
};
});
});
//Поиск активного раздела при открытии страницы, чтобы раскрыть основной раздел
document.querySelectorAll('.js-store-parts-switcher').forEach(function(component) {
if( component.classList.contains('sub-chapter') && component.classList.contains('t-active') ) {
component.closest('.subsection').classList.add('show-subsection');
component.previousElementSibling.classList.add('open-chapter');
};
});
//Активация меню активного пункта при загрузке страницы + построение крошек
let active = $('.js-store-parts-switcher.t-active');
if(active.length){
let partText = active.text().toLowerCase();
$('.t978__menu a').removeClass('t-active');
mainText = -1;
$('.t758__link-item__wrapper a').removeClass('t758__link-item_active');
let arrow = `<span class="t758__breadcrumb-divider">→</span>`;
$('.t758__list li:eq(1) span').remove();
$('.t758__list .dop-crumb').remove();
//Если он содержит подраздел
if( active.hasClass('sub-chapter') ){
let subsection = active.closest('.subsection');
mainText = subsection.prev('.main-chapter').text().toLowerCase();
partText = partText.substr(0,1).toUpperCase()+partText.substr(1);
mainText = mainText.substr(0,1).toUpperCase()+mainText.substr(1);
let crumb1 = `<li class="t758__list_item dop-crumb sub-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item">${mainText}</a>
</div>
<span class="t758__breadcrumb-divider">→</span>
</li>`;
let crumb2 = `<li class="t758__list_item dop-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item t758__link-item_active">${partText}</a>
</div>
</li>`;
$('.t758__list li:eq(1)').append(arrow);
$('.t758__list').append(crumb1);
$('.t758__list').append(crumb2);
//Если не содержит подраздел
}else{
partText = partText.substr(0,1).toUpperCase()+partText.substr(1);
let crumb = `<li class="t758__list_item dop-crumb">
<div class="t758__link-item__wrapper">
<a class="t-menu__link-item t758__link-item_active">${partText}</a>
</div>
</li>`;
$('.t758__list li:eq(1)').append(arrow);
$('.t758__list').append(crumb);
};
$('.t978__menu a').each(function(){
let elem = $(this);
let linkText = elem.text().toLowerCase();
linkText = linkText.substr(0,1).toUpperCase()+linkText.substr(1);
if(partText==linkText || mainText==linkText ){
elem.addClass('t-active');
};
});
};
};
//При раскрытии основного раздела
document.addEventListener('click', function(e){
if (e.target.classList.contains("main-chapter")) {
e.target.classList.toggle('open-chapter');//переключаем класс раздела
e.target.nextElementSibling.classList.toggle('show-subsection');//переключаем класс блока с подразделами
};
});
});
</script>
<style>
.dop-crumb{
cursor: pointer;
}
.t951 .t-store__parts-switch-btn.t-active {
font-weight: 600 !important;
}
.t978__menu a {
cursor: pointer;
}
.subsection {
display: flex;
flex-wrap: wrap;
padding-left: 15px;
display: none;
}
.subsection.show-subsection{
display: block;
}
.sub-chapter {
width: 100%;
}
.main-chapter {
text-decoration: underline;
display: flex;
align-items: center;
}
.js-store-parts-switcher.t-store__parts-switch-btn.sub-chapter {
font-size: 14px;
opacity: 0.8;
}
.main-chapter:after {
content: "";
background-image: url(https://static.tildacdn.net/tild3837-6431-4465-b265-383663343966/arrow_down_icon_1842.svg);
width: 20px;
height: 20px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
margin-left: 8px;
transition: all 0.3s ease-in-out;
}
.open-chapter.main-chapter:after {
transform: rotate(180deg);
}
.t-store__filter__item.t-store__filter__item_select.js-store-filter-item {
display: none;
}
@media screen and (max-width: 960px){
.js-store-parts-switcher.t-store__parts-switch-btn{
font-size: 16px;
font-weight:300;
display: flex;
margin-left: 0;
}
.js-store-parts-switcher.t-store__parts-switch-btn.sub-chapter.t-active {
font-weight: 600;
}
.t-store__parts-switch-wrapper {
max-height: 200px;
overflow-y: auto;
}
.t951__sidebar-wrapper ::-webkit-scrollbar-thumb {
background: #6CA602;
border-radius: 10px;
}
.t951__sidebar-wrapper ::-webkit-scrollbar {
width: 5px;
height: 5px;
background: #000000;
}
}
</style>