Setup
Info
Info
Включено в подписку
Скопировано!
Поделиться
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
URL скопирован в буфер обмена!
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 скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!