Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать свою корзину и избранное в меню из ZeroBlock в Tilda
SWIM
STORE
0
=
0
SWIM
ACCESSORIES
GOOGLES YELLOW
SWIMMING GLASSES
GOOGLES BLACK

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

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

Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём свою иконку корзины и избранного в ZeroBlock. Создаём товар с кнопками "купить" и "добавить в избранное" прямо в ZeroBlock
Фрагмент видео
Библиотека для примера
<script>
(function() {
    
    const hideMode = false;  //Скрыть-Показать пустую корзину - true-false
    
    if (typeof t_onReady !== 'function') return;

    t_onReady(function() {
        setTimeout(function() {
            if (typeof t_onFuncLoad !== 'function') return;

            t_onFuncLoad('tcart__init', function() {
                let attempts = 0;
                const MAX_ATTEMPTS = 50;

                function waitForTcart() {
                    attempts++;

                    if (window.tcart !== undefined) {
                        initCustomCart();
                        return;
                    }

                    if (attempts >= MAX_ATTEMPTS) return;

                    setTimeout(waitForTcart, 100);
                }

                waitForTcart();
            });
        }, 200);
    });

    function initCustomCart() {
        document.querySelectorAll(".cartcopy_elem .tn-atom")
            .forEach(el => el.classList.add('cartcopy'));
        document.querySelectorAll(".cartprice_elem .tn-atom")
            .forEach(el => 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) return;

            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);
            }
        }

        checkCartTotal();

        const carticonCounter = document.querySelector('.t706__carticon-counter');
        if (carticonCounter) {
            const observer = new MutationObserver(function () {
                setTimeout(checkCartTotal, 300);

                document.querySelectorAll('div[data-elem-type="image"] .cartcopy')
                    .forEach(el => el.classList.add('cartcopyanim'));
                setTimeout(() => {
                    document.querySelectorAll('div[data-elem-type="image"] .cartcopy')
                        .forEach(el => el.classList.remove('cartcopyanim'));
                }, 1000);
            });

            observer.observe(carticonCounter, {
                childList: true,
                subtree: true,
                characterDataOldValue: true
            });
        }

        document.querySelectorAll(".cartcopy").forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                if (typeof tcart__openCart === 'function') 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,
.cartcopy_shape .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

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

Библиотека для примера
<script>
(function() {
    const emptyFavorites = false; //Скрыть-Показать пустое избранное - true-false

    if (typeof t_onReady !== 'function') return;

    t_onReady(function() {
        setTimeout(function() {
            if (typeof t_onFuncLoad !== 'function') return;

            t_onFuncLoad('twishlist__init', function() {
                let attempts = 0;
                const MAX_ATTEMPTS = 50;

                function waitForTwishlist() {
                    attempts++;

                    if (window.twishlist !== undefined) {
                        initCustomWishlist();
                        return;
                    }

                    if (attempts >= MAX_ATTEMPTS) return;

                    setTimeout(waitForTwishlist, 100);
                }

                waitForTwishlist();
            });
        }, 200);
    });

    function initCustomWishlist() {
        const fIcon = document.querySelectorAll('.favorites_icon');
        const fTotal = document.querySelectorAll('.favorites_total');
        const fShape = document.querySelectorAll('.favorites_shape');

        function showWishIcon() {
            fIcon.forEach(el => el.classList.add('show-fav'));
            fTotal.forEach(el => el.classList.add('show-fav'));
            fShape.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'));
            fShape.forEach(el => el.classList.remove('show-fav'));
        }

        function checkTotalWishList(animate = true) {
            if (window.twishlist == undefined) return;

            if (!emptyFavorites) showWishIcon();

            const nTot = window.twishlist.total;
            fTotal.forEach(el => el.querySelector('.tn-atom').innerText = nTot);

            if (animate) {
                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();
            }
        }

    
        checkTotalWishList(false);

        const wishiconCounter = document.querySelector('.t1002__wishlisticon-counter');
        if (wishiconCounter) {
            const observer = new MutationObserver(function () {
                setTimeout(function () {
                    checkTotalWishList(true);
                }, 300);
            });

            observer.observe(wishiconCounter, {
                childList: true,
                subtree: true,
                characterDataOldValue: true
            });
        }

        fIcon.forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                if (typeof twishlist__openWishlist === 'function') twishlist__openWishlist();
            });
        });
    }
})();
</script>


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

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

Библиотека для примера
<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>
Made on
Tilda