<style>
@media screen and (min-width: 960px) {
.custom-filter {
margin-bottom: 15px !important;
/* Толщина и цвет разделителя между фильтрами */
border-bottom: 1px solid #dcdcdc;
/* Нижний отступ внутри фильтра */
padding-bottom: 10px;
}
.custom-filter:last-child {
border-bottom: none;
}
.custom-filter .t-store__filter__item-title {
margin-bottom: 10px !important;
/* Выравнивание заголовка фильтра и иконки */
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: margin 0.2s ease;
}
.custom-filter .custom-icon {
/* Размер иконки стрелки */
width: 14px;
height: 14px;
/* Отступ между текстом и иконкой */
margin-left: 8px;
flex-shrink: 0;
/* Анимация поворота */
transition: transform 0.3s ease;
}
/* Поворот иконки при открытии фильтра */
.custom-filter.custom-filter--open .custom-icon {
transform: rotate(180deg);
}
/* Скрыть иконку у несворачиваемых фильтров (например, "Цена") */
.custom-filter.always-open .custom-icon {
display: none;
}
}
</style>
<script type="text/javascript">
(function () {
// Названия фильтров, которые всегда раскрыты и не сворачиваются
const ALWAYS_OPEN_TITLES = ['Цена'];
// Классы для логики фильтра
const CLASS_FILTER = 'custom-filter';
const CLASS_OPEN = 'custom-filter--open';
const CLASS_ALWAYS_OPEN = 'always-open';
// Кастомная иконка. Можно заменить ссылку на другую SVG/PNG
const ICON_HTML = `
<!-- Кастомная иконка стрелки -->
<img class="custom-icon" src="https://static.tildacdn.com/tild6262-3462-4830-b231-343864616165/Right_arrow.svg"
alt="icon" />
`;
// Вспомогательная функция для нормализации текста
function normalize(str) {
return str.replace(/\s+/g, '').toLowerCase();
}
function isAlwaysOpen(title) {
return ALWAYS_OPEN_TITLES.some(t => normalize(t) === normalize(title));
}
// Храним, какие фильтры открыты, чтобы восстанавливать после перерендеров
let openFilters = [];
function saveOpenFiltersState() {
openFilters = [];
$('.' + CLASS_FILTER).each(function () {
const $filter = $(this);
const titleText = $filter.find('.js-store-filter-item-title').text();
if ($filter.hasClass(CLASS_OPEN) && !isAlwaysOpen(titleText)) {
openFilters.push(normalize(titleText));
}
});
}
function restoreOpenFiltersState() {
$('.' + CLASS_FILTER).each(function () {
const $filter = $(this);
const $title = $filter.find('.js-store-filter-item-title');
const titleText = $title.text();
if (isAlwaysOpen(titleText)) {
$filter.addClass(CLASS_OPEN).addClass(CLASS_ALWAYS_OPEN);
$filter.find('.t-store__filter__item-controls-wrap').show();
} else if (openFilters.includes(normalize(titleText))) {
$filter.addClass(CLASS_OPEN);
$filter.find('.t-store__filter__item-controls-wrap').show();
} else {
$filter.removeClass(CLASS_OPEN);
$filter.find('.t-store__filter__item-controls-wrap').hide();
}
});
}
// Основная инициализация фильтров
function initCustomFilters() {
if (window.innerWidth < 960) return;
$('.t-store__filter__item').each(function () {
const $filter = $(this);
const $title = $filter.find('.js-store-filter-item-title').first();
const titleText = $title.text();
$filter.addClass(CLASS_FILTER);
if (isAlwaysOpen(titleText)) $filter.addClass(CLASS_ALWAYS_OPEN);
$title.find('.custom-icon').remove(); // Удаляем старую иконку
$title.append(ICON_HTML); // Добавляем кастомную иконку
if (isAlwaysOpen(titleText)) {
$filter.addClass(CLASS_OPEN);
$filter.find('.t-store__filter__item-controls-wrap').show();
}
});
// Убираем стандартное поведение и навешиваем кастомную логику
$('.js-store-filter-item-title').off('click');
$('.js-store-filter-item-title').on('click', function () {
const $title = $(this);
const $filter = $title.closest('.' + CLASS_FILTER);
const titleText = $title.text();
if (isAlwaysOpen(titleText)) return;
$filter.find('.t-store__filter__item-controls-wrap').stop().slideToggle(200);
$filter.toggleClass(CLASS_OPEN);
saveOpenFiltersState(); // Обновляем состояние при клике
});
}
// Повторная инициализация после динамического обновления каталога
const initWhenReady = (() => {
const readyFlags = { dom: false, store: false, zero: false };
function tryInit() {
const storeLoaded = document.querySelector('.js-store-grid-cont') ? readyFlags.store : true;
const zeroLoaded = document.querySelector('.t396__artboard') ? readyFlags.zero : true;
if (readyFlags.dom && storeLoaded && zeroLoaded) {
initCustomFilters();
restoreOpenFiltersState();
}
}
document.addEventListener('DOMContentLoaded', () => {
readyFlags.dom = true;
tryInit();
});
document.querySelectorAll('.js-store-grid-cont').forEach(el => {
el.addEventListener('tStoreRendered', () => {
readyFlags.store = true;
tryInit();
});
});
document.querySelectorAll('.t396__artboard').forEach(el => {
el.addEventListener('artBoardRendered', () => {
readyFlags.zero = true;
tryInit();
});
});
})();
})();
</script>