Pro
Setup
Info
Info
Включено в подписку
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
Setup
Info
Info
<style>
/* Родительский блок кнопки на странице корзины */
.t706__cartpage-info {
margin-top: 10px !important; /* можно менять отступ сверху */
}

.t706__cartwin-top {
display: flex !important;
align-content: center !important;
justify-content: space-between !important;
align-items: baseline !important;
padding: 0 !important;
}

/* Настройки кнопки "Очистить корзину" */
.sonneto-clear-cart-btn {
background-color: #09090b; /* <<< ЗДЕСЬ ФОН КНОПКИ >>> */
color: #fbfbfb; /* <<< ЗДЕСЬ ЦВЕТ ТЕКСТА КНОПКИ >>> */
padding: 10px 20px; /* <<< ОТСТУПЫ ВНУТРИ КНОПКИ >>> */
cursor: pointer;
border: 0px solid ; /* <<< ЦВЕТ И ТОЛЩИНА ОБВОДКИ >>> */
border-radius: 5px; /* <<< РАДИУС УГЛОВ КНОПКИ >>> */
margin: 0 0 10px auto; /* <<< ОТСТУПЫ ВНЕ КНОПКИ >>> */
box-sizing: border-box;
transition: all 0.3s ease;
}

/* Hover-эффект кнопки */
.sonneto-clear-cart-btn:hover {
background-color: #F4F4F5; /* <<< ФОН ПРИ НАВЕДЕНИИ >>> */
color: #09090b; /* <<< ЦВЕТ ТЕКСТА ПРИ НАВЕДЕНИИ >>> */
border: 0px solid ; /* <<< ОБВОДКА ПРИ ХОВЕРЕ >>> */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
// Текст кнопки можно менять здесь:
const sonnetoCustmBtn = document.createElement('button');
sonnetoCustmBtn.innerText = 'Очистить корзину'; /* <<< ТЕКСТ КНОПКИ >>> */
sonnetoCustmBtn.className = 'sonneto-clear-cart-btn';

// Родительский блок, куда вставляется кнопка
const sonnetoWrapper = document.createElement('div');
sonnetoWrapper.style.display = 'flex';
sonnetoWrapper.style.justifyContent = 'flex-end'; /* <<< Выравнивание кнопки >>> */
sonnetoWrapper.appendChild(sonnetoCustmBtn);

// Здесь кнопка вставляется на страницу
function sonnetoInsertButton() {
const targetBlock = document.querySelector('.t706__cartwin-top');
if (targetBlock) {
sonnetoWrapper.style.marginTop = '10px'; /* <<< Отступ сверху блока кнопки >>> */
sonnetoWrapper.style.marginBottom = '10px'; /* <<< Отступ снизу блока кнопки >>> */
sonnetoWrapper.style.justifyContent = 'flex-end';
targetBlock.appendChild(sonnetoWrapper);
}
}

sonnetoInsertButton();
});
</script>
Настройки модификации

  • Добавляем корзину ST100

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

Теги

Модификация

#

CSS

#

Кнопки

#

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

#

  • В коде прописываем все необходимые значения (текст, цвет фона кнопки каталога если хотите добавить)

Модификатор добавляет на страницу корзины кнопку «Очистить корзину», которая управляет удалением всех товаров или отменой очистки.

Кнопка "Очистить корзину"

не доступно
id:
Скопировано!
Скопировать код
Подключение скриптов
Базовые настройки
  • Кнопка создаётся через JS и вставляется в блок .t706__cartwin-top (или в мобильный блок .t706__cartpage-info, если включён мобильный режим).

  • Текст кнопки можно менять через sonnetoCustmBtn.innerText.

  • Цвет фона, цвет текста, радиус углов, обводка и отступы настраиваются в классе .sonneto-clear-cart-btn.

  • Кнопка корректно работает на страницах с динамическим обновлением товаров благодаря MutationObserver.

  • Для правильного отображения кнопки родительский блок должен поддерживать display: flex, чтобы кнопка выравнивалась по правому краю.
Технические советы
  • Если текст кнопки длинный, проверяйте корректность отображения и переносов строк.

  • Цвета фона и текста можно менять в CSS:
background-color — фон кнопки
color — цвет текста кнопки
border-radius — радиус углов
border — цвет и толщина обводки

  • Hover-эффект настраивается отдельно через .sonneto-clear-cart-btn:hover.

  • При большом количестве товаров или частых изменениях корзины может быть небольшая нагрузка на рендеринг → оптимально использовать на ключевых страницах.

  • Для мобильных устройств проверьте, чтобы кнопка корректно отображалась и не выходила за пределы контейнера.

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

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

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