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

С помощью данной инструкции вы сможете добавить кнопку, сворачивающую фильтры в мобильной версии.

Zero-блок

Добавить кнопку «Свернуть» к фильтрам магазина в мобильной версии
Инструкция для установки
Видеоинструкция
Текстовая инструкция
Появится в течении дня
1. На сайте в местах, где хотите отобразить email, напишите любое слово, например «email», и сделайте из него ссылку на #email.
2. Разместите скрипт в футере или на тех страницах, где планируете использовать модификацию в блоке T123.
Эта модификация доступна
только по подписке
Генератор кода
Надпись в кнопке
Скопировать код
Код скопирован
Код с вашими параметрами
<!-- Добавить кнопку «Свернуть» к фильтрам магазина в мобильной версии
| https://twikup.ru/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: 960px) { .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: 240px)
	{ .t-store__filter__item + .t-store__filter__item .collapse { display:
	none; } }
</style>
Могут быть интересны
Тебе нужна помощь
с установкой или возник
вопрос по сервису?