URL скопирован в буфер обмена!
Как добавить кнопку очистки корзины на Tilda?
С помощью этой модификации можно добавить в корзину ST100 кнопку, которая очищает все товары при клике. Можно задать собственный текст, стили оформления и эффект наведения. Поддерживаются как стандартная корзина, так и корзина с двумя этапами оформления. Если включён 5-секундный таймер на удаление товара, кнопка позволяет отменить удаление. При отсутствии товаров в корзине кнопка автоматически скрывается.
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Тип корзины
Текс кнопки очистки
Текс кнопки отмены
Цвет фона
Цвет текста
Радиус углов
Цвет обводки
Толщина обводки
Настройки hover (эффект при наведении)
Цвет фона
Цвет текста
Цвет обводки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD109--><script>
document.addEventListener('DOMContentLoaded', function () {
const TiCodetypeStart = false;
let TCDund = false;
let TCDbntsrt = false;
const Ticodecustmbtns = document.createElement('button');
Ticodecustmbtns.innerText = 'Очистить корзину';
Ticodecustmbtns.className = 'custom-clear-cart-btn';
let TCDrfbutton = null;
if (TiCodetypeStart) {
TCDbuttontxts = document.querySelector('.t706__sidebar-continue');
} else {
TCDbuttontxts = document.querySelector('.t-form__submit .t-submit');
}
const TCDclrbtnStyles = TCDbuttontxts ? getComputedStyle(TCDbuttontxts) : null;
if (TCDclrbtnStyles) {
const TCDbtnfamily = TCDclrbtnStyles.fontFamily;
Ticodecustmbtns.style.fontFamily = TCDbtnfamily;
} else {
}
const TiwrpTilda = document.createElement('div');
TiwrpTilda.style.display = 'flex';
TiwrpTilda.style.justifyContent = 'flex-end';
TiwrpTilda.appendChild(Ticodecustmbtns);
function TiCodeinsertButton() {
if (TCDbntsrt) return;
if (TiCodetypeStart) {
if (window.innerWidth < 960) {
const mobileTarget = document.querySelector('.t706__cartpage-info');
if (mobileTarget) {
mobileTarget.insertBefore(TiwrpTilda, mobileTarget.firstChild);
TCDbntsrt = true;
}
} else {
const TCDdesktopTarget = document.querySelector('.t706__sidebar-top');
if (TCDdesktopTarget) {
TCDdesktopTarget.parentNode.insertBefore(TiwrpTilda, TCDdesktopTarget.nextSibling);
TCDbntsrt = true;
}
}
} else {
const TCD2Target = document.querySelector('.t706__cartwin-top');
if (TCD2Target) {
TiwrpTilda.style.marginTop = '10px';
TiwrpTilda.style.marginBottom = '10px';
TiwrpTilda.style.justifyContent = 'flex-end';
TCD2Target.appendChild(TiwrpTilda);
TCDbntsrt = true;
}
}
}
function TCDupdtshoptildabtn() {
const delBtns = document.querySelectorAll('.t706__product-del');
const undoBtns = document.querySelectorAll('.t706__product-deleted__timer__return');
if (delBtns.length === 0 && undoBtns.length === 0) {
Ticodecustmbtns.style.display = 'none';
Ticodecustmbtns.innerText = 'Очистить корзину';
TCDund = false;
} else {
Ticodecustmbtns.style.display = 'inline-block';
if (undoBtns.length > 0) {
Ticodecustmbtns.innerText = 'Отменить';
TCDund = true;
} else {
Ticodecustmbtns.innerText = 'Очистить корзину';
TCDund = false;
}
}
}
Ticodecustmbtns.addEventListener('click', function () {
const undoBtns = document.querySelectorAll('.t706__product-deleted__timer__return');
if (TCDund && undoBtns.length > 0) {
undoBtns.forEach(btn => btn.click());
setTimeout(TCDupdtshoptildabtn, 500);
} else {
const delBtns = document.querySelectorAll('.t706__product-del');
delBtns.forEach(btn => btn.click());
setTimeout(TCDupdtshoptildabtn, 500);
}
});
const observer = new MutationObserver(() => {
window.requestAnimationFrame(TCDupdtshoptildabtn);
});
function initbtnTiclear() {
TiCodeinsertButton();
TCDupdtshoptildabtn();
const TCtildacartRoot = document.querySelector('#allrecords');
if (TCtildacartRoot) {
observer.observe(TCtildacartRoot, { childList: true, subtree: true });
}
}
initbtnTiclear();
window.addEventListener('resize', () => {
if (TiCodetypeStart) {
TCDbntsrt = false;
TiCodeinsertButton();
}
});
});
</script>
<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;
}
.custom-clear-cart-btn {
background-color: #f7d5ce;
color: #F96855;
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;
}
.custom-clear-cart-btn:hover {
background-color: #F96855;
color: #ffffff;
border: 0px solid ;
}
</style>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Добавляем на страницу блок корзины (ST100) и указываем в генераторе тип корзины (стандартна или оформление в два этапа) в зависимости от того какую настройку выбрали в самой корзине.
2. Указываем дополнительные настройки в генераторе:
Текс кнопки очистки и Текс кнопки отмены - можно указать свой текст, который будет показан на кнопке изначально и в момент клика по кнопке, если вы выбрали 5-секундную задержку перед удалением;
Цвет фона - указываем цвет фона кнопки;
Цвет текста - указываем цвет текста кнопки;
Радиус углов - указываем радиус скругления углов у кнопки. Если не нужно, оставляем поле пустым;
Цвет обводки и Толщина обводки - указываем толщину и цвет обводки или указываем 0 если обводка не нужна;
В настройках ховера при необходимости указываем цвет фона, текста и обводки.
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под корзиной.
Примечание! Корзина поддерживает мгновенное удаление и удаление с 5-секундным таймером. Во втором случае, пока работает таймер, при повторном клике по кнопке можно отменить удаление всех товаров. При пустой корзине кнопку очистки скроет.
2. Указываем дополнительные настройки в генераторе:
Текс кнопки очистки и Текс кнопки отмены - можно указать свой текст, который будет показан на кнопке изначально и в момент клика по кнопке, если вы выбрали 5-секундную задержку перед удалением;
Цвет фона - указываем цвет фона кнопки;
Цвет текста - указываем цвет текста кнопки;
Радиус углов - указываем радиус скругления углов у кнопки. Если не нужно, оставляем поле пустым;
Цвет обводки и Толщина обводки - указываем толщину и цвет обводки или указываем 0 если обводка не нужна;
В настройках ховера при необходимости указываем цвет фона, текста и обводки.
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под корзиной.
Примечание! Корзина поддерживает мгновенное удаление и удаление с 5-секундным таймером. Во втором случае, пока работает таймер, при повторном клике по кнопке можно отменить удаление всех товаров. При пустой корзине кнопку очистки скроет.
