О платформе

Тарифы

Загрузка...

Вход

Регистрация

Установить расширение

Апдейты

О НАС

КЛИЕНТАМ

РАБОТА

ПАРТНЁРАМ

СЛЕДИТЕ ЗА НАМИ

Главная

Тарифы

Отзывы

Модификации

Предложить идею

Заказать модификацию

Партнерская программа

ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:

Вакансии

Сотрудничество

Расширение

Модификации

Профиль

дней

...

Апдейты

Установить расширение

Техподдержка

Время настройки: 2 минуты

Как добавить корзину
в меню Zero block Tilda?

Модификация поможет убрать корзину в меню сделанное в Zero Block, настроить показ цены и количества товаров в корзине

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

Видео инструкция

Инструкция (Развернуть↓)

ВАЖНО:

Иконку с корзиной загрузите через шейп, как изображение она не будет работать;
Текст, который отвечает за сумму заказа, советуем включить выравнивание по правой стороне и ширина текстового элемента сделать с запасом, для того что бы сумма не переносилась на другую строчку;
Количество товаров можно сделать при помощи обычной кнопки. Задайте ей нужные размеры и цвет, после добавьте класс к ней;
Не включайте настройку "Не показывать кнопку открытия виджета. Ссылка для открытия виджета: #opencart"

1. Создаём своё меню в Zero block. Загружаем в него иконку для корзины, и вставляем текстовый блок, который будет отвечать за количество товаров и второй за сумму заказа;

2. Копируем классы из генератора и указываем у элементов, которые отвечат за корзину, сумму заказа и количество товаров;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс, что и в генераторе;

3. Указываем ссылку для пустой корзины (popup, якорная ссылка или ссылка на страницу с каталогом);

4. Если нужно указываем текст ДО цены;

5. Настраиваем показ суммы и количество при пустой корзине;

6. Устанавливаем блок корзины (ST100) на страницу;

7. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Сгенерировать пример

Добавить в корзину

О платформе

Цены

Click to order

Total:

Копировать код<!-- Как сделать корзину в zero block Tilda? --> 
<!-- https://nolim.cc/cart-zero-block -->
<style> .nolimCart{ height: inherit; cursor: pointer; } .nolimCart:hover{ transform: scale(1.05); }  .t706__carticon-wrapper, .t706__carticon{ display:none; }  .nolimElem{ pointer-events:none; } .cartcopyanim { -webkit-animation: t706__pulse-anim 0.6s; animation: t706__pulse-anim 0.6s; } </style> <script> $( document ).ready(function() { var hideMode = false; var counthide = 0; var pricehide = 0; function chkNum(){ let chCounter = window.tcart.total; let chPrice = window.tcart.prodamount; if (chPrice==0){ if(counthide == 1){ $('.nolimCount ').hide(); } else {$('.nolimCount ').show();} if(pricehide == 1){ $('.nolimPrice ').hide(); } else {$('.nolimPrice ').show();} $('.nolimPrice .tn-atom').html(''+ ' 0' + window.tcart.currency_txt_r); }else{$('.nolimPrice ').show();$('.nolimCount ').show();}; $('.nolimCount .tn-atom').html(chCounter); if(chCounter==0){ $('.nolimPrice .tn-atom').addClass('nolimElem'); } else { $('.nolimPrice .tn-atom').removeClass('nolimElem'); }; if(chCounter==''){ $('.nolimCount .tn-atom').html(''); }; }; $('.nolimCart .tn-atom').click(function(e){ e.preventDefault(); if(window.tcart.total == 0){ $('[href="#popup:test"]')[0].click(); } else { tcart__openCart(); } }); setTimeout(function(){ chkNum(); if ($('.nolimPrice .tn-atom').text() == 'Click to order'){ $('.nolimPrice .tn-atom').text(''); }; }, 550); $(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() { setTimeout(function(){chkNum();}, 300); $('nolimCart .tn-atom').addClass('cartcopyanim'); setTimeout(function(){ $('.nolimCart .tn-atom').removeClass('cartcopyanim');}, 1000); }); $(".t706").on('DOMSubtreeModified', ".t706__carticon-text", function() { var textprice = $('.t706 .t706__carticon-text').text().replace('= ','');$('.nolimPrice .tn-atom').text(''+textprice);let chPrice = window.tcart.prodamount; if (chPrice == 0) {$('.nolimPrice .tn-atom').html(''+ '0' + window.tcart.currency_txt_r);}}); }); </script> <a href="#popup:test" style="display:block"></a>