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

Модификатор изменит вид фильтров для блока ST320N, заменив стандартные чекбоксы на кнопки
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
49933335
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Создаем блок T123 и копируем в него код
1 шаг
Скопировать код
В коде настраиваем цвет для кнопок
  1. Для удобства добавили комментарии в код, рядом с каждым пунктом
2 шаг
Блоку с каталогом
  1. Задаём класс uc-catalog
3 шаг
<!-- SH03 - Модификация для Тильды. Заменяем чекбоксы на кнопки в фильтрах ST320N https://mod.tistols.com/filter-checkbox -->
<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>
Больше модификаций доступно по подписке
Полный доступ к 55+ модификациям
Обновления библиотеки
Оповещения о новых модификациях
Тех.поддержка в чате
Поддержка модов при изменениях в Tilda
Модуль подарочные карты тариф Lite на месяц
Помощь в доработке модификации
Поддержка модов при изменениях в Tilda
Тех.поддержка в чате
Модуль smsmod.ru на год
Сертификат на разработку 3 модификаций
Модуль подарочные карты тариф Pro на месяц
Оповещения о новых модификациях
Обновления библиотеки
Полный доступ к 55+ модификациям
Оповещения о новых модификациях
Обновления библиотеки
Полный доступ к 14+ модификациям
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
Free
0 руб.
Месяц
Год
Pro
250 руб.
-50%
/ месяц
Club
1 500 руб.
-40%
Месяц
Год
/ месяц
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
Полный доступ к 55+ модификациям
Обновления библиотеки
Оповещения о новых модификациях
Тех.поддержка в чате
Поддержка модов при изменениях в Tilda
Модуль подарочные карты тариф Lite на месяц
Помощь в доработке модификации
Поддержка модов при изменениях в Tilda
Тех.поддержка в чате
Модуль smsmod.ru на месяц
Сертификат на разработку 1 модификаций
Модуль подарочные карты тариф Lite на месяц
Оповещения о новых модификациях
Обновления библиотеки
Полный доступ к 55+ модификациям
Оповещения о новых модификациях
Обновления библиотеки
Полный доступ к 14+ модификациям
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
Free
0 руб.
Месяц
Год
Pro
500 руб.
/ месяц
Club
2 500 руб.
Месяц
Год
/ месяц
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
Вам также может быть интересно: