Free
Setup
Info
Info
Включено в подписку
Активируйте подписку Expand
Написать в поддержку
Настройки
[
Кастомизация
Telegram: @sonneto_support
]
Предварительный просмотр модификации доступен только в веб-версии.
Теги
Модификация
#
CSS
#
Кнопки
#
Интернет-магазин
#
Модификатор изменит вид отметок на карточках товаров.
Отметки SALE / NEW на карточке товара
id:
не доступно
<script>
$(document).ready(function() {
$('#rec1341557491 .t-store__card').each(function() {
// добавляем кнопку избранного
$(this).append('<div class="t-store__card__favorite">♥</div>');
});
// клик по кнопке
$(document).on('click', '#rec1341557491 .t-store__card__favorite', function() {
$(this).toggleClass('active');
});
});
</script>
<style>
#rec1341557491 .t-store__card__favorite {
position: absolute;
top: 4px;
right: 4px;
background: #1976d2;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
text-transform: none;
letter-spacing: 0.5px;
cursor: pointer;
z-index: 5;
transition: background 0.3s;
}
#rec1341557491 .t-store__card__favorite:hover {
background: #115293;
}
#rec1341557491 .t-store__card__favorite.active {
background: #d32f2f; /* красное при добавлении в избранное */
}
</style>
$(document).ready(function() {
$('#rec1341557491 .t-store__card').each(function() {
// добавляем кнопку избранного
$(this).append('<div class="t-store__card__favorite">♥</div>');
});
// клик по кнопке
$(document).on('click', '#rec1341557491 .t-store__card__favorite', function() {
$(this).toggleClass('active');
});
});
</script>
<style>
#rec1341557491 .t-store__card__favorite {
position: absolute;
top: 4px;
right: 4px;
background: #1976d2;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
text-transform: none;
letter-spacing: 0.5px;
cursor: pointer;
z-index: 5;
transition: background 0.3s;
}
#rec1341557491 .t-store__card__favorite:hover {
background: #115293;
}
#rec1341557491 .t-store__card__favorite.active {
background: #d32f2f; /* красное при добавлении в избранное */
}
</style>
- Добавляем каталог TS320N
- Далее добавляем блок T123 и вставляем в него подготовленный код.
- В коде пропишите номера блока с карточкой товара #rec**********
Настройки модификации
Инструкция, информация и код доступны только в веб-версии сайта.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Базовые настройки
- Цвет кнопок (чекбоксов) → 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-переменные (--var-name), чтобы упростить редактирование в будущем.
- Стили применяются как к фильтрам с классом .t-store__filter__custom-sel, так и к боковой панели .t951__sidebar.
- Скругление кнопок (border-radius: 30px) можно менять для других стилей (например, квадратные или овальные).
Подключение скриптов
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Инструкция, информация и код доступны только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.