Добавить кнопку «Свернуть» к фильтрам магазина в мобильной версии

Небольшое дополнение для ваших интернет-магазинов на Тильде, которое позволит сделать UX чуть лучше. В мобильной версии добавляет в меню фильтров витрины магазина кнопку «Свернуть» в самый конец.
<!-- Добавить кнопку «Свернуть» к фильтрам магазина в мобильной версии | https://necodim.ru/tilda/mobile-shop-filters -->
<script>
const collapseFilters = (e) => {
    e.target.closest('.t-store__filter').querySelector('.js-store-filter-mob-btn.active').click();
}

const btnFilterCollabse = (catalogBlock) => {
    if (catalogBlock && !catalogBlock.querySelector('.collapse-item')) {
        let filterOptions = catalogBlock.querySelector('.t-store__filter__options ');
        let filterOptionWrapper = document.createElement('div');
        filterOptionWrapper.classList.add('t-store__filter__item', 'collapse-item', 'js-store-filter-item', 't-descr', 't-descr_xxs');
        filterOptions.appendChild(filterOptionWrapper);
        let btnCollapse = document.createElement('div');
        btnCollapse.classList.add('collapse');
        btnCollapse.innerHTML = 'Свернуть ↑';
        filterOptionWrapper.appendChild(btnCollapse);
        btnCollapse.addEventListener('click', collapseFilters);
    }
}

document.querySelectorAll('.js-store-grid-cont').forEach(catalog => {
    catalog.addEventListener('tStoreRendered', (e) => {
        if (document.body.clientWidth < 960) btnFilterCollabse(e.target.closest('.t-rec'));
    });
});
</script>

<style>
.t-store__filter__options .collapse {
    cursor: pointer;
}
@media screen and (max-width: 966px) {
    .t-store__filter__item:last-child, .t-store__filter__item.t-store__filter__item_sort-mobile:last-child {
        border-bottom: none !important;
    }
}
@media screen and (min-width: 967px) {
    .t-store__filter__item + .t-store__filter__item .collapse {
        display: none;
    }
}
</style>
Пример работы модификации
Будет видно, естественно, только в мобильной версии :)
Made on
Tilda