Loading...
Время настройки: 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: 
Your Name
Your Email
Your Phone
Class элемента
Копировать код<!-- Как сделать корзину в 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>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda