Как сделать свою корзину в меню из ZeroBlock в Tilda
SWIM
STORE
0
=
0
SWIM
ACCESSORIES
GOOGLES YELLOW
SWIMMING GLASSES
GOOGLES BLACK

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

1
Создали ZeroBlock
2
Добавили в него элемент Image с иконкой корзины и 2 элемента Text с цифрой 0 (для количества товара) и знаком = (для суммы заказа)
Задали класс для текста с кол-вом и для иконки корзины cartcopy_elem
Задали класс для текста с ценой cartprice_elem
3
Создали блок с корзиной ST100
4
Добавили код на страницу, в блок Другое - Т123

Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём свою иконку корзины и избранного в ZeroBlock. Создаём товар с кнопками "купить" и "добавить в избранное" прямо в ZeroBlock
Фрагмент видео
Библиотека для примера

<style>
.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 {
    opacity:0;
    pointer-events: none;
}
.r .show-cart{
    opacity: 1;
    pointer-events: auto;
}
.cartcopy{cursor:pointer}
.t706__carticon {display: none !important;} 
</style>
<script>
$( document ).ready(function() {
   let hideMode = false; //Скрыть-Показать пустую корзину - true-false
   $('.cartcopy_elem .tn-atom').addClass('cartcopy');
   $('.cartprice_elem .tn-atom').addClass('cartcopyprice');
   function chkNum(){
   if (window.tcart === undefined) { return; }
   if(!hideMode) $('.cartcopy, .cartcopyprice').addClass('show-cart');   
   let chCounter = window.tcart.total;
   let chPrice = window.tcart.prodamount;
   if  (chPrice==0){
        $('div[data-elem-type="text"] .cartcopyprice').html(''); 
        if(hideMode) {$('.cartcopy, .cartcopyprice').removeClass('show-cart')
        }else{$('.cartcopy, .cartcopyprice').addClass('show-cart'); };
   }else{ 
       $('div[data-elem-type="text"] .cartcopyprice').html(chPrice+' руб'); 
          if(hideMode) $('.cartcopy, .cartcopyprice').addClass('show-cart');
   };
   $('div[data-elem-type="text"] .cartcopy').html(chCounter);
   if(chCounter==0){ $('.cartcopy').addClass('blkElem');
   }else{ $('.cartcopy').removeClass('blkElem'); }; 
   if(chCounter==''){$('div[data-elem-type="text"] .cartcopy').html(0);}; };
       setTimeout(function(){chkNum();}, 500);
   $(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() {
       setTimeout(function(){chkNum();}, 300);
   $('div[data-elem-type="image"] .cartcopy').addClass('cartcopyanim');    
   setTimeout(function(){ $('.cartcopy').removeClass('cartcopyanim');}, 1000);});
   $('.cartcopy').click(function(e){e.preventDefault();tcart__openCart();});
});	
</script>

Как сделать своё избранное в меню из ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него элемент Image с иконкой сердечка, задали ему класс favorites_icon
3
Добавили в него элемент Text, задали ему класс favorites_total
4
Создали блок избранное ST110
5
Добавили код на страницу, в блок Другое - Т123

Библиотека для примера

<style>
.blkFav{pointer-events:none; }
.favorites_icon , 
.favorites_total .tn-atom {
    opacity: 0;
    pointer-events: none;
}
.r .show-fav{
    opacity: 1;
    pointer-events: auto;
}
.favorites_icon_anim {
    -webkit-animation: t1002__pulse-anim 0.6s;
    animation: t1002__pulse-anim 0.6s;
}
.favorites_icon{
    cursor:pointer;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out,-webkit-transform 0.2s ease-in-out;
}
.t1002__wishlisticon {  display: none}
</style>

<script>
$( document ).ready(function() {
    let emptyFavorites = false; //Скрыть-Показать пустое избранное - true-false
   
    let fIcon = $('.favorites_icon');
    let fTotal = $('.favorites_total');
  
    function checkTotal(){
        if (window.twishlist === undefined) {  return; }
        if(!emptyFavorites) $('.favorites_icon, .favorites_total  .tn-atom').addClass('show-fav');   
        let nTot = twishlist.total;
        $('.favorites_total  .tn-atom').text(nTot);
        $('.favorites_icon').addClass('favorites_icon_anim');    
        setTimeout(function(){ $('.favorites_icon').removeClass('favorites_icon_anim');}, 700);
        if  (nTot==0){
            //$('.favorites_icon').addClass('blkFav');
            if(emptyFavorites) {$('.favorites_icon, .favorites_total  .tn-atom').removeClass('show-fav');
        }else{$('.cartcopy, .cartcopyprice').addClass('show-fav')};
        }else{ 
            $('.favorites_icon').removeClass('blkFav');
            if(emptyFavorites) $('.favorites_icon, .favorites_total  .tn-atom').addClass('show-fav');
        };
    };
    setTimeout(function(){checkTotal()}, 1000);
    $(".t1002").on('DOMSubtreeModified', ".t1002__wishlisticon-counter", function() {
        setTimeout(function(){checkTotal()}, 300);
    });
    $('.favorites_icon').click(function(e){  twishlist__openWishlist() });
});	
</script>

Как сделать иконки избранного в ZeroBlock в Tilda

1
Создали ZeroBlock и блок ST110
2
Добавили в него элемент Image с иконкой сердечка и задали ему ссылку
#addtofavorites:GOOGLES YELLOW=3500:::image=https://static.tildacdn.com/tild6365-3730-4737-b564-643738326266/swim-shop-2-1100x550.jpg
3
Добавили код на страницу, в блок Другое - Т123

Библиотека для примера

<style>
a.active-favorites:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(https://static.tildacdn.com/tild6534-3138-4336-b634-373562613161/Group_24.svg);
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    transform: scale(1.05);
}
a.active-favorites img {
    opacity: 0;
}
</style>

<script>
$( document ).ready(function() {
//Ссылки на страницы товара
let productLink = {
    "GOOGLES YELLOW"   : "#link1",
    "SWIMMING GLASSES" : "#link2",
    "GOOGLES BLACK"    : "#link3"
};
setTimeout(function(){  
if (window.twishlist != undefined) {    
    //Добавить атрибут названия товара к иконкам избранного
    $('a[href^="#addtofavorites:"]').each(function() {
        let prodUrl = $(this).attr('href');
        prodUrl = prodUrl.replace('#addtofavorites:', '');
        prodUrl = prodUrl.split('=');
        $(this).attr('data-prod-title',prodUrl[0]);
    });
    
    if(twishlist.total>0){
        let prodListArr = [];
        let twList = twishlist.products;
        $.each(twList, function( key, value ) { prodListArr.push(value.name)});
        $.each(prodListArr,function(index,value){ 
            $('a[data-prod-title]').each(function() {
                let title = $(this).attr('data-prod-title');
                if(value==title){  
                    $(this).addClass('active-favorites');                    
                };
            });
        });
    };

    //Добавить в избранное по клику на иконку
    $('a[href^="#addtofavorites:"]').click(function(e){
        let prodListArr = [];
        let btnElem = $(this);
        let act = false;
        let prodName = $(this).attr('data-prod-title');
        
        //Ищем ссылку продука в списке
        let prodLink=" ";
        $.each(productLink, function( key, value ) { 
            if( prodName == key ){prodLink = value };
        });

        setTimeout(function(){ 
            let twList = twishlist.products;
            $.each(twList, function( key, value ) { prodListArr.push(value.name)});
            $.each(prodListArr,function(index,value){
                if(prodName==value){  
                    act = true;
                    if(prodLink != " "){
                        twishlist.products[index].url = ""+prodLink+"";
                        setTimeout(function(){ 
                            twishlist__saveLocalObj();
                            twishlist__reDrawProducts()
                        }, 100);
                    };
                    };
            });
            if(act){
                
                btnElem.addClass('active-favorites');

                
            }else{  btnElem.removeClass('active-favorites') };
        }, 100);
    });
    //Убираем активное состояние иконок избранного
    $(document).on('click','.t1002__product-del',function(e){ 
        let prodName = $(this).closest('.t1002__product').find('.t1002__product-title').text();
        setTimeout(function(){
            let prodListArr = [];
            if(twishlist.total>0){
                let twList = twishlist.products;
                $.each(twList, function( key, value ) { prodListArr.push(value.name)});
                $.each(prodListArr,function(index,value){ 
                    if(prodName!=value){
                        $('.active-favorites[data-prod-title="'+prodName+'"]').removeClass('active-favorites');
                    };
                });
            }else{
                $('.active-favorites').removeClass('active-favorites');
            };
        }, 100);
    });
};    
}, 1000);    
});	
</script>
Made on
Tilda