Pro
Setup
Info
Info
Включено в подписку
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]

Предварительный просмотр модификации доступен только в веб-версии.

Setup
Info
Info
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: #7046F7; /*цвет кнопок*/
color: #fbfbfb!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: #E1FC52; /*цвет активной кнопки*/
color:#000!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>
Теги

Модификация

#

CSS

#

Кнопки

#

Интернет-магазин

#
Настройки модификации

  • Добавляем каталог TS320N

  • Назначаем ему класс: uc-catalog

  • Далее добавляем блок T123 и вставляем в него подготовленный код.

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

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

не доступно
id:
Скопировано!
Скопировать код
Подключение скриптов
Базовые настройки
  • Цвет кнопок (чекбоксов) → background: #7046F7

  • Цвет текста в кнопках → color: #fbfbfb!important (можно настроить в блоке и убрать строку из CSS)

  • Скругление кнопок → border-radius: 30px

  • Цвет активной кнопки → background: #E1FC52

  • Цвет текста активной кнопки → color: #000!important

  • Цвет кнопки “Только товары в наличии” (если включено) → background: #726B5A

  • Цвет кнопки “Только товары в наличии” (если выключено) → background: #E9E4D9

  • Отступы внутри кнопок → padding: 5px 10px

  • Ширина кнопок → width: fit-content (автоматически подстраивается под длину текста)
Технические советы
  • Скрываются стандартные индикаторы чекбоксов .t-checkbox__indicator, вместо них используются стилизованные контейнеры.

  • Для работы с фильтрами используется jQuery: скрипт отслеживает состояние чекбокса Только товары в наличии и динамически меняет цвет его кнопки.

  • Проверка выполняется циклически (setInterval) до тех пор, пока элемент не станет доступен, после чего таймер останавливается.

  • Если в магазине используется много фильтров, стоит учитывать, что каждая кнопка подстраивается по ширине под текст.

  • Цвета лучше настраивать в переменных (CSS custom properties), чтобы упростить редактирование в будущем.

  • Стили применяются как к фильтрам с классом .t-store__filter__custom-sel, так и к боковой панели .t951__sidebar.
  • Скругление кнопок (border-radius: 30px) можно менять для других стилей (например, квадратные или овальные).

Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().

Информация о кастомизации кода доступна только в веб-версии сайта.

Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!