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

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

Модификация поможет убрать корзину в стандартное меню вместо какой-то из иконок, загрузить свою иконку и настроить цвет фона и количества
Генератор кода
Видео инструкция
Инструкция (Развернуть↓)
ВАЖНО:

  • Работает с блоками: ME203A, ME301, ME302, ME303, ME303A, ME304, ME405;
  • Модификация не работает на разрешениях экрана меньше 981px, по этому в блоке корзины (ST100) советуем продублировать настройки цветов и загрузить свою иконку и туда тоже;
  • Не включайте настройку "Не показывать кнопку открытия виджета. Ссылка для открытия виджета: #opencart"

1. Копируем ссылку #cart из генератора и вставляем в меню на любую соцсеть;

2. Вставляем галерею GL12 и загружаем в неё свою иконку. Копируем её ссылку и вставляем в генератор. Формат иконки советуем использовать svg или png;

3. Настраиваем цвет фона и текста у количества;

4. Настраиваем показ цены при наведении;

Цвет фона плашки под ценой и цвет цены настраиваются в блоке корзины (ST100);

5. Настраиваем размер корзины:

  • 30х30px - такая же как иконки
  • 40х40px - больше чем иконки
6. Устанавливаем блок корзины (ST100) на страницу и настраиваем ее для расширений до 981px;

7. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Click to order
Total: 
Your Name
Your Email
Your Phone
Class элемента
Копировать код<!-- Как добавить корзину в стандартное меню Tilda? -->
<!-- https://nolim.cc/cart-in-menu -->
<style> 
[href="#cart"] .t706__carticon-text { right: initial; left: 130%; } [href="#cart"] .t706__carticon-text:after { left: -20px; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
[href="#cart"] svg { background-image:url(https://image.flaticon.com/icons/png/512/630/630746.png); background-position:center center; background-size:cover; transition:all .1s ease; width: 40px; height: 40px; } [href="#cart"] svg *{ display:none; } [href="#cart"] svg:hover{ transform:scale(1.05); background-image:relative; } .t706__carticon-counter { font-size: 12px; padding: 0px 6px 0px 5px; width: inherit; height: 15px; line-height: 16px; } @media screen and (min-width: 981px){ [href="#test"] { position: relative; display: block !important; } .t706__carticon { display: none !important; } } @media screen and (max-width: 980px){ [href="#test"] { display: none !important; } } [href="#cart"][count]:after { content: attr(count); font-size: 12px; padding: 0px 6px 0px 5px; width: inherit; height: 15px; line-height: 16px; background-color: red; color: #fff; border-radius: 30px; position: absolute; right: -3px; top: -3px; text-align: center; display: inherit; font-family: Arial,Helvetica,sans-serif; } .blkElem{ pointer-events:none; } .cartcopyanim { -webkit-animation: t706__pulse-anim 0.6s; animation: t706__pulse-anim 0.6s; } .cartcopy_elem .tn-atom , .cartprice_elem .tn-atom { display:none; }
@media screen and (min-width: 960px) { [href="#cart"]:hover .t706__carticon-text { opacity:1!important; cursor: pointer; pointer-events: initial } }
</style> <script> $(document).ready(function() {
$('.t706__carticon-text').clone().appendTo($('[href="#cart"]'));
$('[href="#cart"]').click(function(e){ e.preventDefault(); if(window.tcart.total == 0){ $('[href="#some"]')[0].click(); } else { tcart__openCart(); } }); $(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() { let nlcount = window.tcart.total; if (nlcount==0){ $('[href="#cart"]').removeAttr('count'); } else { $('[href="#cart"]').attr('count', nlcount); } $('[href="#cart"]').addClass('cartcopyanim'); setTimeout(function(){ $('[href="#cart"]').removeClass('cartcopyanim');}, 1000); }); });
</script> <a href="#some" style="display:none"></a>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda