Как сменить текст в корзине при отсутствии товаров на Tilda?

С помощью этой модификации можно задать собственный текст, который будет отображаться в пустой корзине ST100 вместо стандартной надписи. Также можно добавить кнопку, при нажатии на которую пользователь будет перенаправлен в каталог товаров. Модификация совместима как со стандартной корзиной, так и с корзиной с двухэтапным оформлением заказа.

Модификация работает с включенным Autoscale в блоках

Модификация работает только со стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Текст в пустой корзине

Выравнивание

Кнопка каталога

Настройки кнопки

Текст кнопки

Ссылка

Цвет фона

Цвет текста

Радиус углов

Цвет обводки

Толщина обводки

Настройки hover (эффект при наведении)

Цвет фона

Цвет текста

Цвет обводки

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<style> .ticode-cart-wrapper { text-align: left; margin-bottom: 20px; } .ticode-catalog-button { display: inline-block; padding: 10px 20px; background: #F96855; color: #ffffff !important; border-radius: 5px; text-decoration: none !important; border: 0px solid ; font-size: inherit; font-family: inherit; transition: background 0.3s; margin-top: 10px; display: none;; } .ticode-catalog-button:hover { background: #333; color: #fff !important; border-color: } </style> <script> document.addEventListener('DOMContentLoaded', function () { const TCDCartShop = new MutationObserver(() => { const TCNEwtext = document.querySelector('.t706__cartpage-products_empty'); if (TCNEwtext && !TCNEwtext.classList.contains('ticode-cart-applied')) { TCNEwtext.innerHTML = ` <div class="ticode-cart-wrapper t-name tn-name_xs"> В твоей корзине ничего нет :( Загляни в каталог! <br><br> <a href="#" class="ticode-catalog-button">Перейти к покупкам</a> </div> `; TCNEwtext.classList.add('ticode-cart-applied'); } }); TCDCartShop.observe(document.body, { childList: true, subtree: true }); }); </script> <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. В поле "Текст в пустой корзине" пишем текст который хотим показывать в пустой корзине и выбираем сторону для выравнивания в поле "Выравнивание";

2. Указываем дополнительные настройки в генераторе:
Кнопка каталога - если включено то под текстом будет показывать кастомную кнопку при клике на которую можно перенаправить пользователя на другую страницу, например в каталог;
Текст кнопки - указываем текст кнопки;
Ссылка - указываем ссылку для кнопки;
Цвет фона - указываем цвет фона кнопки;
Цвет текста - указываем цвет текста кнопки;
Радиус углов - указываем радиус скругления углов у кнопки. Если не нужно, оставляем поле пустым;
Цвет обводки и Толщина обводки - указываем толщину и цвет обводки или указываем 0 если обводка не нужна;

В настройках ховера при необходимости указываем цвет фона, текста и обводки.

3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под корзиной.

ОТКРЫТЬ ПУСТУЮ КОРЗИНУ