Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

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

SWIM
STORE

SWIM
ACCESSORIES

GOOGLES YELLOW

Buy now

SWIMMING GLASSES

Buy now

GOOGLES BLACK

Buy now

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

Создали ZeroBlock

Добавили в него элемент Image с иконкой корзины (отключили ему LazyLoad)
и 2 элемента Text с цифрой 0 (для количества товара) и знаком = (для суммы заказа)
(Смотри ниже скрин из Zero)
Задали класс для текста с кол-вом и для иконки корзины cartcopy_elem
Задали класс для текста с ценой cartprice_elem

Создали блок с корзиной ST100

Добавили код на страницу, в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём свою иконку корзины и избранного в ZeroBlock. Создаём товар с кнопками "купить" и "добавить в избранное" прямо в ZeroBlock

Фрагмент видео

Посмотреть видео в личном кабинете ►

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


<script>
document.addEventListener("DOMContentLoaded", function() {    
    (function () {
        const hideMode = false; //Скрыть-Показать пустую корзину - true-false

        const cartcopyElem = document.querySelectorAll(".cartcopy_elem .tn-atom");
        cartcopyElem.forEach(function (el, index) {
            el.classList.add('cartcopy');   
        });
        
        const cartpriceElem = document.querySelectorAll(".cartprice_elem .tn-atom");
        cartpriceElem.forEach(function (el, index) {
            el.classList.add('cartcopyprice');   
        });
        
        function showCart(){
            document.querySelectorAll('.cartcopy').forEach(el=>el.classList.add('show-cart'));
            document.querySelectorAll('.cartcopyprice').forEach(el=>el.classList.add('show-cart'));  
        };
        
        function checkCartTotal(){
            if (window.tcart != undefined) {
                if(!hideMode) showCart()
                
                const chCounter = window.tcart.total;
                const chPrice = window.tcart.prodamount;
                if  (chPrice==0){
                    document.querySelectorAll('div[data-elem-type="text"] .cartcopyprice').forEach(el=>el.innerHTML='');
                    if(hideMode) {
                        document.querySelectorAll('.cartcopy').forEach(el=>el.classList.remove('show-cart'));
                        document.querySelectorAll('.cartcopyprice').forEach(el=>el.classList.remove('show-cart'));
                    }else{
                        showCart();
                    };
               }else{ 
                    document.querySelectorAll('div[data-elem-type="text"] .cartcopyprice').forEach(el=>el.innerHTML=chPrice+' руб');
                    if(hideMode) showCart();
               };

               document.querySelectorAll('div[data-elem-type="text"] .cartcopy').forEach(el=>el.innerHTML=chCounter);
               
               if(chCounter==0){ 
                   document.querySelectorAll('.cartcopy').forEach(el=>el.classList.add('blkElem'));
                   
               }else{ 
                   document.querySelectorAll('.cartcopy').forEach(el=>el.classList.remove('blkElem'));
               }; 
              
               if(chCounter=='') document.querySelectorAll('div[data-elem-type="text"] .cartcopy').forEach(el=>el.innerHTML=0);
            };

        };
       
        setTimeout(function(){
            checkCartTotal();
        }, 500);
        
        
        const observer = new MutationObserver(mutationRecords => {
            setTimeout(function(){
               checkCartTotal();
            }, 300);
            document.querySelectorAll('div[data-elem-type="image"] .cartcopy').forEach(el=>el.classList.add('cartcopyanim'));
            setTimeout(function(){ 
                document.querySelectorAll('div[data-elem-type="image"] .cartcopy').forEach(el=>el.classList.remove('cartcopyanim'));
            }, 1000);
        });
        
        const carticonCounter  = document.querySelector('.t706__carticon-counter');
        if(carticonCounter!=null){
            observer.observe(carticonCounter, {
                childList: true, 
                subtree: true, 
                characterDataOldValue: true
            });
        }else{
            console.log('cart counter option not active');  
        };
        
        const cartcopy = document.querySelectorAll(".cartcopy");
        cartcopy.forEach(function (el, index) {
            el.addEventListener('click',function(e) {
                e.preventDefault();
                tcart__openCart();
            });    
        });

    })();    
});	
</script>


<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>

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

Создали ZeroBlock

Добавили в него элемент Image (отключили ему LazyLoad) с иконкой сердечка, задали ему класс favorites_icon
(смотри скрин из Zero)

Добавили в него элемент Text, задали ему класс favorites_total

Создали блок избранное ST110

Добавили код на страницу, в блок Другое - Т123

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


<script>
document.addEventListener("DOMContentLoaded", function() {   
    (function () {
        const emptyFavorites = false; //Скрыть-Показать пустое избранное - true-false
       
        const fIcon = document.querySelectorAll('.favorites_icon');
        const fTotal = document.querySelectorAll('.favorites_total');
      
        function showWishIcon(){
            fIcon.forEach(el=>el.classList.add('show-fav'));
            fTotal.forEach(el=>el.classList.add('show-fav'));
        };
        
        function hideWishIcon(){
            fIcon.forEach(el=>el.classList.remove('show-fav'));
            fTotal.forEach(el=>el.classList.remove('show-fav'));
        };
        
    
        function checkTotalWishList(){
            
            if (window.twishlist != undefined) { 
                if(!emptyFavorites) showWishIcon();
                    
                const nTot = twishlist.total;
                fTotal.forEach(el=>el.querySelector('.tn-atom').innerText=nTot);
                
                fIcon.forEach(el=>el.classList.add('favorites_icon_anim'));
 
                setTimeout(function(){ 
                    fIcon.forEach(el=>el.classList.remove('favorites_icon_anim'));
                }, 700);
            
                if  (nTot==0){
                    if(emptyFavorites) {
                        hideWishIcon();
                    }else{
                        showWishIcon();
                    };
                }else{ 
                    fIcon.forEach(el=>el.classList.remove('blkFav'));
                    if(emptyFavorites) showWishIcon();
                };
            };
        };
        
        
        setTimeout(function(){
            checkTotalWishList()
        }, 1000);

        const observer = new MutationObserver(mutationRecords => {
            setTimeout(function(){
               checkTotalWishList();
            }, 300);
        });
        
        const wishiconCounter  = document.querySelector('.t1002__wishlisticon-counter');
        if(wishiconCounter!=null){
            observer.observe(wishiconCounter, {
                childList: true, 
                subtree: true, 
                characterDataOldValue: true
            });
        }else{
            console.log('wishlist counter option not active');  
        };

        fIcon.forEach(function (el, index) {
            el.addEventListener('click',function(e) {
                twishlist__openWishlist();
            });    
        });
        

    })();         
});	
</script>


<style>
.blkFav{pointer-events:none; }
.favorites_icon , 
.favorites_total {
    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>

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

Создали ZeroBlock и блок ST110

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

Добавили код на страницу, в блок Другое - Т123

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


<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
    //Ссылки на страницы товара
    const productLink = {
        "GOOGLES YELLOW"   : "#link1",
        "SWIMMING GLASSES" : "#link2",
        "GOOGLES BLACK"    : "#link3"
    };
    
    setTimeout(function(){
        if (window.twishlist != undefined) {    
            
            const addtofavoritesIcon = document.querySelectorAll('a[href^="#addtofavorites:"]');
            
            //Добавить атрибут названия товара к иконкам избранного
            addtofavoritesIcon.forEach(function (el, index) {
                let prodUrl = el.getAttribute('href');
                prodUrl = prodUrl.replace('#addtofavorites:', '');
                prodUrl = prodUrl.split('=');
                el.setAttribute('data-prod-title',prodUrl[0]);
            });
            
            if(twishlist.total>0){
                let twList = twishlist.products;
                for(let i=0; i<twList.length; i++){
                    document.querySelectorAll('a[data-prod-title]').forEach(function (el, index) {
                        const title = el.getAttribute('data-prod-title');
                        if(twList[i].name == title){
                            el.classList.add('active-favorites');  
                        };
                    });
                };
            };
            
            
            //Добавить в избранное по клику на иконку
            addtofavoritesIcon.forEach(function (el, index) {
                el.addEventListener('click',function(e) {

                    const btnElem = el;
                    let act = false;
                    let prodName = el.getAttribute('data-prod-title');
                    
                    //Ищем ссылку продука в списке
                    let prodLink=" ";
                    
                    for (key in productLink) {
                        if( prodName == key ) prodLink = productLink[key];
                    };
                    
                    setTimeout(function(){ 
                        let twList = twishlist.products;
                        for(let i=0; i<twList.length; i++){
                            if(prodName==twList[i].name){  
                                act = true;
                                if(prodLink != " "){
                                    twList[i].url = prodLink;
                                    setTimeout(function(){ 
                                        twishlist__saveLocalObj();
                                        twishlist__reDrawProducts()
                                    }, 100);
                                };
                            };
                        };
     
                        if(act){
                            btnElem.classList.add('active-favorites');
                        }else{  
                            btnElem.classList.remove('active-favorites') 
                        };
                        
                        const hash = location.hash;
                        if(hash!='' && hash.includes("#addtofavorites:")){
                            history.replaceState(null, null, ' ');  
                        };
                        
                    }, 100);

                });    
            });
            
            //Убираем активное состояние иконок избранного
            document.addEventListener('click', function(event) { 
                
                if(event.target.closest('.t1002__product-del')){
                    let prodName = event.target.closest('.t1002__product').querySelector('.t1002__product-title').innerText;
        
                    setTimeout(function(){
                        if(twishlist.total>0){
                            const activeHeart = document.querySelector('.active-favorites[data-prod-title="'+prodName+'"]');
                            if(activeHeart!=null) activeHeart.classList.remove('active-favorites');
                        }else{
                            let activeFavor = document.querySelectorAll(".active-favorites");
                            activeFavor.forEach(function (el, index) {
                                el.classList.remove('active-favorites');
                            });

                        };
                    }, 100);
                };
            });
        };    
    }, 1000);  
})();    
});	
</script>


<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>