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

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

Setup
Info
Info
<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>
Теги

Модификация

#

CSS

#

Кнопки

#

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

#

Модификатор изменит вид отметок на карточках товаров.

Отметки SALE / NEW на карточке товара

id:
не доступно
  • Добавляем каталог 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 скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.