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

Небольшое дополнение для ваших интернет-магазинов на Тильде, которое позволит сделать UX чуть лучше. В мобильной версии добавляет в меню фильтров витрины магазина кнопку «Свернуть» в самый конец.
<!-- Добавить кнопку «Свернуть» к фильтрам магазина в мобильной версии | https://necodim.ru/tilda/mobile-shop-filters -->

<script> (function(){ 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