Заменяем чекбоксы на кнопки в фильтрах ST320N

Модификатор изменит вид фильтров для блока ST320N, заменив стандартные чекбоксы на кнопки

jQuery
Для корректной работы блоков подключите библиотеку jQuery:
Инструкция с подключением кода
Код скопирован!
Скопировать код
  1. Для удобства добавили комментарии в код, рядом с каждым пунктом
Шаг 2
В коде настраиваем цвет для кнопок
  1. Задаём класс uc-catalog
Шаг 3
Блоку с каталогом
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Шаг 1
Добавляем блок T123 и копируем в него код
Шаблон страницы
Код скопирован!
70352249
Нажми, чтобы скопировать номер
<style>
.uc-catalog .t-checkbox__indicator {
display: none!important;
}
.uc-catalog .t-store__filter__custom-sel .t-store__filter__title, .t951 .t951__sidebar .t-store__filter__item .t-checkbox__control{
padding: 5px 10px;
border-radius: 30px;
background: #E9E4D9; /*цвет кнопок*/
color: #726B5A!important; /*цвет текста в кнопках (можно задать в настройках блока и удалить строку) */
user-select: none;
width: fit-content
}
.t-store__filter__custom-sel {
background-color: transparent!important
}
.t-store__filter__custom-sel .t-store__filter__title {
width: fit-content
}
.uc-catalog .t951 .t951__sidebar .t-store__filter__item .t-checkbox__control.active, .t-store__filter__custom-sel.active .t-store__filter__title {
background: #D0CABB; /*цвет активной кнопки*/
color:#ffffff!important; /*цвет текста активной кнопки*/
}

</style>
<script>
$(function(){
var filterTistolsTimer = setInterval(function(){
if($('[name="Только товары в наличии"]')){
clearInterval(filterTistolsTimer);
$('[name="Только товары в наличии"]').on('change',function(){
if($(this).prop('checked') === true) {
$(this).parent().css('background','#726B5A') /*цвет текста кнопки "Только товары в наличии"*/
} else {
$(this).parent().css('background','#E9E4D9') /*цвет кнопки "Только товары в наличии"*/
}
})
}
},1000)
})
</script>
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Вам также может быть интересно:
Подпишитесь на наши обновления в телеграм